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

更新前端px单位为rem

This commit is contained in:
TOP糯米 2023-10-11 21:42:06 +08:00
parent 9333b94238
commit b943f47818
10 changed files with 2903 additions and 848 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/parse.php Normal file
View File

@ -0,0 +1,22 @@
<?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);

410
css/responsive.css
View File

@ -19,15 +19,9 @@
}
}
@media screen and (max-width: 768px) {
.pc {
display: none;
}
.mobile {
display: initial;
}
.main-wrap {
width: 92%;
max-width: 500px;
width: 6.8rem;
max-width: 10rem;
}
.header.style1 .menu .link {
color: #FFFFFF;
@ -55,10 +49,10 @@
font-size: 0;
}
.header .logo img {
max-height: 26px;
max-height: 0.52rem;
}
.header .main {
height: 45px;
height: 0.9rem;
}
.header .menu .menu-group.iFadeIn,
.header .menu .menu-mask.iFadeIn {
@ -73,7 +67,7 @@
display: none;
position: fixed;
left: 0;
top: 45px;
top: 0.9rem;
right: 0;
}
.header .menu .menu-mask {
@ -88,122 +82,128 @@
opacity: 0.9;
}
.header .menu .menu-btn {
display: block;
z-index: 10;
position: relative;
font-size: 0;
}
.header .menu .menu-btn .btn-img {
max-width: 26px;
max-width: 0.52rem;
}
.header .menu .item {
margin-left: 0;
padding: 0 18px;
padding: 0 0.36rem;
}
.header .menu .item .link {
display: block;
box-sizing: border-box;
border-bottom: 1px solid #737373;
padding: 13px 0;
font-size: 16px;
border-bottom: 0.02rem solid #737373;
padding: 0.26rem 0;
font-size: 0.32rem;
}
.footer .logo-bottom {
max-height: 26px;
max-height: 0.52rem;
}
.footer .main .row {
font-size: 16px;
margin-top: 15px;
font-size: 0.32rem;
margin-top: 0.3rem;
line-height: 0.32rem;
}
.footer .main .tel {
width: 208px;
font-size: 16px;
padding: 10px;
width: 4.16rem;
font-size: 0.32rem;
padding: 0.2rem;
}
.section.main-banner .item {
height: 255px;
height: 5.1rem;
}
.section.main-banner .swiper-pagination {
display: none;
}
.banner-text {
padding-top: 25px;
padding-top: 0.5rem;
}
.banner-text p:nth-child(1) {
font-size: 18px;
line-height: 18px;
margin-bottom: 15px;
font-size: 0.36rem;
line-height: 0.36rem;
margin-bottom: 0.3rem;
}
.banner-text p:nth-child(2) {
font-size: 14px;
line-height: 16px;
font-size: 0.28rem;
line-height: 0.32rem;
}
.section .section-title.style-1 .title {
font-size: 18px;
line-height: 18px;
font-size: 0.36rem;
line-height: 0.36rem;
}
.section .section-title.style-1 .title::before,
.section .section-title.style-1 .title::after {
width: 29px;
height: 2px;
width: 0.58rem;
height: 0.04rem;
}
.section.idx-about {
margin-top: 20px;
margin-top: 0.4rem;
}
.section.idx-about .ia-container {
margin-top: 20px;
font-size: 16px;
line-height: 20px;
margin-top: 0.4rem;
font-size: 0.32rem;
line-height: 0.4rem;
}
.section.idx-about .ia-image {
margin-top: 20px;
margin-top: 0.4rem;
}
.section.idx-culture {
margin-top: 35px;
margin-bottom: 35px;
margin-top: 0.7rem;
margin-bottom: 0.7rem;
}
.section.idx-culture .culture-item:first-child {
margin-top: 20px;
margin-top: 0.4rem;
}
.section.idx-culture .culture-item {
width: 100%;
height: auto;
margin-top: 10px;
padding: 20px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
margin-top: 0.2rem;
padding: 0.4rem;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
}
.section.idx-culture .title {
margin-bottom: 14px;
margin-bottom: 0.28rem;
}
.section.idx-culture .title .text {
font-size: 16px;
font-size: 0.32rem;
}
.section.idx-culture .title .cover {
width: 15px;
height: 15px;
margin-right: 8px;
width: 0.3rem;
height: 0.3rem;
margin-right: 0.16rem;
}
.section.idx-culture .desc {
font-size: 14px;
line-height: 18px;
font-size: 0.28rem;
line-height: 0.36rem;
}
.section.sec-banner {
height: 174px;
height: 3.48rem;
}
.section.sec-banner .banner-text {
padding-top: 45px;
padding-top: 0.9rem;
}
.full-wrap.about {
background-color: unset;
}
.section.about-textarea {
padding-top: 20px;
padding-bottom: 35px;
padding-top: 0.4rem;
padding-bottom: 0.7rem;
}
.section.about-textarea .at-img {
max-height: 30px;
max-height: 0.6rem;
}
.section.about-textarea .content {
margin-top: 20px;
font-size: 16px;
line-height: 20px;
margin-top: 0.4rem;
font-size: 0.32rem;
line-height: 0.4rem;
}
.section.about-textarea .img-group {
margin-top: 30px;
margin-top: 0.6rem;
}
.section.about-textarea .img-group .item {
width: 32%;
@ -213,138 +213,147 @@
margin-top: 0;
}
.section.mapcont .mcont {
margin-top: 25px;
margin-top: 0.5rem;
}
.section.addrcont {
margin-top: 20px;
margin-bottom: 50px;
margin-top: 0.4rem;
margin-bottom: 1rem;
}
.section.addrcont .aacont {
margin-top: 25px;
margin-top: 0.5rem;
}
.section.addrcont .aacont li::before {
width: 19px;
height: 19px;
margin-top: 2px;
width: 0.38rem;
height: 0.38rem;
margin-top: 0.04rem;
}
.section.addrcont .aacont li:nth-child(2) {
margin-top: 15px;
margin-top: 0.3rem;
}
.section.addrcont .aacont li {
width: 100%;
float: unset;
margin-top: 15px;
margin-top: 0.3rem;
align-items: flex-start;
}
.section.addrcont .aacont a {
font-size: 16px;
font-size: 0.32rem;
line-height: unset;
margin-left: 7px;
margin-left: 0.14rem;
}
.section.contact-map {
margin-top: 30px;
height: 250px;
margin-top: 0.6rem;
height: 5rem;
}
.section.contact-map .cm-desc {
width: 339px;
border: 1px solid #DDDDDD;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
width: 6.78rem;
border: 0.02rem solid #DDDDDD;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
}
.section.contact-map .cm-desc .logo {
width: 127px;
height: 127px;
width: 2.54rem;
height: 2.54rem;
}
.section.contact-map .cm-desc .desc {
width: auto;
padding: 14px;
padding: 0.28rem;
}
.section.contact-map .cm-map {
top: 30px;
height: 220px;
top: 0.6rem;
height: 4.4rem;
background-size: cover;
}
.section.contact-map .title h1 {
font-size: 18px;
font-size: 0.36rem;
margin-bottom: 0;
line-height: 18px;
line-height: 0.36rem;
}
.section.contact-map .title p {
font-size: 14px;
font-size: 0.28rem;
}
.section.contact-map .items li {
margin-top: 5px;
margin-top: 0.1rem;
}
.section.contact-map .items img {
width: 13px;
height: 13px;
width: 0.26rem;
height: 0.26rem;
}
.section.contact-map .items p {
font-size: 14px;
line-height: 14px;
font-size: 0.28rem;
line-height: 0.28rem;
}
.section.paragraph-content {
margin-top: 35px;
margin-bottom: 37px;
margin-top: 0.7rem;
margin-bottom: 0.74rem;
}
.section.paragraph-content .paragraph .title {
font-size: 18px;
line-height: 18px;
font-size: 0.36rem;
line-height: 0.36rem;
text-align: center;
margin-bottom: 18px;
margin-bottom: 0.36rem;
}
.section.paragraph-content .paragraph .content {
font-size: 16px;
line-height: 20px;
font-size: 0.32rem;
line-height: 0.4rem;
}
.section.cooperate .content {
font-size: 16px;
line-height: 20px;
margin-top: 28px;
margin-bottom: 35px;
font-size: 0.32rem;
line-height: 0.4rem;
margin-top: 0.56rem;
margin-bottom: 0.7rem;
}
.section.article-detail {
margin-top: 0;
margin-bottom: 40px;
margin-bottom: 0.8rem;
}
.section.article-detail .title {
padding: 20px 0;
padding: 0.4rem 0;
text-align: left;
border-bottom: 2px dashed #E5E5E5;
border-bottom: 0.04rem dashed #E5E5E5;
}
.section.article-detail .title h1 {
font-size: 18px;
line-height: 20px;
font-size: 0.36rem;
line-height: 0.4rem;
}
.section.article-detail .content {
padding: 12px 0;
font-size: 16px;
line-height: 20px;
padding: 0.24rem 0;
font-size: 0.32rem;
line-height: 0.4rem;
}
.section.article-detail .close-page {
display: none;
}
.section.story-cont {
margin-top: 24px;
margin-top: 0.48rem;
}
.section.story-cont .title {
font-size: 18px;
font-size: 0.36rem;
text-align: center;
margin-bottom: 12px;
margin-bottom: 0.24rem;
line-height: 0.36rem;
}
.section.story-cont .image-con {
border-radius: 0;
}
.section.story-cont .image-con .swiper-slide {
width: 100%;
height: 2.98rem;
border-radius: 0;
}
.section.story-cont .image-con .text-con {
padding: 9px 10px;
padding: 0.18rem 0.2rem;
}
.section.story-cont .image-con .text-con p {
height: 16px;
font-size: 16px;
line-height: 16px;
height: 0.32rem;
font-size: 0.32rem;
line-height: 0.32rem;
}
.section.story-cont .story-item:nth-child(2n) .desc {
border-radius: 0;
}
.section.story-cont .story-item .img {
width: 100%;
height: 188px;
height: 3.76rem;
border-radius: 0;
float: unset;
}
@ -354,37 +363,37 @@
border-radius: 0;
float: unset;
margin-top: 0;
padding: 30px 20px;
padding: 0.6rem 0.4rem;
}
.section.story-cont .story-item .text {
display: inline-block;
font-size: 16px;
line-height: 20px;
margin-bottom: 20px;
font-size: 0.32rem;
line-height: 0.4rem;
margin-bottom: 0.4rem;
}
.section.story-cont .story-item .text:nth-child(2) {
color: #666666;
margin-left: 10px;
margin-left: 0.2rem;
}
.section.story-cont .story-item .content {
font-size: 14px;
line-height: 20px;
font-size: 0.28rem;
line-height: 0.4rem;
}
.section.story-cont.last {
margin-bottom: 24px;
margin-bottom: 0.48rem;
}
.s-section .s-title {
font-size: 18px;
line-height: 16px;
font-size: 0.36rem;
line-height: 0.32rem;
text-align: center;
}
.s-section.s1-first {
margin-top: 30px;
margin-bottom: 30px;
margin-top: 0.6rem;
margin-bottom: 0.6rem;
}
.section.business-nav {
width: 100%;
margin-top: 10px;
margin-top: 0.2rem;
}
.section.business-nav .nav li {
width: auto;
@ -394,55 +403,56 @@
display: block;
width: 100%;
color: #666666;
font-size: 14px;
line-height: 30px;
padding: 2px 12px;
font-size: 0.28rem;
line-height: 0.6rem;
padding: 0.04rem 0.24rem;
box-sizing: border-box;
}
.section.business-cont .title {
font-size: 0;
font-size: 0rem;
}
.section.business-cont .title h2 {
font-size: 18px;
line-height: 18px;
font-size: 0.36rem;
line-height: 0.36rem;
}
.section.business-cont .title::after {
width: 29px;
height: 2px;
margin-top: 10px;
width: 0.58rem;
height: 0.04rem;
margin-top: 0.2rem;
}
.business-cont.s1 {
margin-top: 25px;
margin-top: 0.5rem;
}
.business-cont.s2 {
margin-top: 30px;
margin-top: 0.6rem;
}
.business-cont.s2 .mid-box {
margin: 15px 0 5px 0;
margin: 0.3rem 0 0.1rem 0;
}
.business-cont.s2 .mid-box .ad-text {
font-size: 14px;
font-size: 0.28rem;
line-height: 0.32rem;
font-weight: normal;
text-align: center;
}
.business-cont.s3 {
margin-top: 50px;
margin-top: 1rem;
padding-bottom: 0;
padding-top: 0;
background-color: unset;
}
.business-cont.s3 .mid-box {
margin-top: 20px;
margin-bottom: 20px;
margin-top: 0.4rem;
margin-bottom: 0.4rem;
}
.business-cont.s3 .mid-box .num {
font-size: 14px;
line-height: 18px;
font-size: 0.28rem;
line-height: 0.36rem;
}
.business-cont.s3 .mid-box .desc {
font-size: 14px;
line-height: 18px;
margin-top: 10px;
font-size: 0.28rem;
line-height: 0.36rem;
margin-top: 0.2rem;
}
.business-cont.s3 .mid-box .cont {
width: 100%;
@ -451,10 +461,10 @@
width: 33.33333%;
}
.business-cont.s3 .mid-box li::after {
height: 26px;
height: 0.52rem;
}
.business-cont.s4 {
padding: 30px 0;
padding: 0.6rem 0;
}
.s-content.g1 {
text-align: center;
@ -468,22 +478,26 @@
margin-right: 2%;
}
.s-content.g1 .icon {
width: 57px;
height: 41px;
width: 1.14rem;
height: 0.82rem;
}
.s-content.g1 h4 {
font-size: 16px;
margin: 15px 0;
height: 0.4rem;
font-size: 0.32rem;
margin: 0.3rem 0;
line-height: 0.4rem;
}
.s-content.g1 p {
font-size: 14px;
height: 0.32rem;
font-size: 0.28rem;
line-height: 0.32rem;
}
.s-content.g1 .item {
width: 100%;
height: auto;
padding: 20px 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 0.4rem 0;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
border-radius: 0.2rem;
}
.s-content.g2 li {
float: initial;
@ -492,22 +506,26 @@
.s-content.g2 .item {
width: 100%;
height: auto;
border: 1px solid #DDDDDD;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
border: 0.02rem solid #DDDDDD;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
}
.s-content.g2 .icon-cont {
height: auto;
}
.s-content.g2 .desc {
padding: 15px;
padding: 0.3rem;
height: auto;
}
.s-content.g2 .desc h4 {
font-size: 16px;
margin-bottom: 10px;
height: 0.4rem;
font-size: 0.32rem;
line-height: 0.4rem;
margin-bottom: 0.2rem;
}
.s-content.g2 .desc p {
font-size: 14px;
height: 0.64rem;
font-size: 0.28rem;
line-height: 0.32rem;
}
.s-content.g3 ul,
.s-content.g4 ul {
@ -515,21 +533,24 @@
}
.s-content.g3 li,
.s-content.g4 li {
width: 46%;
margin-left: 2%;
margin-right: 2%;
margin-top: 12px;
width: 3.25rem;
margin-right: 0.3rem;
margin-top: 0.24rem;
}
.s-content.g3 li:nth-child(3n),
.s-content.g4 li:nth-child(3n) {
margin-right: 2%;
margin-right: 0.3rem;
}
.s-content.g3 li:nth-child(2n),
.s-content.g4 li:nth-child(2n) {
margin-right: 0;
}
.s-content.g3 .item,
.s-content.g4 .item {
width: 100%;
height: auto;
border: 1px solid #DDDDDD;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
border: 0.02rem solid #DDDDDD;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
}
.s-content.g3 .desc,
.s-content.g4 .desc {
@ -537,52 +558,53 @@
}
.s-content.g3 .desc .i-title,
.s-content.g4 .desc .i-title {
height: 20px;
font-size: 16px;
margin-bottom: 5px;
line-height: 20px;
height: 0.4rem;
font-size: 0.32rem;
margin-bottom: 0.1rem;
line-height: 0.4rem;
}
.s-content.g3 .desc .i-desc,
.s-content.g4 .desc .i-desc {
height: 32px;
font-size: 14px;
line-height: 16px;
height: 0.64rem;
font-size: 0.28rem;
line-height: 0.32rem;
color: #666666;
}
.s-content.g3 .icon-cont,
.s-content.g4 .icon-cont {
height: auto;
width: 100%;
height: 1.67rem;
}
.s-content.g3 .desc,
.s-content.g4 .desc {
height: auto;
padding: 10px;
padding: 0.2rem;
}
.s-content.g3 .btn,
.s-content.g4 .btn {
height: auto;
padding: 10px;
padding: 0.2rem;
}
.s-content.g3 .btn .b-text,
.s-content.g4 .btn .b-text {
width: 130px;
height: 26px;
line-height: 26px;
font-size: 14px;
width: 2.6rem;
height: 0.52rem;
line-height: 0.52rem;
font-size: 0.28rem;
}
.s-content.g5 {
margin-top: 15px;
margin-top: 0.3rem;
}
.s-content.g5 .item {
width: 100px;
width: 2rem;
}
.s-content.g5 .item img {
width: 26px;
height: 26px;
width: 0.52rem;
height: 0.52rem;
}
.s-content.g5 .item p {
font-size: 16px;
line-height: 20px;
margin-top: 15px;
font-size: 0.32rem;
line-height: 0.4rem;
margin-top: 0.3rem;
}
}

