首页改版---共同组件抽出

assets/scss/cus-client/cus-client-common.scss

@@ -444,6 +444,35 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   p{width: 460px;display: inline-block;@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;vertical-align: middle;margin-right: 96px;text-align: justify;}
   img{display: inline-block;vertical-align: middle;}
 }
+// 产品和服务
+.products-services-box{
+    width: 100%;display: inline-block;
+    // 头部图片
+    img{width: 640px;height: 485px;float: right;}
+
+    // 内容区域
+    .products-services-content{
+      width: 500px;
+      float: right;
+      padding: 110px 60px 0;
+      box-sizing: border-box;
+      margin: 0 24px;
+      @include setFontStyle(-6);
+      h5{@include setFontStyle(4);color: rgba(0,0,0,0.85);}
+      i{width:50px;height:5px;display: block;background: #3e7ce7;margin: 24px 0;}
+      p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 56px;text-align: justify;}
+      .client-default-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box;}
+      a,div.client-default-Btn{margin-right: 24px}
+      span.client-default-Btn{background: #fff;color: #3e7ce7;margin-right: 0;}
+    }
+}
+.products-contrary-box{
+  // 头部图片
+  img{float: left;}
+  // 内容区域
+  .products-services-content{float: right;}
+}
+
 // 详情页内容
 .industrydetails-content{
   li{margin-bottom: 16px;}

assets/scss/cus-client/cus-client-page.scss

@@ -29,45 +29,13 @@
     }
 
     /* 产品和服务 */
-    .products-services-box{
-      padding: 48px 0 32px;
-        li{
-          width: 100%;
-          display: inline-block;
-          //头部图片
-          .products-services-img{
-            width: 640px;
-            height: 485px;
-            float: right;
-          }
-          //内容区域
-          .products-services-content{
-            width: 500px;
-            float: right;
-            padding: 110px 60px 0;
-            box-sizing: border-box;
-            margin: 0 24px;
-            @include setFontStyle(-6);
-            h5{@include setFontStyle(4);color: rgba(0,0,0,0.85);}
-            i{width:50px;height:5px;display: block;background: #3e7ce7;margin: 24px 0;}
-            p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 56px;text-align: justify;}
-            .client-default-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box;}
-            a,div.client-default-Btn{margin-right: 24px}
-            span.client-default-Btn{background: #fff;color: #3e7ce7;margin-right: 0;}
-          }
-        }
-        li:nth-child(1){
-          .products-services-img{background-image: url("~static/images/client/index/index-products-kaoshi.png");}
-        }
-        li:nth-child(2){
-          .products-services-img{float: left;background-image: url("~static/images/client/index/index-products-peixun.png");}
-          .products-services-content{float: right;}
-        }
-        li:nth-child(3){
-          .products-services-img{background-image: url("~static/images/client/index/index-products-kejian.png");}
-        }
+    .client-products-services{
+      .client-title{
+        margin-bottom: 48px;
+      }
     }
 
+
     /* 行业学习需求 */
     .client-demand-box{
       background: #F9FAFF;
@@ -220,7 +188,7 @@
           img{width: 170px;height:240px;transition: all 0.5s;}
           img:hover{transform: scale(1.14);}
       }
-      a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;}
+      a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;background: #005491;border: 1px solid #fff;box-sizing: border-box;}
     }
 
     /* 为什么选择我们 */
@@ -236,6 +204,12 @@
           h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);}
         }
       }
+      .client-default-Btn {
+        width: 238px;
+        height: 40px;
+        line-height: 40px;
+        margin: 40px auto 0;
+      }
     }
 
     /* 新闻资讯 */

pages/index.vue

@@ -20,35 +20,33 @@
     <div class="client-products-services">
       <div class="client-container">
         <h4 class="client-title">产品和服务</h4>
-        <ul class="products-services-box">
-          <li>
-            <div class="products-services-img"></div>
-            <div class="products-services-content">
+        <div class="products-services-box">
+          <img :src="productsImg1" alt="考试系统" />
+          <div class="products-services-content">
               <h5>考试系统</h5>
               <i></i>
               <p>麦塔考试平台满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升</p>
               <div><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a><span  class="client-default-Btn" @click="goExamPage">了解详情</span></div>
-            </div>
-          </li>
-          <li>
-            <div class="products-services-img"></div>
+          </div>
+        </div>
+        <div class="products-services-box products-contrary-box">
+            <img :src="productsImg2" alt="培训系统" />
             <div class="products-services-content">
               <h5>培训系统</h5>
               <i></i>
               <p>麦塔培训平台满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈</p>
               <div><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a><span class="client-default-Btn" @click="goPeixunPage">了解详情</span></div>
             </div>
-          </li>
-          <li>
-            <div class="products-services-img"></div>
+        </div>
+        <div class="products-services-box">
+            <img :src="productsImg3" alt="课件制作" />
             <div class="products-services-content">
               <h5>课件制作</h5>
               <i></i>
               <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程</p>
               <div><div class="client-default-Btn" @click="applyFun">申请方案</div><span class="client-default-Btn" @click="goKechengPage">了解详情</span></div>
             </div>
-          </li>
-        </ul>
+        </div>
       </div>
     </div>
 
@@ -123,6 +121,7 @@
             </div>
           </li>
         </ul>
+        <a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a>
       </div>
     </div>
 
@@ -147,21 +146,6 @@
           </div>
       </div>
       </div>
-      <!--<div class="information-carousel-box">
-        <el-carousel :interval="3000" arrow="always">
-          <el-carousel-item v-for="(item, index) in topCarousels" :key="index">
-            <div
-              class="industry-img-box"
-              :style="{ backgroundImage: 'url(' + item.pic + ')' }"
-            ></div>
-            <div class="industry-content-box">
-              <h5>{{ item.title }}</h5>
-              <p>{{ item.intro }}</p>
-              <a class="client-default-Btn" @click="checkInfo(item)">了解详情</a>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>-->
 
     </div>
 
@@ -205,7 +189,7 @@
           <span><img :src="certImg6" alt="麦塔考试系统" /></span>
           <span><img :src="certImg8" alt="知识产权管理体系认证证书" /></span>
         </div>
-        <!--<a class="client-default-Btn">了解更多</a>-->
+        <a class="client-default-Btn" :href="`${baseUrl}/introduction`">了解更多</a>
       </div>
     </div>
 
@@ -270,6 +254,10 @@
         topCarousels2:  [],
         // 需求img
         bannerTelImg:   require(`~/static/images/client/index/index-banner-screen.png`),
+        // 产品和服务
+        productsImg1:   require(`~/static/images/client/index/index-products-kaoshi.png`),
+        productsImg2:   require(`~/static/images/client/index/index-products-peixun.png`),
+        productsImg3:   require(`~/static/images/client/index/index-products-kejian.png`),
         // 为什么选择我们
         choseImg1:   require(`~/static/images/client/index/index-chose-service-icon.png`),
         choseImg2:   require(`~/static/images/client/index/index-chose-system-icon.png`),

pages/introduction/index.vue

@@ -133,7 +133,7 @@
     layout:   'templateB',
     asyncData({ store }) {
       // 设置选中菜单
-      store.commit('setActiveNav', '/trainsystem');
+      store.commit('setActiveNav', '/introduction');
     },
     data() {
       return {