topnuomi
/
zxf
mirror of https://gitee.com/topnuomi/zxf
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

优化样式

This commit is contained in:
TOP糯米 2023-10-11 22:16:05 +08:00
parent b943f47818
commit 15ad25bad1
8 changed files with 38 additions and 1981 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/parse.php
View File

@ -1,22 +0,0 @@
<?php
$file = './style.less.bak';
$newfile = './style.less';
$fp = fopen($file, 'a+');
$newfp = fopen($newfile, 'a+');
while (!feof($fp)) {
$line = fgets($fp);
$t = preg_replace_callback("/ (\d+)px/", function ($item) {
return ' ' . ($item[1] * 1) / 100 . 'rem';
}, $line);
fwrite($newfp, $t);
// print_r($t);
// preg_match_all("/ (\d+)px/", $line, $temp_matches, PREG_OFFSET_CAPTURE);
// print_r($temp_matches);
}
fclose($fp);
fclose($newfp);

3
css/responsive.css
View File

@ -510,7 +510,8 @@
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1); box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
} }
.s-content.g2 .icon-cont { .s-content.g2 .icon-cont {
height: auto; width: 100%;
height: 2.3rem;
} }
.s-content.g2 .desc { .s-content.g2 .desc {
padding: 0.3rem; padding: 0.3rem;

3
css/responsive.less
View File

@ -678,7 +678,8 @@
} }
.icon-cont { .icon-cont {
height: auto; width: 100%;
height: 2.3rem;
} }
.desc { .desc {

771
css/responsive.less.bak
View File

@ -1,771 +0,0 @@
// main max width
@mw: 92%;
@xt: 18px;
@mt: 16px;
@st: 14px;
@mst: 12px;
@keyframes mobileHeaderFadeIn {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 0.9;
transform: translateY(0);
}
}
@keyframes mobileHeaderFadeOut {
0% {
opacity: 0.9;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}
@media screen and (max-width: 768px) {
.main-wrap {
width: @mw;
max-width: 500px;
}
.header.style1 {
.menu {
.link {
color: #FFFFFF;
}
.link.active {
color: #FFFFFF;
font-weight: bold;
}
.link:hover {
color: #FFFFFF;
}
}
}
.header.style2 {
.menu {
.link {
color: #FFFFFF;
}
.link.active {
color: #FFFFFF;
font-weight: bold;
}
.link:hover {
color: #FFFFFF;
}
}
}
.header {
.logo {
position: relative;
z-index: 10;
font-size: 0;
img {
max-height: 26px;
}
}
.main {
height: 45px;
}
.menu {
.menu-group.iFadeIn,
.menu-mask.iFadeIn {
animation: mobileHeaderFadeIn 1.2s;
}
.menu-group.iFadeOut,
.menu-mask.iFadeOut {
animation: mobileHeaderFadeOut 1.2s;
}
.menu-group {
z-index: 10;
display: none;
position: fixed;
left: 0;
top: 45px;
right: 0;
}
.menu-mask {
z-index: 5;
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000000;
opacity: 0.9;
}
.menu-btn {
display: block;
z-index: 10;
position: relative;
font-size: 0;
.btn-img {
max-width: 26px;
}
}
.item {
margin-left: 0;
padding: 0 18px;
.link {
display: block;
box-sizing: border-box;
border-bottom: 1px solid #737373;
padding: 13px 0;
font-size: 16px;
}
}
}
}
.footer {
.logo-bottom {
max-height: 26px;
}
.main {
.row {
font-size: @mt;
margin-top: 15px;
}
.tel {
width: 208px;
font-size: @mt;
padding: 10px;
}
}
}
.section.main-banner {
.item {
height: 255px;
}
.swiper-pagination {
display: none;
}
}
.banner-text {
padding-top: 25px;
p:nth-child(1) {
font-size: @xt;
line-height: 18px;
margin-bottom: 15px;
}
p:nth-child(2) {
font-size: @st;
line-height: 16px;
}
}
.section {
.section-title.style-1 {
.title {
font-size: @xt;
line-height: 18px;
}
.title::before,
.title::after {
width: 29px;
height: 2px;
}
}
}
.section.idx-about {
margin-top: 20px;
.ia-container {
margin-top: 20px;
font-size: @mt;
line-height: 20px;
}
.ia-image {
margin-top: 20px;
}
}
.section.idx-culture {
margin-top: 35px;
margin-bottom: 35px;
.culture-item:first-child {
margin-top: 20px;
}
.culture-item {
height: auto;
margin-top: 10px;
padding: 20px;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.title {
margin-bottom: 14px;
.text {
font-size: @mt;
}
.cover {
width: 15px;
height: 15px;
margin-right: 8px;
}
}
.desc {
font-size: @st;
line-height: 18px;
}
}
.section.sec-banner {
height: 174px;
.banner-text {
padding-top: 45px;
}
}
.full-wrap.about {
background-color: unset;
}
.section.about-textarea {
padding-top: 20px;
padding-bottom: 35px;
.at-img {
max-height: 30px;
}
.content {
margin-top: 20px;
font-size: @mt;
line-height: 20px;
}
.img-group {
margin-top: 30px;
.item {
width: 32%;
height: auto;
}
}
}
.section.mapcont {
margin-top: 0;
.mcont {
margin-top: 25px;
}
}
.section.addrcont {
margin-top: 20px;
margin-bottom: 50px;
.aacont {
margin-top: 25px;
li::before {
width: 19px;
height: 19px;
margin-top: 2px;
}
li:nth-child(2) {
margin-top: 15px;
}
li {
width: 100%;
float: unset;
margin-top: 15px;
align-items: flex-start;
}
a {
font-size: @mt;
line-height: unset;
margin-left: 7px;
}
}
}
.section.contact-map {
margin-top: 30px;
height: 250px;
.cm-desc {
width: 339px;
border: 1px solid #DDDDDD;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
.logo {
width: 127px;
height: 127px;
}
.desc {
width: auto;
padding: 14px;
}
}
.cm-map {
top: 30px;
height: 220px;
background-size: cover;
}
.title {
h1 {
font-size: @xt;
margin-bottom: 0;
line-height: 18px;
}
p {
font-size: @st;
}
}
.items {
li {
margin-top: 5px;
}
img {
width: 13px;
height: 13px;
}
p {
font-size: @st;
line-height: 14px;
}
}
}
.section.paragraph-content {
margin-top: 35px;
margin-bottom: 37px;
.paragraph {
.title {
font-size: @xt;
line-height: 18px;
text-align: center;
margin-bottom: 18px;
}
.content {
font-size: @mt;
line-height: 20px;
}
}
}
.section.cooperate {
.content {
font-size: @mt;
line-height: 20px;
margin-top: 28px;
margin-bottom: 35px;
}
}
.section.article-detail {
margin-top: 0;
margin-bottom: 40px;
.title {
padding: 20px 0;
text-align: left;
border-bottom: 2px dashed #E5E5E5;
h1 {
font-size: @xt;
line-height: 20px;
}
}
.content {
padding: 12px 0;
font-size: @mt;
line-height: 20px;
}
.close-page {
display: none;
}
}
.section.story-cont {
margin-top: 24px;
.title {
font-size: @xt;
text-align: center;
margin-bottom: 12px;
}
.image-con {
border-radius: 0;
.text-con {
padding: 9px 10px;
p {
height: 16px;
font-size: @mt;
line-height: 16px;
}
}
}
.story-item:nth-child(2n) {
.desc {
border-radius: 0;
}
}
.story-item {
.img {
width: 100%;
height: 188px;
border-radius: 0;
float: unset;
}
.desc {
width: 100%;
height: auto;
border-radius: 0;
float: unset;
margin-top: 0;
padding: 30px 20px;
}
.text {
display: inline-block;
font-size: @mt;
line-height: 20px;
margin-bottom: 20px;
}
.text:nth-child(2) {
color: #666666;
margin-left: 10px;
}
.content {
font-size: @st;
line-height: 20px;
}
}
}
.section.story-cont.last {
margin-bottom: 24px;
}
.s-section {
.s-title {
font-size: @xt;
line-height: 16px;
text-align: center;
}
}
.s-section.s1-first {
margin-top: 30px;
margin-bottom: 30px;
}
.section.business-nav {
width: 100%;
margin-top: 10px;
.nav {
li {
width: auto;
padding: 0;
}
a {
display: block;
width: 100%;
color: #666666;
font-size: @st;
line-height: 30px;
padding: 2px 12px;
box-sizing: border-box;
}
}
}
.section.business-cont {
.title {
font-size: 0px;
h2 {
font-size: @xt;
line-height: 18px;
}
}
.title::after {
width: 29px;
height: 2px;
margin-top: 10px;
}
}
.business-cont.s1 {
margin-top: 25px;
}
.business-cont.s2 {
margin-top: 30px;
.mid-box {
margin: 15px 0 5px 0;
.ad-text {
font-size: @st;
font-weight: normal;
text-align: center;
}
}
}
.business-cont.s3 {
margin-top: 50px;
padding-bottom: 0;
padding-top: 0;
background-color: unset;
.mid-box {
margin-top: 20px;
margin-bottom: 20px;
.num {
font-size: @st;
line-height: 18px;
}
.desc {
font-size: @st;
line-height: 18px;
margin-top: 10px;
}
.cont {
width: 100%;
}
li {
width: 33.33333%;
}
li::after {
height: 26px;
}
}
}
.business-cont.s4 {
padding: 30px 0;
}
.s-content.g1 {
text-align: center;
li {
width: 46%;
margin-left: 2%;
margin-right: 2%;
}
li:nth-child(4n) {
margin-right: 2%;
}
.icon {
width: 57px;
height: 41px;
}
h4 {
font-size: @mt;
margin: 15px 0;
}
p {
font-size: @st;
}
.item {
width: 100%;
height: auto;
padding: 20px 0;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
}
.s-content.g2 {
li {
float: initial;
margin-right: 0;
}
.item {
width: 100%;
height: auto;
border: 1px solid #DDDDDD;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.icon-cont {
height: auto;
}
.desc {
padding: 15px;
height: auto;
h4 {
font-size: @mt;
margin-bottom: 10px;
}
p {
font-size: @st;
}
}
}
.s-content.g3,
.s-content.g4 {
ul {
text-align: center;
}
li {
width: 46%;
margin-left: 2%;
margin-right: 2%;
margin-top: 12px;
}
li:nth-child(3n) {
margin-right: 2%;
}
.item {
width: 100%;
height: auto;
border: 1px solid #DDDDDD;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.desc {
text-align: left;
.i-title {
height: 20px;
font-size: @mt;
margin-bottom: 5px;
line-height: 20px;
}
.i-desc {
height: 32px;
font-size: @st;
line-height: 16px;
color: #666666;
}
}
.icon-cont {
height: auto;
}
.desc {
height: auto;
padding: 10px;
}
// g4
.btn {
height: auto;
padding: 10px;
}
.btn {
.b-text {
width: 130px;
height: 26px;
line-height: 26px;
font-size: @st;
}
}
}
.s-content.g5 {
margin-top: 15px;
.item {
width: 100px;
img {
width: 26px;
height: 26px;
}
p {
font-size: @mt;
line-height: 20px;
margin-top: 15px;
}
}
}
}

26
css/style.css
View File

@ -119,7 +119,7 @@
} }
.header .menu .link { .header .menu .link {
font-size: 0.18rem; font-size: 0.18rem;
transition: all 0.35s; transition: color 0.35s;
} }
.footer { .footer {
width: 100%; width: 100%;
@ -208,6 +208,7 @@
} }
.section.main-banner .swiper-pagination { .section.main-banner .swiper-pagination {
bottom: 0.4rem; bottom: 0.4rem;
font-size: 0;
} }
.section.main-banner .item { .section.main-banner .item {
display: flex; display: flex;
@ -225,10 +226,10 @@
opacity: 0; opacity: 0;
} }
.section.main-banner .banner-text p:nth-child(1) { .section.main-banner .banner-text p:nth-child(1) {
transition: 0.8s ease 0.4s; transition: transform 0.8s ease 0.4s, opacity 0.8s ease 0.4s;
} }
.section.main-banner .banner-text p:nth-child(2) { .section.main-banner .banner-text p:nth-child(2) {
transition: 0.8s ease 0.6s; transition: transform 0.8s ease 0.6s, opacity 0.8s ease 0.6s;
} }
.section.main-banner .swiper-slide-active .banner-text p:nth-child(1), .section.main-banner .swiper-slide-active .banner-text p:nth-child(1),
.section.main-banner .swiper-slide-active .banner-text p:nth-child(2) { .section.main-banner .swiper-slide-active .banner-text p:nth-child(2) {
@ -289,13 +290,13 @@
font-size: 0.3rem; font-size: 0.3rem;
font-weight: bold; font-weight: bold;
color: #000001; color: #000001;
transition: all 0.35s; transition: color 0.35s;
} }
.section.idx-culture .desc { .section.idx-culture .desc {
font-size: 0.24rem; font-size: 0.24rem;
color: #666666; color: #666666;
} }
.section.idx-culture .cultrue-item:hover .text { .section.idx-culture .culture-item:hover .text {
color: #E72A3A; color: #E72A3A;
} }
.section.sec-banner { .section.sec-banner {
@ -422,7 +423,7 @@
font-size: 0.2rem; font-size: 0.2rem;
color: #040000; color: #040000;
margin-left: 0.1rem; margin-left: 0.1rem;
transition: all 0.35s; transition: color 0.35s;
} }
.section.addrcont .aacont a:hover { .section.addrcont .aacont a:hover {
color: #E72A3A; color: #E72A3A;
@ -633,6 +634,7 @@
font-size: 0.24rem; font-size: 0.24rem;
font-weight: bold; font-weight: bold;
color: #999999; color: #999999;
transition: color 0.35s;
} }
.section.business-nav .nav a:hover, .section.business-nav .nav a:hover,
.section.business-nav .nav a.active { .section.business-nav .nav a.active {
@ -753,7 +755,7 @@
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
line-height: 0.24rem; line-height: 0.24rem;
transition: all 0.35s; transition: color 0.35s;
} }
.s-content.g1 p { .s-content.g1 p {
height: 0.2rem; height: 0.2rem;
@ -765,7 +767,7 @@
width: 1.15rem; width: 1.15rem;
height: 0.8rem; height: 0.8rem;
object-fit: cover; object-fit: cover;
transition: all 0.35s; transition: transform 0.35s;
} }
.s-content.g1 .item:hover h4 { .s-content.g1 .item:hover h4 {
color: #E72A3A; color: #E72A3A;
@ -799,7 +801,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: all 0.35s; transition: transform 0.35s;
} }
.s-content.g2 .desc { .s-content.g2 .desc {
width: 100%; width: 100%;
@ -817,7 +819,7 @@
color: #333333; color: #333333;
line-height: 0.2rem; line-height: 0.2rem;
margin-bottom: 0.18rem; margin-bottom: 0.18rem;
transition: all 0.35s; transition: color 0.35s;
} }
.s-content.g2 .desc p { .s-content.g2 .desc p {
height: 0.4rem; height: 0.4rem;
@ -883,7 +885,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: all 0.35s; transition: transform 0.35s;
} }
.s-content.g3 .desc, .s-content.g3 .desc,
.s-content.g4 .desc { .s-content.g4 .desc {
@ -902,7 +904,7 @@
color: #333333; color: #333333;
line-height: 0.2rem; line-height: 0.2rem;
margin-bottom: 0.18rem; margin-bottom: 0.18rem;
transition: all 0.35s; transition: color 0.35s;
} }
.s-content.g3 .desc .i-desc, .s-content.g3 .desc .i-desc,
.s-content.g4 .desc .i-desc { .s-content.g4 .desc .i-desc {

29
css/style.less
View File

@ -154,7 +154,7 @@
.link { .link {
font-size: 0.18rem; font-size: 0.18rem;
transition: all .35s; transition: color .35s;
} }
} }
} }
@ -267,6 +267,7 @@
.swiper-pagination { .swiper-pagination {
bottom: 0.4rem; bottom: 0.4rem;
font-size: 0;
} }
.item { .item {
@ -289,11 +290,13 @@
} }
p:nth-child(1) { p:nth-child(1) {
transition: .8s ease .4s; transition: transform .8s ease .4s,
opacity .8s ease .4s;
} }
p:nth-child(2) { p:nth-child(2) {
transition: .8s ease .6s; transition: transform .8s ease .6s,
opacity .8s ease .6s;
} }
} }
@ -368,7 +371,7 @@
font-size: 0.3rem; font-size: 0.3rem;
font-weight: bold; font-weight: bold;
color: #000001; color: #000001;
transition: all .35s; transition: color .35s;
} }
} }
@ -377,7 +380,7 @@
color: #666666; color: #666666;
} }
.cultrue-item:hover { .culture-item:hover {
.text { .text {
color: #E72A3A; color: #E72A3A;
} }
@ -529,7 +532,6 @@
display: inline-block; display: inline-block;
width: 0.27rem; width: 0.27rem;
height: 0.27rem; height: 0.27rem;
// background-image: url('../images/daohang.png');
background-size: 100%; background-size: 100%;
flex-shrink: 0; flex-shrink: 0;
} }
@ -538,7 +540,7 @@
font-size: 0.2rem; font-size: 0.2rem;
color: #040000; color: #040000;
margin-left: 0.1rem; margin-left: 0.1rem;
transition: all .35s; transition: color .35s;
} }
a:hover { a:hover {
@ -798,6 +800,7 @@
font-size: 0.24rem; font-size: 0.24rem;
font-weight: bold; font-weight: bold;
color: #999999; color: #999999;
transition: color .35s;
} }
a:hover, a:hover,
@ -948,7 +951,7 @@
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
line-height: 0.24rem; line-height: 0.24rem;
transition: all .35s; transition: color .35s;
} }
p { p {
@ -962,7 +965,7 @@
width: 1.15rem; width: 1.15rem;
height: 0.8rem; height: 0.8rem;
object-fit: cover; object-fit: cover;
transition: all .35s; transition: transform .35s;
} }
.item:hover { .item:hover {
@ -1006,7 +1009,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: all .35s; transition: transform .35s;
} }
} }
@ -1026,7 +1029,7 @@
color: #333333; color: #333333;
line-height: 0.2rem; line-height: 0.2rem;
margin-bottom: 0.18rem; margin-bottom: 0.18rem;
transition: all .35s; transition: color .35s;
} }
p { p {
@ -1106,7 +1109,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: all .35s; transition: transform .35s;
} }
} }
@ -1125,7 +1128,7 @@
color: #333333; color: #333333;
line-height: 0.2rem; line-height: 0.2rem;
margin-bottom: 0.18rem; margin-bottom: 0.18rem;
transition: all .35s; transition: color .35s;
} }
.i-desc { .i-desc {

1158
css/style.less.bak
View File

File diff suppressed because it is too large Load Diff

7
js/main.js
View File

@ -6,7 +6,8 @@ let isClose = true,
header = $('.header'), header = $('.header'),
heaerMenuGroup = $('.menu-group'), heaerMenuGroup = $('.menu-group'),
headerMask = $('.menu-mask'), headerMask = $('.menu-mask'),
headerMenuBtn = $('.btn-img'); headerMenuBtn = $('.btn-img'),
currentRem = 0;
let t1; let t1;
function showMenu() { function showMenu() {
@ -38,11 +39,11 @@ $(function () {
return windowWidth * (100 / (windowWidth > 768 ? 1920 : 750)); return windowWidth * (100 / (windowWidth > 768 ? 1920 : 750));
} }
function rszcal() { function rszcal() {
$('html').css('font-size', getRem() + "px"); currentRem = getRem();
$('html').css('font-size', currentRem + "px");
} }
$(window).resize(rszcal); $(window).resize(rszcal);
rszcal(); rszcal();
let currentRem = getRem();
$('.header .menu-group').load('../common/header.html'); $('.header .menu-group').load('../common/header.html');
$('.footer').load('../common/footer.html'); $('.footer').load('../common/footer.html');