考试平台改版--许莹版

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

@@ -257,43 +257,30 @@
       /* 网站banner */
       .client-exam-banner{
         width: 100%;
-        height: 400px;
-        background-image: url("~static/images/client/exam/exam-banner-background.png");
+        height: 395px;
+        background-color:#031073;
+        background-image: url("~static/images/client/index/index-banner-background.png");
         background-position-x: center;
-
-      /* banner文字区域 */
-      .exam-banner-container{
-        width:500px;
-        display: inline-block;
-        margin-left: 150px;
-        h4{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 110px;}
-        p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
-        i{width:1px;height:16px;display:inline-block;margin: 0 24px;background: #DFE6FE;vertical-align: middle;}
-        a{width: 132px;height: 32px;line-height: 32px;display: inline-block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
-      }
+        background-repeat: no-repeat;
     }
 
       /* 产品优势 */
-      .exam-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);}
+      .exam-products-services{
+          .products-services-box{width: 1200px;margin: 0 auto;}
+          li:not(:last-child){border-bottom:1px solid #eee; }
       }
 
       /* 产品功能 */
       .exam-product-function{
-        background: #F9FAFF;
+        background: #f8f8f8;
         padding-bottom: 32px;
         // ul
         .product-function-box{
-          margin-top: 24px;
+          margin-top: 48px;
           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;}
+            div{padding: 12px 8px;margin: 0 32px 24px;background: #fff;}
+            i{width: 120px;height: 80px;margin-right:24px;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);}
           }
@@ -309,102 +296,52 @@
         }
       }
 
