wangxy il y a 3 ans
Parent
commit
edac59e117
2 fichiers modifiés avec 94 ajouts et 45 suppressions
  1. 64 31
      assets/scss/cus-client/cus-client-page.scss
  2. 30 14
      pages/index.vue

+ 64 - 31
assets/scss/cus-client/cus-client-page.scss

@@ -8,7 +8,7 @@
     /* 网站banner */
     .client-index-banner{
       width: 100%;
-      height: 395px;
+      height: 730px;
       background-color:#031073;
       background-image: url("~static/images/client/index/index-banner-background.png");
       background-position-x: center;
@@ -16,51 +16,84 @@
     }
     /* banner-box */
     .client-banner-box{
-        .el-carousel__container{height: 395px;cursor: pointer;}
+        .el-carousel__container{height: 730px;cursor: pointer;}
         .el-carousel__item{
-          .index-carousel-box{width:100%;height: 395px;display: block;background-position: center;background-repeat: no-repeat;background-color: #010619;}
+          .index-carousel-box{width:100%;height: 730px;display: block;background-position: center;background-repeat: no-repeat;background-color: #010619;}
         }
+
+      .el-carousel__indicators {
+        margin-bottom: 100px;
+      }
     }
 
     /* 发展历程 - 移动端隐藏*/
     .client-company-history{
+      padding: 20px;
       background:#f8f8f8;
-        li{
-          width: 25%;display: inline-block;text-align: center;
-          div{border-right:2px solid #e5e5e5;margin: 24px 0;}
-          p{@include setFontStyle(16);margin-bottom: 16px;color: #333;}
-          span{@include setFontStyle(6);};
-          h4{@include setFontStyle(-4);color: #666;};
-          i {
-            width: 64px;
-            height: 54px;
-            display: inline-block;
-            background-size: contain;
-            background-repeat: no-repeat;
-            background-position: center;
-          }
+      position: relative;
+      top: -80px;
+      z-index: 10;
+      border-radius: 8px;
+
+      ul {
+        display: flex;justify-content: center;flex-direction: row;
+      }
+      li{
+       text-align: center;margin: 0 auto;
+        div{margin: 24px 0;}
+        p{@include setFontStyle(16);margin-bottom: 16px;color: #333;}
+        span{@include setFontStyle(6);};
+        h4{@include setFontStyle(-4);color: #666;};
+        i {
+          width: 64px;
+          height: 54px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
         }
-        li:last-child div{border-right: 0;}
-        li:nth-child(1) {
-          i {
-            background-image: url('~static/gangweiIcon/z139.png');
-          }
+      }
+      li:last-child div{border-right: 0;}
+      li:nth-child(1) {
+        i {
+          background-image: url('~static/gangweiIcon/z139.png');
         }
-        li:nth-child(2) {
-          i {
-            background-image: url('~static/gangweiIcon/z136.png');
-          }
+      }
+      li:nth-child(2) {
+        i {
+          background-image: url('~static/gangweiIcon/z136.png');
         }
-        li:nth-child(3) {
-          i {
-            background-image: url('~static/gangweiIcon/z137.png');
-          }
+      }
+      li:nth-child(3) {
+        i {
+          background-image: url('~static/gangweiIcon/z137.png');
         }
-        li:nth-child(4) {
+      }
+      li:nth-child(4) {
           i {
             background-image: url('~static/gangweiIcon/z138.png');
           }
         }
+
+      .company-item {
+        display: flex;
+        align-items: center;
+        margin: 0 auto;
+        i {
+          margin-right: 10px;
+        }
+        p {
+          font-size: 20px;
+          font-weight: 800;
+          color: #333;
+        }
+
+        h4 {
+          font-size: 14px;
+          font-weight: 500;
+          color: #565656;
+        }
+      }
     }
 
     /* 产品和服务 */

+ 30 - 14
pages/index.vue

@@ -23,27 +23,34 @@
     </div>
 
     <!-- 发展历程-移动端隐藏-->
-    <div class="client-company-history mta-hidden-xs">
-      <div class="client-container">
-        <ul>
-          <li>
+    <div class="client-company-history client-container mta-hidden-xs">
+      <ul>
+        <li>
+          <div class="company-item">
             <i></i>
             <div><p>在线考试系统</p><h4>让考试变得更轻松</h4></div>
-          </li>
-          <li>
+          </div>
+        </li>
+        <li>
+          <div class="company-item">
             <i></i>
             <div><p>在线培训系统</p><h4>为企业解决培训痛点</h4></div>
-          </li>
-          <li>
+          </div>
+        </li>
+        <li>
+          <div class="company-item">
             <i></i>
             <div><p>课程定制开发</p><h4>打造专业定制化服务</h4></div>
-          </li>
-          <li>
+          </div>
+
+        </li>
+        <li>
+          <div class="company-item">
             <i></i>
             <div><p>通用课程资源</p><h4>企业构建自主课程体系</h4></div>
-          </li>
-        </ul>
-      </div>
+          </div>
+        </li>
+      </ul>
     </div>
 
     <!-- 产品和服务 -->
@@ -480,10 +487,19 @@ export default {
 .client-container {
   position: relative;
 }
+
+.client-products-services {
+  .client-title {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+  }
+}
+
 .banner-btn-groups {
   position: absolute;
   left: 0;
-  top: 250px;
+  top: 400px;
 }
 
 </style>