超过10万家客户的信任之选

src/assets/css/cus-website/cus-website-page.scss

@@ -5,6 +5,7 @@
   /********  describe: 网站首页  author: TX  date:2020-07-30  ********/
   .website-index-page{
      width: 100%;
+
     /* 网站banner */
     .website-banner{
       width: 100%;
@@ -126,11 +127,11 @@
     }
 
     /* 网站标题 */
-    .website-index-title{ @include setFontStyle(14);color: rgba(0,0,0,0.85);letter-spacing: 0;margin-top: 96px;text-align: center;}
+    .website-index-title{ @include setFontStyle(14);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 96px;text-align: center;}
 
     /* 产品和服务 */
     .products-services-box{
-      margin: 136px 0 30px;
+      padding: 136px 0 30px;
         li{
           width: 33.33%;
           display: inline-block;
@@ -204,6 +205,41 @@
           }
         }
     }
+
+    /*行业学习需求*/
+    .website-demand-box{
+      background: #F9FAFF;
+      padding-bottom: 96px;
+      // 行业ul
+      .industry-box{
+        li{
+          width: 25%;display: inline-block;padding-top: 56px;height: 147px;overflow: hidden;
+          img{margin: 0 auto;display: block;transition: all .2s linear;}
+          div{transition: all .25s linear;}
+          h2{@include setFontStyle(4);color: rgba(0,0,0,0.85);text-align: center;margin: 24px 0 16px;}
+          p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin: 0 8px 8px;min-height: 48px;@include multi-line-ellipsis(2);}
+          a{@include setFontStyle(-4);width: max-content;display: block;color: #2B5CFD;line-height: 24px;margin: 0 auto;}
+        }
+        li:hover{
+          img{opacity: 0;transform: translateY(10px);}
+          div{margin-top: -147px}
+          h2{@include setFontStyle(0);margin-top: 80px;}
+          a{cursor: pointer;}
+        }
+      }
+    }
+
+    /*超过10万家客户的信任之选*/
+    .website-customer-box{
+      .customer-img-box{
+        margin: 40px 0 80px;
+        li{
+          width: 20%;
+          display: inline-block;
+        }
+        img{margin: 16px auto;}
+      }
+    }
   }
 }
 

src/views/client/Index.vue

@@ -81,12 +81,63 @@
                 </ul>
             </div>
         </div>
+
+        <!-- 行业学习需求 -->
+        <div class="website-demand-box">
+            <div class="website-container">
+                <h1 class="website-index-title">满足不同行业学习需求</h1>
+                <ul class="industry-box">
+                    <li><img :src="demandImg1" alt="政府机构"><div><h2>政府机构</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg2" alt="医药卫生"><div><h2>医药卫生</h2><p>提高行政服务人员</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg3" alt="能源化工"><div><h2>能源化工</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg4" alt="信息产业"><div><h2>信息产业</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg5" alt="交通运输"><div><h2>交通运输</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg6" alt="机械机电"><div><h2>机械机电</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg7" alt="教育培训"><div><h2>教育培训</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg8" alt="食品餐饮"><div><h2>食品餐饮</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg9" alt="金融保险"><div><h2>金融保险</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg10" alt="汽车制造"><div><h2>汽车制造</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg11" alt="新闻出版"><div><h2>新闻出版</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg12" alt="更多"><div><h2>更多</h2><p><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
+                </ul>
+            </div>
+        </div>
+
+        <!-- 超过10万家客户的信任之选 -->
+        <div class="website-customer-box">
+            <div class="website-container">
+                <h1 class="website-index-title">超过10万家客户的信任之选</h1>
+                <ul class="customer-img-box">
+                    <li><img :src="customerImg1" alt="中国人民银行"></li>
+                    <li><img :src="customerImg2" alt="汇丰"></li>
+                    <li><img :src="customerImg3" alt="中国银行"></li>
+                    <li><img :src="customerImg4" alt="中信银行"></li>
+                    <li><img :src="customerImg5" alt="中国民生银行"></li>
+                    <li><img :src="customerImg6" alt="astellas"></li>
+                    <li><img :src="customerImg7" alt="今日头条"></li>
+                    <li><img :src="customerImg8" alt="华图教育"></li>
+                    <li><img :src="customerImg9" alt="步步高"></li>
+                    <li><img :src="customerImg10" alt="小天才"></li>
+                    <li><img :src="customerImg11" alt="华发股份"></li>
+                    <li><img :src="customerImg12" alt="上海航空"></li>
+                    <li><img :src="customerImg13" alt="中国国际航空公司"></li>
+                    <li><img :src="customerImg14" alt="中国东方航空"></li>
+                    <li><img :src="customerImg15" alt="深圳航空"></li>
+                    <li><img :src="customerImg16" alt="中建八局"></li>
+                    <li><img :src="customerImg17" alt="SANOFI"></li>
+                    <li><img :src="customerImg18" alt="大连海事大学"></li>
+                    <li><img :src="customerImg19" alt="南京银行"></li>
+                    <li><img :src="customerImg20" alt="中国人民银行"></li>
+                </ul>
+            </div>
+        </div>
         <!--<div class="mta-index">
             <div class="block">
