完善首页

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;
+        }
+    }
+}

css/common/var.less

@@ -0,0 +1,2 @@
+// main max width
+@mw: 1366px;

css/reset.css

@@ -6,5 +6,6 @@ ul {
     list-style: none;
 }
 a {
+    color: unset;
     text-decoration: none;
 }

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 {
+.section .section-title {
-  color: unset;
+  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);
 }

css/style.less

@@ -1,81 +1,116 @@
-@import 'var.less';
+@import 'common/var.less';
+@import 'common/common.less';
 
-.header {
+.section {
-    width: 100vw;
+    .section-title {
-    background-color: #010101;
+        text-align: center;
+    }
 
-    .main {
+    .section-title.style-1 {
-        max-width: @mw;
+        .title {
-        height: 90px;
+            font-size: 36px;
-        margin: 0 auto;
+            line-height: 36px;
+            font-weight: bold;
+            color: #141414;
             display: flex;
             align-items: center;
-        justify-content: space-between;
+            justify-content: center;
-    }
 
-    .logo {
+            .rtext {
-        img {
+                color: #E50020;
-            max-height: 50px;
             }
         }
 
-    .menu {
+        .title::before,
-        .group {
+        .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 {
-            margin-left: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 720px;
+        background-repeat: no-repeat;
+        background-position: center center;
     }
 
-        .link {
+    .text-box {
-            font-size: 18px;
-            color: #FFFFFF;
-        }
-
-        .link.active,
-        .link:hover {
-            font-weight: bold;
-        }
-    }
-}
-
-.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;
+        p:nth-child(1),
+        p:nth-child(2) {
+            transform: translate3d(0, 20px, 0);
+            opacity: 0;
         }
 
-        .tel {
+        p:nth-child(1) {
-            display: inline-block;
+            font-size: 38px;
-            width: 355px;
+            margin-bottom: 25px;
-            border: 2px solid #DDDDDD;
+            line-height: 38px;
-            border-radius: 30px;
+            transition: .8s ease .4s;
-            padding: 20px;
-            font-size: 24px;
         }
 
-        .icp {
+        p:nth-child(2) {
-            color: #999999;
+            font-size: 30px;
-            a {
+            line-height: 30px;
-                color: unset;
+            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);
+        }
+    }
+}

css/var.less

@@ -1 +0,0 @@
-@mw: 1366px;

index.html

@@ -6,13 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>首页</title>
     <link rel="stylesheet" href="css/reset.css">
-    <link rel="stylesheet" href="css/style.css">
     <script src="libs/jquery.1.11.1.min.js"></script>
+    <!-- animate -->
+    <link rel="stylesheet" href="libs/animate.min.css">
+    <script src="libs/wow.min.js"></script>
+    <!-- swiper -->
+    <link rel="stylesheet" href="libs/swiper/swiper.min.css">
+    <script src="libs/swiper/swiper.min.js"></script>
+
+    <link rel="stylesheet" href="css/style.css">
 </head>
 
 <body>
     <div class="header">
-        <div class="main">
+        <div class="main main-wrap mg-center">
             <div class="logo">
                 <a href="" target="_blank">
                     <img src="images/logo.png" alt="">
@@ -39,9 +46,50 @@
             </div>
         </div>
     </div>
-    <div class="container"></div>
+    <div class="container">
+        <div class="section main-banner swiper-container">
+            <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                    <a class="item" style="background-image: url('images/banner.png');" href="">
+                        <div class="text-box">
+                            <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
+                            <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
+                        </div>
+                    </a>
+                </div>
+                <div class="swiper-slide">
+                    <a class="item" style="background-image: url('images/banner.png');" href="">
+                        <div class="text-box">
+                            <p>您的现金流安全 <span class="cname">左心房</span>来守护</p>
+                            <p>YOUR CASH FLOW LEFT ATRIUM TO GUARD</p>
+                        </div>
+                    </a>
+                </div>
+            </div>
+            <div class="swiper-pagination"></div>
+        </div>
+        <script>
+            var swiper = new Swiper('.main-banner', {
+                pagination: '.swiper-pagination',
+                paginationClickable: true,
+                centeredSlides: true,
+                autoplay: 5000,
+                autoplayDisableOnInteraction: false
+            });
+        </script>
+        <div class="section main-wrap idx-about mg-center">
+            <div class="section-title style-1">
+                <h2 class="title">企业<span class="rtext">简介</span></h2>
+            </div>
+            <div class="idx-about-container mg-center">
+                <p>
+                    左心房成立于2016年，是一家全国性的连锁助贷平台，业务覆盖全国30个省市。公司以"让每一位客户拥有健康的现金流"为使命，关注客户的长期现金流安全与健康，力图通过自身合规的服务理念、透明的服务流程，打造受客户欢迎，受社会尊敬的助贷品牌。
+                </p>
+            </div>
+        </div>
+    </div>
     <div class="footer">
-        <div class="main">
+        <div class="main main-wrap mg-center">
             <div class="row">
                 <img class="logo-bottom" src="images/logo-bottom.png" />
             </div>

js/main.js

@@ -1,3 +1,3 @@
 $(function () {
-    console.log('start')
+    new WOW().init();
 })