培训和考试抽出公共，培训改版-许莹版

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

@@ -475,6 +475,10 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   // 内容区域
   .products-services-content{float: right;}
 }
+// 考试平台和培训平台样式--多下边线
+.platform-products-services{
+  li:not(:last-child){border-bottom:1px solid #eee; }
+}
 
 // 详情页内容
 .industrydetails-content{

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

@@ -252,10 +252,10 @@
     }
   }
 
-  /********  describe: 考试平台 author: TX  date:2020-08-12  ********/
-  .client-exam-page{
+  /********  describe: 平台页面（考试平台、培训平台） author: TX  date:2020-08-12  ********/
+  .client-platform-page{
       /* 网站banner */
-      .client-exam-banner{
+      .client-platform-banner{
         width: 100%;
         height: 395px;
         background-color:#031073;
@@ -265,13 +265,12 @@
     }
 
       /* 产品优势 */
-      .exam-products-services{
-          .products-services-box{width: 1200px;margin: 0 auto;}
+      .platform-products-services{
           li:not(:last-child){border-bottom:1px solid #eee; }
       }
 
       /* 产品功能 */
-      .exam-product-function{
+      .platform-product-function{
         background: #f8f8f8;
         padding-bottom: 32px;
         // ul
@@ -297,7 +296,7 @@
       }
 
       /* 应用场景 */
-      .exam-application-scenarios{
+      .platform-application-scenarios{
          background: #F9FAFF;
          padding-bottom: 80px;
         .application-scenarios-box{margin: 48px -12px 0;}
@@ -346,51 +345,18 @@
       }
   }
 
-  /********  describe: 培训平台 author: TX  date:2020-08-14  ********/
+  /********  describe: 培训平台--图片（和考试默认图片不同） author: TX  date:2020-08-14  ********/
   .client-train-page{
 
     /* 网站banner */
     .client-train-banner{
-      width: 100%;
-      height: 454px;
-      background-image: url("~static/images/client/train/train-banner-background.png");
-      background-position-x: center;
-
-      /* banner文字区域 */
-      .train-banner-container{
-        width:500px;
-        display: inline-block;
-        margin-left: 150px;
-        h4{@include setFontStyle(36);color: #FFF;letter-spacing: 0;padding-top: 110px;}
-        p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
-        a{width: 132px;height: 32px;line-height: 32px;display: inline-block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
-      }
-    }
-
-    /* 产品优势 */
-    .train-product-advantages{
-      width: 100%;display: flex;justify-content: space-between;margin: 48px 0;
-      li{width: 250px;padding: 32px 0;border-radius: 8px;transition: .3s all linear;}
-      li:hover{background: #F9FAFF;cursor: default}
-      img{display: block;margin: 0 auto;}
-      h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin: 16px 0 8px;}
-      p{@include setFontStyle(-6);height:66px;line-height: 22px;color: rgba(0,0,0,0.65);padding:0 24px;margin-bottom: 21px;text-align: center;@include multi-line-ellipsis(3);}
+      //background-image: url("~static/images/client/train/train-banner-background.png");
     }
 
     /* 产品功能 */
-    .train-product-function{
-      background: #F9FAFF;
-      padding-bottom: 32px;
+    .platform-product-function{
       // ul
       .product-function-box{
-        margin-top: 24px;
-        li{
-          width: 50%;display: inline-block;transition: .3s all linear;
-          div{padding: 24px 32px;margin: 0 32px;}
-          i{width: 40px;height: 40px;float:left;background-size: cover;background-repeat: no-repeat;}
-          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;margin-left: 56px;}
-          p{@include setFontStyle(-6);height:66px;line-height: 22px;color: rgba(0,0,0,0.65);margin-left: 56px;@include multi-line-ellipsis(3);}
-        }
         li:nth-child(1){i{background-image:url("~static/images/client/train/product-function-icon1.svg");}}
         li:nth-child(2){i{background-image:url("~static/images/client/train/product-function-icon2.svg");}}
         li:nth-child(3){i{background-image:url("~static/images/client/train/product-function-icon3.svg");}}
@@ -399,107 +365,29 @@
         li:nth-child(6){i{background-image:url("~static/images/client/train/product-function-icon6.svg");}}
         li:nth-child(7){i{background-image:url("~static/images/client/train/product-function-icon7.svg");}}
         li:nth-child(8){i{background-image:url("~static/images/client/train/product-function-icon8.svg");}}
-        li:hover{div{box-shadow: 0 2px 4px 0 #D4DBFF;border-radius: 8px;cursor: default}}
       }
     }
 
-    /* 产品展示 */
-    .train-product-show{
-      background: #0E1F3C;
-      h4{color: #fff;}
-      // 轮播外层容器
-      .product-show-container{max-width: 1600px;margin: 0 auto;}
-      .el-carousel{
-        height: 360px;padding: 48px 0 80px;
-        // 轮播内容区
-        .el-carousel__container{width: 1360px;height: 360px;margin: 0 auto;}
-      }
-      // 后方卡片
-      .el-carousel__item{
-        width:560px;
-        .el-carousel__mask{background: transparent;}
-        .product-show-carousel{
-          width:350px;
-          padding-top: 70px;
-          margin: 0 auto;
-          img{width:100%;height: 198px;border-radius: 8px;}
-          h5{@include setFontStyle(-4);color: rgba(255,255,255,0.65);margin-top: 16px;text-align: center;}
-        }
-      }
-      // 前方卡片（active）
-      .el-carousel__item.is-active{
-        width: 560px;
-        .product-show-carousel{
-          width: 560px;
-          padding-top: 0;
-          img{height: 315px;}
-        }
-      }
-      // 轮播下方进度标签
-      .el-carousel__indicators--outside{display: none}
-
-    }
-
     /* 应用场景 */
     .train-application-scenarios{
-      background: #F9FAFF;
-      .application-scenarios-box{height:266px;padding: 120px 0 80px;margin: 0 -16px;}
-      li{
-        width: 33.33%;
-        display: inline-block;
-        vertical-align: top;
-        position: relative;
-        transition: .3s all linear;
-        .application-scenarios-img{
-          width: 116px;
-          height: 116px;
-          position: absolute;
-          top: -70px;
-          left: 50%;
-          margin-left: -58px;
-          background-size: cover;
-
-          i{width:32px;height:32px;display: block;background-size: cover;position: absolute;}
-        }
-        .application-scenarios-content{
-          padding: 80px 24px 40px;
-          margin: 0 16px;
-          background: #FFF;
-          border-radius: 8px;
-          h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
-          p{@include setFontStyle(-6);line-height: 22px;color: rgba(0,0,0,0.65);text-align: justify;@include multi-line-ellipsis(5);min-height: 110px;max-height: 110px}
-        }
-      }
-      li:hover{
-        margin-top: -16px;cursor: default;
-      }
       li:nth-child(1){
         .application-scenarios-img {
           background-image: url("~static/images/client/train/application-scenarios-img1.svg");
-          i{top: 45px;left: 38px;background-image: url("~static/images/client/train/application-scenarios-icon1.svg");animation: 3s trainScenariosImgUpDown1 linear infinite;}
+          i{top: 45px;left: 38px;background-image: url("~static/images/client/train/application-scenarios-icon1.svg");}
         }
       }
       li:nth-child(2){
         .application-scenarios-img {
           background-image: url("~static/images/client/train/application-scenarios-img2.svg");
-          i{top: 45px;left: 38px;background-image: url("~static/images/client/train/application-scenarios-icon2.svg");animation: 3s trainScenariosImgUpDown1 linear infinite;}
+          i{top: 45px;left: 38px;background-image: url("~static/images/client/train/application-scenarios-icon2.svg");}
         }
       }
       li:nth-child(3){
         .application-scenarios-img {
           background-image: url("~static/images/client/train/application-scenarios-img3.svg");
-          i{top: 32px;left: 34px;background-image: url("~static/images/client/train/application-scenarios-icon3.svg");animation: 3s trainScenariosImgUpDown2 linear infinite;}
+          i{top: 32px;left: 34px;background-image: url("~static/images/client/train/application-scenarios-icon3.svg");}
         }
       }
-      // 应用场景图标动画
-      @keyframes trainScenariosImgUpDown1 {
-        0%, to {top: 45px;}
-        50% {top: 38px;}
-      }
-      @keyframes trainScenariosImgUpDown2 {
-        0%, to {top: 32px;}
-        50% {top: 25px;}
-      }
     }
   }
 

pages/examsystem/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <div class="client-exam-page">
+    <div class="client-platform-page">
 
       <!-- 考试平台页 banner栏 -->
-      <div class="client-exam-banner"></div>
+      <div class="client-platform-banner"></div>
 
       <!--  产品优势 -->
-      <div class="exam-products-services">
+      <div class="platform-products-services">
         <h4 class="client-title">产品优势</h4>
         <ul>
           <li>
@@ -66,7 +66,7 @@
       </div>
 
       <!--  产品功能 -->
-      <div class="exam-product-function">
+      <div class="platform-product-function">
         <div class="client-container">
           <h4 class="client-title">产品功能</h4>
           <ul class="product-function-box">
@@ -85,7 +85,7 @@
 
 
       <!-- 应用场景 -->
-      <div class="exam-application-scenarios">
+      <div class="platform-application-scenarios">
         <div class="client-container">
           <h4 class="client-title">应用场景</h4>
           <ul class="application-scenarios-box">

pages/trainsystem/index.vue

@@ -1,35 +1,71 @@
 <template>
-  <div class="client-train-page">
+  <div class="client-platform-page client-train-page">
 
     <!-- 培训平台页 banner栏 -->
-    <div class="client-train-banner">
-      <div class="client-container">
-        <!--  banner文字区域 -->
-        <div class="train-banner-container">
-          <h4>麦塔在线培训平台</h4>
-          <p>一个学习型组织的标准配置</p>
-          <a href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a>
-        </div>
-      </div>
-    </div>
+    <div class="client-platform-banner"></div>
 
     <!--  产品优势 -->
-    <div class="client-container" style="margin-top: -54px">
+      <div class="platform-products-services">
       <h4 class="client-title">产品优势</h4>
-      <ul class="train-product-advantages">
-        <li><img :src="trainAdvantagesImg1" alt="课程考试相结合"><h5>课程考试相结合</h5>
-          <p>视频指定时间添加试题，支持图片、PDF、音视频、office文档等</p></li>
-        <li><img :src="trainAdvantagesImg2" alt="随时随地学习"><h5>随时随地学习</h5>
-          <p>PC端与移动端无缝连接；支持APP和微信学习模式</p></li>
-        <li><img :src="trainAdvantagesImg3" alt="稳定安全的数据保护"><h5>稳定安全的数据保护</h5>
-          <p>采用多层次多安全防护措施，通过阿里渗透式测试</p></li>
-        <li><img :src="trainAdvantagesImg4" alt="量身定制"><h5>量身定制</h5>
-          <p>满足企业培训中的功能需求，定制企业专属功能</p></li>
+      <ul>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img :src="trainAdvantagesImg1" alt="课程考试相结合" />
+              <div class="products-services-content">
+                <h5>课程考试相结合</h5>
+                <i></i>
+                <p>视频指定时间添加试题，支持图片、PDF、音视频、office文档等</p>
+                <div><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a></div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <img :src="trainAdvantagesImg2" alt="随时随地学习" />
+              <div class="products-services-content">
+                <h5>随时随地学习</h5>
+                <i></i>
+                <p>PC端与移动端无缝连接；支持APP和微信学习模式</p>
+                <div><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a></div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box products-contrary-box">
+              <img :src="trainAdvantagesImg3" 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=2" target="_blank">免费试用</a></div>
+              </div>
+            </div>
+          </div>
+        </li>
+        <li>
+          <div class="client-container">
+            <div class="products-services-box">
+              <img :src="trainAdvantagesImg4" 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=2" target="_blank">免费试用</a></div>
+              </div>
+            </div>
+          </div>
+        </li>
       </ul>
+
     </div>
 
     <!--  产品功能 -->
-    <div class="train-product-function">
+    <div class="platform-product-function">
       <div class="client-container">
         <h4 class="client-title">产品功能</h4>
         <ul class="product-function-box">
@@ -69,43 +105,28 @@
       </div>
     </div>
 
-    <!-- 产品展示 -->
-    <div class="train-product-show">
-      <h4 class="client-title">产品展示</h4>
-      <div class="product-show-container">
-        <el-carousel :interval="3000" type="card" arrow="never">
-          <el-carousel-item v-for="(item,index) in productShowCarousels" :key="index">
-            <div class="product-show-carousel">
-              <img :src="item.img">
-              <h5>{{item.title}}</h5>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-    </div>
-
     <!-- 应用场景 -->
-    <div class="train-application-scenarios">
+    <div class="platform-application-scenarios">
       <div class="client-container">
         <h4 class="client-title">应用场景</h4>
         <ul class="application-scenarios-box">
           <li>
-            <div class="application-scenarios-img"><i></i></div>
             <div class="application-scenarios-content">
+              <div class="application-scenarios-img"><i></i></div>
               <h5>新员工入职培训</h5>
               <p>在职员工可以利用零散的时间在移动终端上学习企业文化和工作职责，培训主管可以通过后台的大数据实时监控新员工的学习进度。此外，可以设置特殊考试来测试新员工的学习效果</p>
             </div>
           </li>
           <li>
-            <div class="application-scenarios-img"><i></i></div>
             <div class="application-scenarios-content">
+              <div class="application-scenarios-img"><i></i></div>
               <h5>技能考核</h5>
               <p>组织学员通过互联网或局域网开展网上学习、培训、考试、互动问答等活动，利用考核成绩智能分析功能进行针对性的培训考核，达到快速、有效地提升员工技能的目的</p>
             </div>
           </li>
           <li>
-            <div class="application-scenarios-img"><i></i></div>
             <div class="application-scenarios-content">
+              <div class="application-scenarios-img"><i></i></div>
               <h5>企业招聘</h5>
               <p>满足企业社招、校园招聘等需求，一个系统搞定各种行业的招聘在线测试，企业只需要将准备好的笔试题目用文档的方式，导入到考试系统当中，再创建试卷，完成后发送试卷的链接给应聘者即可完成考试。</p>
             </div>
@@ -131,10 +152,10 @@
           { img: require(`~/static/images/client/train/product-show-img3.png`), title: '服务管理' },
           { img: require(`~/static/images/client/train/product-show-img2.png`), title: '人员管理' },
         ],
-        trainAdvantagesImg1:  require(`~/static/images/client/train/product-advantages-img1.svg`),
-        trainAdvantagesImg2:  require(`~/static/images/client/train/product-advantages-img2.svg`),
-        trainAdvantagesImg3:  require(`~/static/images/client/train/product-advantages-img3.svg`),
-        trainAdvantagesImg4:  require(`~/static/images/client/train/product-advantages-img4.svg`),
+        trainAdvantagesImg1:  require(`~/static/images/client/index/index-products-kaoshi.png`),
+        trainAdvantagesImg2:  require(`~/static/images/client/index/index-products-peixun.png`),
+        trainAdvantagesImg3:  require(`~/static/images/client/index/index-products-kaoshi.png`),
+        trainAdvantagesImg4:  require(`~/static/images/client/index/index-products-peixun.png`),
       };
     },
     head(){