-                <el-carousel :interval="200000" type="card" height="500px">
+                <el-carousel :interval="200000" type="card" height="400px" :autoplay="false" arrow="always">
                     <el-carousel-item v-for="item in topCarousels" :key="item">
-                        <div style="width: 1300px; height: 768px;">
+                        <div style="width: 800px; height: 400px;">
                             <img :src="item">
+                            <div><h1>企业为什么需要微课</h1><p>新时代人才的特点，移动互联网、智能手机的普及，企业环境的变革，都是推动微课迅猛发展的重要原因。</p></div>
                         </div>
                     </el-carousel-item>
                 </el-carousel>
@@ -104,6 +155,38 @@
             return {
                 //
                 bannerTelImg: require(`@/assets/images/website/index/index-banner-screen.png`),
+                demandImg1: require(`@/assets/images/website/index/index-demand-img1.png`),
+                demandImg2: require(`@/assets/images/website/index/index-demand-img2.png`),
+                demandImg3: require(`@/assets/images/website/index/index-demand-img3.png`),
+                demandImg4: require(`@/assets/images/website/index/index-demand-img4.png`),
+                demandImg5: require(`@/assets/images/website/index/index-demand-img5.png`),
+                demandImg6: require(`@/assets/images/website/index/index-demand-img6.png`),
+                demandImg7: require(`@/assets/images/website/index/index-demand-img7.png`),
+                demandImg8: require(`@/assets/images/website/index/index-demand-img8.png`),
+                demandImg9: require(`@/assets/images/website/index/index-demand-img9.png`),
+                demandImg10: require(`@/assets/images/website/index/index-demand-img10.png`),
+                demandImg11: require(`@/assets/images/website/index/index-demand-img11.png`),
+                demandImg12: require(`@/assets/images/website/index/index-demand-img12.png`),
+                customerImg1: require(`@/assets/images/website/index/index-customer-img1.png`),
+                customerImg2: require(`@/assets/images/website/index/index-customer-img2.png`),
+                customerImg3: require(`@/assets/images/website/index/index-customer-img3.png`),
+                customerImg4: require(`@/assets/images/website/index/index-customer-img4.png`),
+                customerImg5: require(`@/assets/images/website/index/index-customer-img5.png`),
+                customerImg6: require(`@/assets/images/website/index/index-customer-img6.png`),
+                customerImg7: require(`@/assets/images/website/index/index-customer-img7.png`),
+                customerImg8: require(`@/assets/images/website/index/index-customer-img8.png`),
+                customerImg9: require(`@/assets/images/website/index/index-customer-img9.png`),
+                customerImg10: require(`@/assets/images/website/index/index-customer-img10.png`),
+                customerImg11: require(`@/assets/images/website/index/index-customer-img11.png`),
+                customerImg12: require(`@/assets/images/website/index/index-customer-img12.png`),
+                customerImg13: require(`@/assets/images/website/index/index-customer-img13.png`),
+                customerImg14: require(`@/assets/images/website/index/index-customer-img14.png`),
+                customerImg15: require(`@/assets/images/website/index/index-customer-img15.png`),
+                customerImg16: require(`@/assets/images/website/index/index-customer-img16.png`),
+                customerImg17: require(`@/assets/images/website/index/index-customer-img17.png`),
+                customerImg18: require(`@/assets/images/website/index/index-customer-img18.png`),
+                customerImg19: require(`@/assets/images/website/index/index-customer-img19.png`),
+                customerImg20: require(`@/assets/images/website/index/index-customer-img20.png`),
                 activeIndex:  '首页',
                 topCarousels: [],
             };
@@ -149,6 +232,7 @@
         font-size:   14px;
         line-height: 200px;
         margin:      0;
+        /*transform:scale(1)!important;*/
     }
 
     .el-carousel__item:nth-child(2n) {
@@ -157,6 +241,7 @@
 
     .el-carousel__item:nth-child(2n+1) {
         background-color: #D3DCE6;
+        /*transform:scale(1)!important;*/
     }
 
 </style>