350
css/responsive.less
View File

@ -1,9 +1,9 @@
// main max width
@mw: 92%;
@xt: 18px;
@mt: 16px;
@st: 14px;
@mst: 12px;
@mw: 6.8rem;
@xt: 0.36rem;
@mt: 0.32rem;
@st: 0.28rem;
@mst: 0.24rem;
@keyframes mobileHeaderFadeIn {
0% {
@ -30,17 +30,9 @@
}
@media screen and (max-width: 768px) {
.pc {
display: none;
}
.mobile {
display: initial;
}
.main-wrap {
width: @mw;
max-width: 500px;
max-width: 10rem;
}
.header.style1 {
@ -84,12 +76,12 @@
font-size: 0;
img {
max-height: 26px;
max-height: 0.52rem;
}
}
.main {
height: 45px;
height: 0.9rem;
}
.menu {
@ -109,7 +101,7 @@
display: none;
position: fixed;
left: 0;
top: 45px;
top: 0.9rem;
right: 0;
}
@ -126,25 +118,26 @@
}
.menu-btn {
display: block;
z-index: 10;
position: relative;
font-size: 0;
.btn-img {
max-width: 26px;
max-width: 0.52rem;
}
}
.item {
margin-left: 0;
padding: 0 18px;
padding: 0 0.36rem;
.link {
display: block;
box-sizing: border-box;
border-bottom: 1px solid #737373;
padding: 13px 0;
font-size: 16px;
border-bottom: 0.02rem solid #737373;
padding: 0.26rem 0;
font-size: 0.32rem;
}
}
}
@ -152,41 +145,46 @@
.footer {
.logo-bottom {
max-height: 26px;
max-height: 0.52rem;
}
.main {
.row {
font-size: @mt;
margin-top: 15px;
margin-top: 0.3rem;
line-height: 0.32rem;
}
.tel {
width: 208px;
width: 4.16rem;
font-size: @mt;
padding: 10px;
padding: 0.2rem;
}
}
}
.section.main-banner {
.item {
height: 255px;
height: 5.1rem;
}
.swiper-pagination {
display: none;
}
}
.banner-text {
padding-top: 25px;
padding-top: 0.5rem;
p:nth-child(1) {
font-size: @xt;
line-height: 18px;
margin-bottom: 15px;
line-height: 0.36rem;
margin-bottom: 0.3rem;
}
p:nth-child(2) {
font-size: @st;
line-height: 16px;
line-height: 0.32rem;
}
}
@ -194,71 +192,72 @@
.section-title.style-1 {
.title {
font-size: @xt;
line-height: 18px;
line-height: 0.36rem;
}
.title::before,
.title::after {
width: 29px;
height: 2px;
width: 0.58rem;
height: 0.04rem;
}
}
}
.section.idx-about {
margin-top: 20px;
margin-top: 0.4rem;
.ia-container {
margin-top: 20px;
margin-top: 0.4rem;
font-size: @mt;
line-height: 20px;
line-height: 0.4rem;
}
.ia-image {
margin-top: 20px;
margin-top: 0.4rem;
}
}
.section.idx-culture {
margin-top: 35px;
margin-bottom: 35px;
margin-top: 0.7rem;
margin-bottom: 0.7rem;
.culture-item:first-child {
margin-top: 20px;
margin-top: 0.4rem;
}
.culture-item {
width: 100%;
height: auto;
margin-top: 10px;
padding: 20px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
margin-top: 0.2rem;
padding: 0.4rem;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
}
.title {
margin-bottom: 14px;
margin-bottom: 0.28rem;
.text {
font-size: @mt;
}
.cover {
width: 15px;
height: 15px;
margin-right: 8px;
width: 0.3rem;
height: 0.3rem;
margin-right: 0.16rem;
}
}
.desc {
font-size: @st;
line-height: 18px;
line-height: 0.36rem;
}
}
.section.sec-banner {
height: 174px;
height: 3.48rem;
.banner-text {
padding-top: 45px;
padding-top: 0.9rem;
}
}
@ -267,21 +266,21 @@
}
.section.about-textarea {
padding-top: 20px;
padding-bottom: 35px;
padding-top: 0.4rem;
padding-bottom: 0.7rem;
.at-img {
max-height: 30px;
max-height: 0.6rem;
}
.content {
margin-top: 20px;
margin-top: 0.4rem;
font-size: @mt;
line-height: 20px;
line-height: 0.4rem;
}
.img-group {
margin-top: 30px;
margin-top: 0.6rem;
.item {
width: 32%;
@ -295,65 +294,65 @@
margin-top: 0;
.mcont {
margin-top: 25px;
margin-top: 0.5rem;
}
}
.section.addrcont {
margin-top: 20px;
margin-bottom: 50px;
margin-top: 0.4rem;
margin-bottom: 1rem;
.aacont {
margin-top: 25px;
margin-top: 0.5rem;
li::before {
width: 19px;
height: 19px;
margin-top: 2px;
width: 0.38rem;
height: 0.38rem;
margin-top: 0.04rem;
}
li:nth-child(2) {
margin-top: 15px;
margin-top: 0.3rem;
}
li {
width: 100%;
float: unset;
margin-top: 15px;
margin-top: 0.3rem;
align-items: flex-start;
}
a {
font-size: @mt;
line-height: unset;
margin-left: 7px;
margin-left: 0.14rem;
}
}
}
.section.contact-map {
margin-top: 30px;
height: 250px;
margin-top: 0.6rem;
height: 5rem;
.cm-desc {
width: 339px;
border: 1px solid #DDDDDD;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
width: 6.78rem;
border: 0.02rem solid #DDDDDD;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
.logo {
width: 127px;
height: 127px;
width: 2.54rem;
height: 2.54rem;
}
.desc {
width: auto;
padding: 14px;
padding: 0.28rem;
}
}
.cm-map {
top: 30px;
height: 220px;
top: 0.6rem;
height: 4.4rem;
background-size: cover;
}
@ -361,7 +360,7 @@
h1 {
font-size: @xt;
margin-bottom: 0;
line-height: 18px;
line-height: 0.36rem;
}
p {
@ -371,36 +370,36 @@
.items {
li {
margin-top: 5px;
margin-top: 0.1rem;
}
img {
width: 13px;
height: 13px;
width: 0.26rem;
height: 0.26rem;
}
p {
font-size: @st;
line-height: 14px;
line-height: 0.28rem;
}
}
}
.section.paragraph-content {
margin-top: 35px;
margin-bottom: 37px;
margin-top: 0.7rem;
margin-bottom: 0.74rem;
.paragraph {
.title {
font-size: @xt;
line-height: 18px;
line-height: 0.36rem;
text-align: center;
margin-bottom: 18px;
margin-bottom: 0.36rem;
}
.content {
font-size: @mt;
line-height: 20px;
line-height: 0.4rem;
}
}
}
@ -408,53 +407,63 @@
.section.cooperate {
.content {
font-size: @mt;
line-height: 20px;
margin-top: 28px;
margin-bottom: 35px;
line-height: 0.4rem;
margin-top: 0.56rem;
margin-bottom: 0.7rem;
}
}
.section.article-detail {
margin-top: 0;
margin-bottom: 40px;
margin-bottom: 0.8rem;
.title {
padding: 20px 0;
padding: 0.4rem 0;
text-align: left;
border-bottom: 2px dashed #E5E5E5;
border-bottom: 0.04rem dashed #E5E5E5;
h1 {
font-size: @xt;
line-height: 20px;
line-height: 0.4rem;
}
}
.content {
padding: 12px 0;
padding: 0.24rem 0;
font-size: @mt;
line-height: 20px;
line-height: 0.4rem;
}
.close-page {
display: none;
}
}
.section.story-cont {
margin-top: 24px;
margin-top: 0.48rem;
.title {
font-size: @xt;
text-align: center;
margin-bottom: 12px;
margin-bottom: 0.24rem;
line-height: 0.36rem;
}
.image-con {
border-radius: 0;
.swiper-slide {
width: 100%;
height: 2.98rem;
border-radius: 0;
}
.text-con {
padding: 9px 10px;
padding: 0.18rem 0.2rem;
p {
height: 16px;
height: 0.32rem;
font-size: @mt;
line-height: 16px;
line-height: 0.32rem;
}
}
}
@ -468,7 +477,7 @@
.story-item {
.img {
width: 100%;
height: 188px;
height: 3.76rem;
border-radius: 0;
float: unset;
}
@ -479,48 +488,48 @@
border-radius: 0;
float: unset;
margin-top: 0;
padding: 30px 20px;
padding: 0.6rem 0.4rem;
}
.text {
display: inline-block;
font-size: @mt;
line-height: 20px;
margin-bottom: 20px;
line-height: 0.4rem;
margin-bottom: 0.4rem;
}
.text:nth-child(2) {
color: #666666;
margin-left: 10px;
margin-left: 0.2rem;
}
.content {
font-size: @st;
line-height: 20px;
line-height: 0.4rem;
}
}
}
.section.story-cont.last {
margin-bottom: 24px;
margin-bottom: 0.48rem;
}
.s-section {
.s-title {
font-size: @xt;
line-height: 16px;
line-height: 0.32rem;
text-align: center;
}
}
.s-section.s1-first {
margin-top: 30px;
margin-bottom: 30px;
margin-top: 0.6rem;
margin-bottom: 0.6rem;
}
.section.business-nav {
width: 100%;
margin-top: 10px;
margin-top: 0.2rem;
.nav {
li {
@ -533,8 +542,8 @@
width: 100%;
color: #666666;
font-size: @st;
line-height: 30px;
padding: 2px 12px;
line-height: 0.6rem;
padding: 0.04rem 0.24rem;
box-sizing: border-box;
}
}
@ -542,33 +551,34 @@
.section.business-cont {
.title {
font-size: 0;
font-size: 0rem;
h2 {
font-size: @xt;
line-height: 18px;
line-height: 0.36rem;
}
}
.title::after {
width: 29px;
height: 2px;
margin-top: 10px;
width: 0.58rem;
height: 0.04rem;
margin-top: 0.2rem;
}
}
.business-cont.s1 {
margin-top: 25px;
margin-top: 0.5rem;
}
.business-cont.s2 {
margin-top: 30px;
margin-top: 0.6rem;
.mid-box {
margin: 15px 0 5px 0;
margin: 0.3rem 0 0.1rem 0;
.ad-text {
font-size: @st;
line-height: 0.32rem;
font-weight: normal;
text-align: center;
}
@ -576,24 +586,24 @@
}
.business-cont.s3 {
margin-top: 50px;
margin-top: 1rem;
padding-bottom: 0;
padding-top: 0;
background-color: unset;
.mid-box {
margin-top: 20px;
margin-bottom: 20px;
margin-top: 0.4rem;
margin-bottom: 0.4rem;
.num {
font-size: @st;
line-height: 18px;
line-height: 0.36rem;
}
.desc {
font-size: @st;
line-height: 18px;
margin-top: 10px;
line-height: 0.36rem;
margin-top: 0.2rem;
}
.cont {
@ -605,13 +615,13 @@
}
li::after {
height: 26px;
height: 0.52rem;
}
}
}
.business-cont.s4 {
padding: 30px 0;
padding: 0.6rem 0;
}
.s-content.g1 {
@ -628,25 +638,29 @@
}
.icon {
width: 57px;
height: 41px;
width: 1.14rem;
height: 0.82rem;
}
h4 {
height: 0.4rem;
font-size: @mt;
margin: 15px 0;
margin: 0.3rem 0;
line-height: 0.4rem;
}
p {
height: 0.32rem;
font-size: @st;
line-height: 0.32rem;
}
.item {
width: 100%;
height: auto;
padding: 20px 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 0.4rem 0;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
border-radius: 0.2rem;
}
}
@ -659,8 +673,8 @@
.item {
width: 100%;
height: auto;
border: 1px solid #DDDDDD;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
border: 0.02rem solid #DDDDDD;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
}
.icon-cont {
@ -668,16 +682,20 @@
}
.desc {
padding: 15px;
padding: 0.3rem;
height: auto;
h4 {
height: 0.4rem;
font-size: @mt;
margin-bottom: 10px;
line-height: 0.4rem;
margin-bottom: 0.2rem;
}
p {
height: 0.64rem;
font-size: @st;
line-height: 0.32rem;
}
}
}
@ -689,81 +707,85 @@
}
li {
width: 46%;
margin-left: 2%;
margin-right: 2%;
margin-top: 12px;
width: 3.25rem;
margin-right: 0.3rem;
margin-top: 0.24rem;
}
li:nth-child(3n) {
margin-right: 2%;
margin-right: 0.3rem;
}
li:nth-child(2n) {
margin-right: 0;
}
.item {
width: 100%;
height: auto;
border: 1px solid #DDDDDD;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
border: 0.02rem solid #DDDDDD;
box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
}
.desc {
text-align: left;
.i-title {
height: 20px;
height: 0.4rem;
font-size: @mt;
margin-bottom: 5px;
line-height: 20px;
margin-bottom: 0.1rem;
line-height: 0.4rem;
}
.i-desc {
height: 32px;
height: 0.64rem;
font-size: @st;
line-height: 16px;
line-height: 0.32rem;
color: #666666;
}
}
.icon-cont {
height: auto;
width: 100%;
height: 1.67rem;
}
.desc {
height: auto;
padding: 10px;
padding: 0.2rem;
}
// g4
.btn {
height: auto;
padding: 10px;
padding: 0.2rem;
}
.btn {
.b-text {
width: 130px;
height: 26px;
line-height: 26px;
width: 2.6rem;
height: 0.52rem;
line-height: 0.52rem;
font-size: @st;
}
}
}
.s-content.g5 {
margin-top: 15px;
margin-top: 0.3rem;
.item {
width: 100px;
width: 2rem;
img {
width: 26px;
height: 26px;
width: 0.52rem;
height: 0.52rem;
}
p {
font-size: @mt;
line-height: 20px;
margin-top: 15px;
line-height: 0.4rem;
margin-top: 0.3rem;
}
}
}