-      /* 产品展示 */
-      .exam-product-show{
-        background: #0E1F3C;
-        h4{color: #fff;}
-        // 轮播外层容器
-        .product-show-container{max-width: 1600px;margin: 0 auto;}
-        .el-carousel{
-          min-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}
-
-      }
-
       /* 应用场景 */
       .exam-application-scenarios{
          background: #F9FAFF;
-        .application-scenarios-box{padding: 120px 0 80px;margin: 0 -16px;}
+         padding-bottom: 80px;
+        .application-scenarios-box{margin: 48px -12px 0;}
         li{
           width: 33.33%;
           display: inline-block;
           vertical-align: top;
-          position: relative;
-          transition: .3s all linear;
+          color: #fff;
           .application-scenarios-img{
             width: 116px;
             height: 116px;
-            position: absolute;
-             top: -70px;
-             left: 50%;
-             margin-left: -58px;
-             background-size: cover;
-
+            background-size: cover;
+            margin: 0 auto 24px;
             i{width:32px;height:32px;display: block;background-size: cover;position: absolute;}
           }
           .application-scenarios-content{
-            padding: 80px 24px 40px;
-            margin: 0 16px;
+            padding: 60px 24px 40px;
+            margin: 0 12px;
             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}
+            h5{@include setFontStyle(-2);text-align: center;margin-bottom: 16px;}
+            p{@include setFontStyle(-6);line-height: 22px;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/exam/application-scenarios-img1.svg");
-            i{top: 48px;left: 42px;background-image: url("~static/images/client/exam/application-scenarios-icon1.svg");animation: 3s scenariosImgUpDown1 linear infinite;}
+            i{top: 48px;left: 42px;background-image: url("~static/images/client/exam/application-scenarios-icon1.svg");}
           }
+          .application-scenarios-content{background: #ffbf00;}
         }
         li:nth-child(2){
           .application-scenarios-img {
             background-image: url("~static/images/client/exam/application-scenarios-img2.svg");
-            i{top: 35px;left: 38px;background-image: url("~static/images/client/exam/application-scenarios-icon2.svg");animation: 3s scenariosImgUpDown2 linear infinite;}
+            i{top: 35px;left: 38px;background-image: url("~static/images/client/exam/application-scenarios-icon2.svg");}
           }
+          .application-scenarios-content{background: #3799db;}
         }
         li:nth-child(3){
           .application-scenarios-img {
             background-image: url("~static/images/client/exam/application-scenarios-img3.svg");
-            i{top: 35px;left: 32px;background-image: url("~static/images/client/exam/application-scenarios-icon3.svg");animation: 3s scenariosImgUpDown2 linear infinite;}
+            i{top: 35px;left: 32px;background-image: url("~static/images/client/exam/application-scenarios-icon3.svg");}
           }
-        }
-        // 应用场景图标动画
-        @keyframes scenariosImgUpDown1 {
-          0%, to {top: 48px;}
-          50% {top: 40px;}
-        }
-        @keyframes scenariosImgUpDown2 {
-          0%, to {top: 35px;}
-          50% {top: 28px;}
+          .application-scenarios-content{background: #63ba86;}
         }
       }
   }

pages/examsystem/index.vue

@@ -3,26 +3,66 @@
     <div class="client-exam-page">
 
       <!-- 考试平台页 banner栏 -->
-      <div class="client-exam-banner">
-        <div class="client-container">
-          <!--  banner文字区域 -->
-          <div class="exam-banner-container">
-            <h4>麦塔在线考试平台</h4>
-            <p>简约而不简单<i></i>简约而不简单</p>
-            <a href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
-          </div>
-        </div>
-      </div>
+      <div class="client-exam-banner"></div>
 
       <!--  产品优势 -->
-      <div class="client-container">
+      <div class="exam-products-services">
         <h4 class="client-title">产品优势</h4>
-        <ul class="exam-product-advantages">
-          <li><img :src="advantagesImg1" alt="万人并发运行顺畅"><h5>万人并发运行顺畅</h5><p>拥有强大的考试并发负载能力，支持30万考生同时在线考试</p></li>
-          <li><img :src="advantagesImg2" alt="考试监控预防作弊"><h5>考试监控预防作弊</h5><p>人脸识别匹配，防止替考作弊，切屏强制交卷</p></li>
-          <li><img :src="advantagesImg3" alt="微信答题一扫就考"><h5>微信答题一扫就考</h5><p>学员用手机扫描二维码，考生30秒就能轻松答题</p></li>
-          <li><img :src="advantagesImg4" alt="功能丰富的在线考试"><h5>功能丰富的在线考试</h5><p>强大的题库管理和功能丰富的考试控制功能</p></li>
+        <ul>
+          <li>
+            <div class="client-container">
+              <div class="products-services-box products-contrary-box">
+              <img :src="advantagesImg1" alt="万人并发运行顺畅" />
+              <div class="products-services-content">
+                <h5>万人并发运行顺畅</h5>
+                <i></i>
+                <p>拥有强大的考试并发负载能力，支持30万考生同时在线考试</p>
+                <div><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
+              </div>
+            </div>
+            </div>
+          </li>
+          <li>
+            <div class="client-container">
+              <div class="products-services-box">
+              <img :src="advantagesImg2" 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></div>
+              </div>
+            </div>
+            </div>
+          </li>
+          <li>
+            <div class="client-container">
+              <div class="products-services-box products-contrary-box">
+              <img :src="advantagesImg3" alt="微信答题一扫就考" />
+              <div class="products-services-content">
+                <h5>微信答题一扫就考</h5>
+                <i></i>
+                <p>学员用手机扫描二维码，考生30秒就能轻松答题</p>
+                <div><a class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
+              </div>
+            </div>
+            </div>
+          </li>
+          <li>
+            <div class="client-container">
+              <div class="products-services-box">
+              <img :src="advantagesImg4" 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></div>
+              </div>
+            </div>
+            </div>
+          </li>
         </ul>
+
       </div>
 
       <!--  产品功能 -->
@@ -39,23 +79,10 @@
             <li><div><i></i><h5>智能考试安排</h5><p>几十种考试参数设置，全方位把控考试细节，适应各种考试场景，考试安排智能化，随时随地，快速考试</p></div></li>
             <li><div><i></i><h5>多维度统计分析</h5><p>从用户、考试、成绩、试题、排名、机构等层面多维度的统计系统数据</p></div></li>
           </ul>
+          <a class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
         </div>
       </div>
 
-      <!-- 产品展示 -->
-      <div class="exam-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="exam-application-scenarios">
@@ -63,27 +90,28 @@
           <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>
             </li>
           </ul>
+          <a class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
         </div>
       </div>
     </div>
@@ -107,10 +135,10 @@
           {img:require(`~/static/images/client/exam/product-show-img3.png`),title:"考务管理"},
           {img:require(`~/static/images/client/exam/product-show-img2.png`),title:"人员管理"}
         ],
-        advantagesImg1:  require(`~/static/images/client/exam/product-advantages-img1.svg`),
-        advantagesImg2:  require(`~/static/images/client/exam/product-advantages-img2.svg`),
-        advantagesImg3:  require(`~/static/images/client/exam/product-advantages-img3.svg`),
-        advantagesImg4:  require(`~/static/images/client/exam/product-advantages-img4.svg`),
+        advantagesImg1:  require(`~/static/images/client/index/index-products-kaoshi.png`),
+        advantagesImg2:  require(`~/static/images/client/index/index-products-peixun.png`),
+        advantagesImg3:  require(`~/static/images/client/index/index-products-kaoshi.png`),
+        advantagesImg4:  require(`~/static/images/client/index/index-products-peixun.png`),
       };
     },
     head(){