diff --git a/about.html b/about.html index 99829c4..1c35d76 100644 --- a/about.html +++ b/about.html @@ -15,6 +15,7 @@ + @@ -29,7 +30,7 @@
- +

@@ -51,7 +52,7 @@

-

企业文化

+

业务覆盖

diff --git a/business.html b/business.html index ac43f66..f38e378 100644 --- a/business.html +++ b/business.html @@ -15,6 +15,7 @@ + diff --git a/common/header.html b/common/header.html index 63b3e8f..91e6e28 100644 --- a/common/header.html +++ b/common/header.html @@ -5,7 +5,7 @@
\ No newline at end of file diff --git a/contact.html b/contact.html index be1663a..80331b1 100644 --- a/contact.html +++ b/contact.html @@ -15,6 +15,7 @@ + diff --git a/css/common/common.less b/css/common/common.less deleted file mode 100644 index dc343ac..0000000 --- a/css/common/common.less +++ /dev/null @@ -1,162 +0,0 @@ -@import 'var.less'; - -// .generate-mt(@n, @i: 0) when (@i =< @n) { -// .mt-@{i} { -// margin-top: 1px * @i; -// } - -// .generate-mt(@n, (@i + 5)); -// } - -// .generate-mt(100); - -// .generate-mb(@n, @i: 0) when (@i =< @n) { -// .mb-@{i} { -// margin-bottom: 1px * @i; -// } - -// .generate-mb(@n, (@i + 5)); -// } - -// .generate-mb(100); - -// .generate-pt(@n, @i: 0) when (@i =< @n) { -// .pt-@{i} { -// padding-top: 1px * @i; -// } - -// .generate-pt(@n, (@i + 5)); -// } - -// .generate-pt(100); - -// .generate-pb(@n, @i: 0) when (@i =< @n) { -// .pb-@{i} { -// padding-bottom: 1px * @i; -// } - -// .generate-pb(@n, (@i + 5)); -// } - -// .generate-pb(100); - -.limit-line { - display: -webkit-box; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.clamp-1 { - -webkit-line-clamp: 1; -} - -.clamp-2 { - -webkit-line-clamp: 2; -} - -.clamp-3 { - -webkit-line-clamp: 3; -} - -.clearfix { - zoom: 1; -} - -.clearfix::after { - display: block; - content: ''; - clear: both; -} - -.full-wrap { - width: 100%; -} - -.main-wrap { - width: @mw; - margin: 0 auto; -} - -.mg-center { - margin-top: 0; - margin-bottom: 0; - margin-left: auto; - margin-right: auto; -} - -.header { - z-index: 20; - position: fixed; - top: 0; - left: 0; - right: 0; - width: 100%; - background-image: url('/images/header-bg.png'); - - .main { - height: 90px; - display: flex; - align-items: center; - justify-content: space-between; - } - - .logo { - img { - max-height: 50px; - } - } - - .menu { - .group { - display: flex; - } - - .item { - margin-left: 50px; - } - - .link { - font-size: 18px; - color: #FFFFFF; - } - - .link.active, - .link:hover { - font-weight: bold; - } - } -} - -.footer { - width: 100%; - background-color: #343434; - - .main { - padding: 30px 0; - - .row:first-child { - margin-top: 0; - } - - .row { - font-size: 18px; - color: #FFFFFF; - text-align: center; - line-height: 20px; - margin-top: 20px; - } - - .tel { - display: inline-block; - width: 355px; - border: 2px solid #DDDDDD; - border-radius: 30px; - padding: 20px; - font-size: 24px; - } - - .icp { - color: #999999; - } - } -} \ No newline at end of file diff --git a/css/common/var.less b/css/common/var.less deleted file mode 100644 index fcad525..0000000 --- a/css/common/var.less +++ /dev/null @@ -1,2 +0,0 @@ -// main max width -@mw: 1366px; diff --git a/css/responsive.css b/css/responsive.css new file mode 100644 index 0000000..cba938e --- /dev/null +++ b/css/responsive.css @@ -0,0 +1,330 @@ +@media screen and (max-width: 768px) { + .pc { + display: none; + } + .mobile { + display: initial; + } + .main-wrap { + width: 92%; + } + .header .logo { + font-size: 0; + } + .header .logo img { + max-height: 26px; + } + .header .main { + height: 45px; + } + .header .menu .menu-group { + z-index: 20; + display: none; + position: fixed; + left: 0; + top: 45px; + right: 0; + animation-duration: 0.2s; + } + .header .menu .menu-mask { + z-index: 10; + display: none; + position: fixed; + top: 45px; + left: 0; + right: 0; + bottom: 0; + animation-duration: 0.35s; + background-image: url('/images/transparent-bg.png'); + } + .header .menu .menu-btn { + font-size: 0; + } + .header .menu .menu-btn .btn-img { + max-width: 26px; + } + .header .menu .item { + margin-left: 0; + background-color: #C7001C; + padding: 0 18px; + } + .header .menu .item .link { + display: block; + box-sizing: border-box; + border-bottom: 2px solid #D02121; + padding: 15px 0; + } + .header .menu .item .link.active, + .header .menu .item .link:hover { + font-weight: normal; + } + .header .menu .item:first-child { + padding-top: 25px; + } + .header .menu .item:last-child { + padding-bottom: 40px; + } + .footer .logo-bottom { + max-height: 26px; + } + .footer .main .row { + font-size: 10px; + margin-top: 10px; + line-height: 13px; + } + .footer .main .tel { + width: 178px; + font-size: 12px; + padding: 10px; + } + .section.main-banner .item { + height: 255px; + } + .banner-text { + padding-top: 25px; + } + .banner-text p:nth-child(1) { + font-size: 15px; + line-height: 15px; + margin-bottom: 15px; + } + .banner-text p:nth-child(2) { + font-size: 12px; + line-height: 12px; + } + .section .section-title.style-1 .title { + font-size: 15px; + line-height: 18px; + } + .section .section-title.style-1 .title::before, + .section .section-title.style-1 .title::after { + width: 29px; + height: 2px; + } + .section.idx-about { + margin-top: 20px; + } + .section.idx-about .ia-container { + margin-top: 20px; + font-size: 12px; + line-height: 18px; + } + .section.idx-about .ia-image { + margin-top: 20px; + } + .section.idx-calture { + margin-top: 35px; + margin-bottom: 35px; + } + .section.idx-calture .caltrue-item:first-child { + margin-top: 20px; + } + .section.idx-calture .caltrue-item { + height: auto; + margin-top: 10px; + padding: 20px; + } + .section.idx-calture .title { + margin-bottom: 14px; + } + .section.idx-calture .title .text { + font-size: 15px; + } + .section.idx-calture .title .cover { + width: 15px; + height: 15px; + margin-right: 8px; + } + .section.idx-calture .desc { + font-size: 12px; + line-height: 18px; + } + .section.sec-banner { + height: 174px; + } + .section.sec-banner .banner-text { + padding-top: 45px; + } + .full-wrap.about { + background-color: unset; + } + .section.about-textarea { + padding-top: 20px; + padding-bottom: 35px; + } + .section.about-textarea .at-img { + max-height: 30px; + } + .section.about-textarea .content { + margin-top: 20px; + font-size: 12px; + line-height: 18px; + } + .section.about-textarea .img-group { + margin-top: 30px; + } + .section.about-textarea .img-group .item { + width: 110px; + height: 70px; + } + .section.mapcont { + margin-top: 0; + } + .section.mapcont .mcont { + margin-top: 25px; + } + .section.addrcont { + margin-top: 20px; + margin-bottom: 50px; + } + .section.addrcont .aacont { + margin-top: 25px; + } + .section.addrcont .aacont li::before { + width: 19px; + height: 19px; + margin-top: 6px; + } + .section.addrcont .aacont li:nth-child(2) { + margin-top: 15px; + } + .section.addrcont .aacont li { + width: 100%; + float: unset; + margin-top: 15px; + align-items: flex-start; + } + .section.addrcont .aacont a { + font-size: 12px; + line-height: 30px; + margin-left: 7px; + } + .section.contact-map { + margin-top: 30px; + height: 250px; + } + .section.contact-map .cm-desc { + width: 339px; + border: 1px solid #DDDDDD; + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); + } + .section.contact-map .cm-desc .logo { + width: 127px; + height: 127px; + } + .section.contact-map .cm-desc .desc { + width: auto; + padding: 14px; + } + .section.contact-map .cm-map { + top: 30px; + height: 220px; + } + .section.contact-map .title h1 { + font-size: 14px; + margin-bottom: 0; + line-height: 14px; + } + .section.contact-map .title p { + font-size: 10px; + } + .section.contact-map .items li { + margin-top: 5px; + } + .section.contact-map .items img { + width: 13px; + height: 13px; + } + .section.contact-map .items p { + font-size: 12px; + line-height: 13px; + } + .section.paragraph-content { + margin-top: 35px; + margin-bottom: 37px; + } + .section.paragraph-content .paragraph .title { + font-size: 14px; + line-height: 18px; + text-align: center; + margin-bottom: 18px; + } + .section.paragraph-content .paragraph .content { + font-size: 12px; + line-height: 20px; + } + .section.cooperate .content { + font-size: 12px; + line-height: 20px; + margin-top: 28px; + margin-bottom: 35px; + } + .section.article-detail { + margin-top: 0; + margin-bottom: 40px; + } + .section.article-detail .title { + padding: 20px 0; + text-align: left; + border-bottom: 2px dashed #E5E5E5; + } + .section.article-detail .title h1 { + font-size: 14px; + line-height: 18px; + } + .section.article-detail .content { + padding: 12px 0; + font-size: 12px; + line-height: 18px; + } + .section.story-cont { + margin-top: 24px; + } + .section.story-cont .title { + font-size: 11px; + text-align: center; + margin-bottom: 12px; + } + .section.story-cont .image-con { + border-radius: 0; + } + .section.story-cont .image-con p { + font-size: 10px; + line-height: 12px; + padding: 9px 15px; + } + .section.story-cont .story-item:nth-child(2n) .desc { + border-radius: 0; + } + .section.story-cont .story-item .img { + width: 100%; + height: 188px; + border-radius: 0; + float: unset; + } + .section.story-cont .story-item .desc { + width: 100%; + height: auto; + border-radius: 0; + float: unset; + margin-top: 0; + padding: 30px 20px; + } + .section.story-cont .story-item .text { + display: inline-block; + font-size: 12px; + line-height: 12px; + margin-bottom: 20px; + } + .section.story-cont .story-item .text:nth-child(2) { + color: #666666; + margin-left: 10px; + } + .section.story-cont .story-item .content { + font-size: 12px; + line-height: 18px; + } + .section.story-cont.last { + margin-bottom: 24px; + } +} diff --git a/css/responsive.less b/css/responsive.less new file mode 100644 index 0000000..6014eb4 --- /dev/null +++ b/css/responsive.less @@ -0,0 +1,439 @@ +// main max width +@mw: 92%; + +@media screen and (max-width: 768px) { + .pc { + display: none; + } + + .mobile { + display: initial; + } + + .main-wrap { + width: @mw; + } + + .header { + .logo { + font-size: 0; + + img { + max-height: 26px; + } + } + + .main { + height: 45px; + } + + .menu { + .menu-group { + z-index: 20; + display: none; + position: fixed; + left: 0; + top: 45px; + right: 0; + animation-duration: 0.2s; + } + + .menu-mask { + z-index: 10; + display: none; + position: fixed; + top: 45px; + left: 0; + right: 0; + bottom: 0; + animation-duration: 0.35s; + background-image: url('/images/transparent-bg.png'); + } + + .menu-btn { + font-size: 0; + + .btn-img { + max-width: 26px; + } + } + + .item { + margin-left: 0; + background-color: #C7001C; + padding: 0 18px; + + .link { + display: block; + box-sizing: border-box; + border-bottom: 2px solid #D02121; + padding: 15px 0; + } + + .link.active, + .link:hover { + font-weight: normal; + } + } + + .item:first-child { + padding-top: 25px; + } + + .item:last-child { + padding-bottom: 40px; + } + } + } + + .footer { + .logo-bottom { + max-height: 26px; + } + + .main { + .row { + font-size: 10px; + margin-top: 10px; + line-height: 13px; + } + + .tel { + width: 178px; + font-size: 12px; + padding: 10px; + } + } + } + + .section.main-banner { + .item { + height: 255px; + } + } + + .banner-text { + padding-top: 25px; + + p:nth-child(1) { + font-size: 15px; + line-height: 15px; + margin-bottom: 15px; + } + + p:nth-child(2) { + font-size: 12px; + line-height: 12px; + } + } + + .section { + .section-title.style-1 { + .title { + font-size: 15px; + line-height: 18px; + } + + .title::before, + .title::after { + width: 29px; + height: 2px; + } + } + } + + .section.idx-about { + margin-top: 20px; + + .ia-container { + margin-top: 20px; + font-size: 12px; + line-height: 18px; + } + + .ia-image { + margin-top: 20px; + } + } + + .section.idx-calture { + margin-top: 35px; + margin-bottom: 35px; + + .caltrue-item:first-child { + margin-top: 20px; + } + + .caltrue-item { + height: auto; + margin-top: 10px; + padding: 20px; + } + + .title { + margin-bottom: 14px; + + .text { + font-size: 15px; + } + + .cover { + width: 15px; + height: 15px; + margin-right: 8px; + } + } + + .desc { + font-size: 12px; + 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: 12px; + line-height: 18px; + } + + .img-group { + margin-top: 30px; + + .item { + width: 110px; + height: 70px; + } + } + + } + + .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: 6px; + } + + li:nth-child(2) { + margin-top: 15px; + } + + li { + width: 100%; + float: unset; + margin-top: 15px; + align-items: flex-start; + } + + a { + font-size: 12px; + line-height: 30px; + margin-left: 7px; + } + } + } + + .section.contact-map { + margin-top: 30px; + height: 250px; + + .cm-desc { + width: 339px; + border: 1px solid #DDDDDD; + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); + + .logo { + width: 127px; + height: 127px; + } + + .desc { + width: auto; + padding: 14px; + } + } + + .cm-map { + top: 30px; + height: 220px; + } + + .title { + h1 { + font-size: 14px; + margin-bottom: 0; + line-height: 14px; + } + + p { + font-size: 10px; + } + } + + .items { + li { + margin-top: 5px; + } + + img { + width: 13px; + height: 13px; + } + + p { + font-size: 12px; + line-height: 13px; + } + } + } + + .section.paragraph-content { + margin-top: 35px; + margin-bottom: 37px; + + .paragraph { + .title { + font-size: 14px; + line-height: 18px; + text-align: center; + margin-bottom: 18px; + } + + .content { + font-size: 12px; + line-height: 20px; + } + } + } + + .section.cooperate { + .content { + font-size: 12px; + 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: 14px; + line-height: 18px; + } + } + + .content { + padding: 12px 0; + font-size: 12px; + line-height: 18px; + } + } + + .section.story-cont { + margin-top: 24px; + + .title { + font-size: 11px; + text-align: center; + margin-bottom: 12px; + } + + .image-con { + border-radius: 0; + + p { + font-size: 10px; + line-height: 12px; + padding: 9px 15px; + } + } + + .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: 12px; + line-height: 12px; + margin-bottom: 20px; + } + + .text:nth-child(2) { + color: #666666; + margin-left: 10px; + } + + .content { + font-size: 12px; + line-height: 18px; + } + } + } + + .section.story-cont.last { + margin-bottom: 24px; + } + +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 5781483..082a149 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,9 @@ +.mobile { + display: none; +} +.pc { + display: initial; +} .limit-line { display: -webkit-box; -webkit-box-orient: vertical; @@ -40,7 +46,7 @@ left: 0; right: 0; width: 100%; - background-image: url('/images/header-bg.png'); + background-image: url('/images/transparent-bg.png'); } .header .main { height: 90px; @@ -51,7 +57,7 @@ .header .logo img { max-height: 50px; } -.header .menu .group { +.header .menu .menu-group { display: flex; } .header .menu .item { @@ -451,7 +457,7 @@ right: 0; bottom: 0; width: 100%; - background-image: url('/images/header-bg.png'); + background-image: url('/images/transparent-bg.png'); font-size: 24px; font-weight: bold; color: #FFFFFF; diff --git a/css/style.less b/css/style.less index 601c746..ae8e8f3 100644 --- a/css/style.less +++ b/css/style.less @@ -1,5 +1,134 @@ -@import 'common/var.less'; -@import 'common/common.less'; +// main max width +@mw: 1366px; + +.mobile { + display: none; +} + +.pc { + display: initial; +} + +.limit-line { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.clamp-1 { + -webkit-line-clamp: 1; +} + +.clamp-2 { + -webkit-line-clamp: 2; +} + +.clamp-3 { + -webkit-line-clamp: 3; +} + +.clearfix { + zoom: 1; +} + +.clearfix::after { + display: block; + content: ''; + clear: both; +} + +.full-wrap { + width: 100%; +} + +.main-wrap { + width: @mw; + margin: 0 auto; +} + +.mg-center { + margin-top: 0; + margin-bottom: 0; + margin-left: auto; + margin-right: auto; +} + +.header { + z-index: 20; + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; + background-image: url('/images/transparent-bg.png'); + + .main { + height: 90px; + display: flex; + align-items: center; + justify-content: space-between; + } + + .logo { + img { + max-height: 50px; + } + } + + .menu { + .menu-group { + display: flex; + } + + .item { + margin-left: 50px; + } + + .link { + font-size: 18px; + color: #FFFFFF; + } + + .link.active, + .link:hover { + font-weight: bold; + } + } +} + +.footer { + width: 100%; + background-color: #343434; + + .main { + padding: 30px 0; + + .row:first-child { + margin-top: 0; + } + + .row { + font-size: 18px; + color: #FFFFFF; + text-align: center; + line-height: 20px; + margin-top: 20px; + } + + .tel { + display: inline-block; + width: 355px; + border: 2px solid #DDDDDD; + border-radius: 30px; + padding: 20px; + font-size: 24px; + } + + .icp { + color: #999999; + } + } +} .banner-text { color: #FFFFFF; @@ -456,7 +585,7 @@ right: 0; bottom: 0; width: 100%; - background-image: url('/images/header-bg.png'); + background-image: url('/images/transparent-bg.png'); font-size: 24px; font-weight: bold; color: #FFFFFF; diff --git a/detail.html b/detail.html index c27c39a..110e150 100644 --- a/detail.html +++ b/detail.html @@ -15,6 +15,7 @@ + diff --git a/images/guanbi.png b/images/guanbi.png new file mode 100644 index 0000000..114683d Binary files /dev/null and b/images/guanbi.png differ diff --git a/images/menu.png b/images/menu.png new file mode 100644 index 0000000..6965843 Binary files /dev/null and b/images/menu.png differ diff --git a/images/header-bg.png b/images/transparent-bg.png similarity index 100% rename from images/header-bg.png rename to images/transparent-bg.png diff --git a/index.html b/index.html index 77d7928..637ccd4 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ + @@ -39,7 +40,7 @@
-
+
+ @@ -34,9 +35,12 @@
-

社会责任

+

客户故事