771
css/responsive.less.bak Normal file
View File

@ -0,0 +1,771 @@
// 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;
}
}
}
}

484
css/style.css
View File

File diff suppressed because it is too large Load Diff

497
css/style.less
View File

File diff suppressed because it is too large Load Diff

1158
css/style.less.bak Normal file
View File

File diff suppressed because it is too large Load Diff

16
index.html
View File

@ -59,13 +59,15 @@
<div class="swiper-pagination pc"></div>
</div>
<script>
var swiper = new Swiper('.main-banner', {
pagination: '.swiper-pagination',
paginationClickable: true,
centeredSlides: true,
autoplay: 5000,
autoplayDisableOnInteraction: false,
});
window.onload = function () {
new Swiper('.main-banner', {
pagination: '.swiper-pagination',
paginationClickable: true,
centeredSlides: true,
autoplay: 5000,
autoplayDisableOnInteraction: false,
});
}
</script>
<!-- 简介 -->
<div class="section main-wrap idx-about">

29
js/main.js
View File

@ -33,30 +33,25 @@ function hideMenu() {
}
$(function () {
function setRem() {
var whdef = 100 / 1920;// 表示1920的设计图,使用100PX的默认值 1rem = 100px
var wH = window.innerHeight;// 当前窗口的高度
var wW = window.innerWidth;// 当前窗口的宽度
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
$(window).resize(function () {
var whdef = 100 / 1920;// 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight;// 当前窗口的高度
var wW = window.innerWidth;// 当前窗口的宽度
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
});
function getRem() {
let windowWidth = window.innerWidth
return windowWidth * (100 / (windowWidth > 768 ? 1920 : 750));
}
setRem();
function rszcal() {
$('html').css('font-size', getRem() + "px");
}
$(window).resize(rszcal);
rszcal();
let currentRem = getRem();
$('.header .menu-group').load('../common/header.html');
$('.footer').load('../common/footer.html');
$(window).scroll(function () {
let t = $(document).scrollTop(), flag;
if ($(window).width() > 768) {
flag = t > 400;
flag = t > 4 * currentRem;
} else {
flag = t > 60;
flag = t > 0.6 * currentRem;
}
if (flag) {
header.removeClass('style1').addClass('style2');
@ -74,7 +69,7 @@ $(function () {
let id = $(this).attr('href');
let ot = $(id)[0].offsetTop;
window.scrollTo({
top: ot - 90,
top: ot - (0.9 * currentRem),
behavior: "smooth",
});
});

14
story.html
View File

@ -56,12 +56,14 @@
</div>
</div>
<script>
var swiper = new Swiper('.image-con', {
paginationClickable: true,
centeredSlides: true,
autoplay: 5000,
autoplayDisableOnInteraction: false,
});
window.onload = function () {
new Swiper('.image-con', {
paginationClickable: true,
centeredSlides: true,
autoplay: 5000,
autoplayDisableOnInteraction: false,
});
}
</script>
</div>
<div class="section main-wrap story-cont last">