diff --git a/css/common/common.less b/css/common/common.less new file mode 100644 index 0000000..acde12d --- /dev/null +++ b/css/common/common.less @@ -0,0 +1,124 @@ +@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); + +.main-wrap { + width: @mw; +} + +.mg-center { + margin-top: 0; + margin-bottom: 0; + margin-left: auto; + margin-right: auto; +} + +.header { + width: 100%; + background-color: #010101; + + .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 new file mode 100644 index 0000000..fcad525 --- /dev/null +++ b/css/common/var.less @@ -0,0 +1,2 @@ +// main max width +@mw: 1366px; diff --git a/css/reset.css b/css/reset.css index 2565799..e279489 100644 --- a/css/reset.css +++ b/css/reset.css @@ -6,5 +6,6 @@ ul { list-style: none; } a { + color: unset; text-decoration: none; } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 3ace4b5..8c64eca 100644 --- a/css/style.css +++ b/css/style.css @@ -1,11 +1,18 @@ +.main-wrap { + width: 1366px; +} +.mg-center { + margin-top: 0; + margin-bottom: 0; + margin-left: auto; + margin-right: auto; +} .header { - width: 100vw; + width: 100%; background-color: #010101; } .header .main { - max-width: 1366px; height: 90px; - margin: 0 auto; display: flex; align-items: center; justify-content: space-between; @@ -28,12 +35,10 @@ font-weight: bold; } .footer { - width: 100vw; + width: 100%; background-color: #343434; } .footer .main { - max-width: 1366px; - margin: 0 auto; padding: 30px 0; } .footer .main .row:first-child { @@ -57,6 +62,92 @@ .footer .main .icp { color: #999999; } -.footer .main .icp a { - color: unset; +.section .section-title { + text-align: center; +} +.section .section-title.style-1 .title { + font-size: 36px; + line-height: 36px; + font-weight: bold; + color: #141414; + display: flex; + align-items: center; + justify-content: center; +} +.section .section-title.style-1 .title .rtext { + color: #E50020; +} +.section .section-title.style-1 .title::before, +.section .section-title.style-1 .title::after { + content: ''; + display: inline-block; + width: 58px; + height: 3px; + background: #D4D4D4; + margin: 0 15px; +} +.section.idx-about { + margin-top: 60px; +} +.section.idx-about .idx-about-container { + margin-top: 70px; + font-size: 20px; + color: #666666; + line-height: 36px; +} +.main-banner { + width: 100%; +} +.main-banner .swiper-slide { + display: flex; +} +.main-banner .swiper-pagination-bullet { + width: 40px; + height: 2px; + background: #F8F8F8; + border-radius: 0; + opacity: 1; +} +.main-banner .swiper-pagination-bullet-active { + background: #E50020; +} +.main-banner .swiper-pagination { + bottom: 40px; +} +.main-banner .item { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 720px; + background-repeat: no-repeat; + background-position: center center; +} +.main-banner .text-box { + color: #FFFFFF; + text-align: center; +} +.main-banner .text-box p:nth-child(1), +.main-banner .text-box p:nth-child(2) { + transform: translate3d(0, 20px, 0); + opacity: 0; +} +.main-banner .text-box p:nth-child(1) { + font-size: 38px; + margin-bottom: 25px; + line-height: 38px; + transition: 0.8s ease 0.4s; +} +.main-banner .text-box p:nth-child(2) { + font-size: 30px; + line-height: 30px; + transition: 0.8s ease 0.6s; +} +.main-banner .text-box .cname { + color: #E30020; +} +.main-banner .swiper-slide-active .text-box p:nth-child(1), +.main-banner .swiper-slide-active .text-box p:nth-child(2) { + opacity: 1; + transform: translate3d(0, 0, 0); } diff --git a/css/style.less b/css/style.less index cf1027d..cf78076 100644 --- a/css/style.less +++ b/css/style.less @@ -1,81 +1,116 @@ -@import 'var.less'; +@import 'common/var.less'; +@import 'common/common.less'; -.header { - width: 100vw; - background-color: #010101; - - .main { - max-width: @mw; - height: 90px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; +.section { + .section-title { + text-align: center; } - .logo { - img { - max-height: 50px; - } - } - - .menu { - .group { - display: flex; - } - - .item { - margin-left: 50px; - } - - .link { - font-size: 18px; - color: #FFFFFF; - } - - .link.active, - .link:hover { + .section-title.style-1 { + .title { + font-size: 36px; + line-height: 36px; font-weight: bold; - } - } -} + color: #141414; + display: flex; + align-items: center; + justify-content: center; -.footer { - width: 100vw; - background-color: #343434; - - .main { - max-width: @mw; - margin: 0 auto; - 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; - a { - color: unset; + .rtext { + color: #E50020; } } + + .title::before, + .title::after { + content: ''; + display: inline-block; + width: 58px; + height: 3px; + background: #D4D4D4; + margin: 0 15px; + } } } +.section.idx-about { + margin-top: 60px; + + .idx-about-container { + margin-top: 70px; + font-size: 20px; + color: #666666; + line-height: 36px; + } +} + +.main-banner { + width: 100%; + + .swiper-slide { + display: flex; + } + + .swiper-pagination-bullet { + width: 40px; + height: 2px; + background: #F8F8F8; + border-radius: 0; + opacity: 1; + } + + .swiper-pagination-bullet-active { + background: #E50020; + } + + .swiper-pagination { + bottom: 40px; + } + + .item { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 720px; + background-repeat: no-repeat; + background-position: center center; + } + + .text-box { + color: #FFFFFF; + text-align: center; + + p:nth-child(1), + p:nth-child(2) { + transform: translate3d(0, 20px, 0); + opacity: 0; + } + + p:nth-child(1) { + font-size: 38px; + margin-bottom: 25px; + line-height: 38px; + transition: .8s ease .4s; + } + + p:nth-child(2) { + font-size: 30px; + line-height: 30px; + transition: .8s ease .6s; + } + + .cname { + color: #E30020; + } + } + + .swiper-slide-active .text-box { + + p:nth-child(1), + p:nth-child(2) { + opacity: 1; + transform: translate3d(0, 0, 0); + } + } +} \ No newline at end of file diff --git a/css/var.less b/css/var.less deleted file mode 100644 index c2f4e50..0000000 --- a/css/var.less +++ /dev/null @@ -1 +0,0 @@ -@mw: 1366px; \ No newline at end of file diff --git a/images/banner.png b/images/banner.png new file mode 100644 index 0000000..f1ff588 Binary files /dev/null and b/images/banner.png differ diff --git a/index.html b/index.html index ea4a230..cb8b25d 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,20 @@
+ 左心房成立于2016年,是一家全国性的连锁助贷平台,业务覆盖全国30个省市。公司以"让每一位客户拥有健康的现金流"为使命,关注客户的长期现金流安全与健康,力图通过自身合规的服务理念、透明的服务流程,打造受客户欢迎,受社会尊敬的助贷品牌。 +
+