考试平台

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

@@ -369,12 +369,12 @@
 
   /********  describe: 考试平台 author: TX  date:2020-08-12  ********/
   .client-exam-page{
-    /* 网站banner */
-    .client-exam-banner{
-      width: 100%;
-      height: 400px;
-      background-image: url("~@/assets/images/client/exam/" + "exam-banner-background.png");
-      background-position-x: center;
+      /* 网站banner */
+      .client-exam-banner{
+        width: 100%;
+        height: 400px;
+        background-image: url("~@/assets/images/client/exam/" + "exam-banner-background.png");
+        background-position-x: center;
 
       /* banner文字区域 */
       .exam-banner-container{
@@ -394,7 +394,7 @@
         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: justify;@include multi-line-ellipsis(3);}
+        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);}
       }
 
       /* 产品功能 */
@@ -427,32 +427,99 @@
       .exam-product-show{
         background: #0E1F3C;
         h4{color: #fff;}
-        .product-show-container{width: 1500px;margin: 0 auto;}
+        // 轮播外层容器
+        .product-show-container{max-width: 1600px;margin: 0 auto;}
         .el-carousel{
           height: 360px;padding: 48px 0 80px;
-          .el-carousel__container{height: 360px;}
+          // 轮播内容区
+          .el-carousel__container{width: 1360px;height: 360px;margin: 0 auto;}
         }
+        // 后方卡片
         .el-carousel__item{
+          width:560px;
           .el-carousel__mask{background: transparent;}
           .product-show-carousel{
-            width:280px;
-            padding-top: 80px;
+            width:350px;
+            padding-top: 70px;
             margin: 0 auto;
-            //background: red;
-            img{width:100%;height: 158px}
-            h5{@include setFontStyle(-6);color: rgba(255,255,255,0.65);margin-top: 16px;text-align: center;}
+            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;
-            //background: blue;
             padding-top: 0;
-            img{height: 315px}
+            img{height: 315px;}
           }
         }
-
+        // 轮播下方进度标签
         .el-carousel__indicators--outside{display: none}
+
+      }
+
+      /* 应用场景 */
+      .exam-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("~@/assets/images/client/exam/" + "application-scenarios-img1.svg");
+            i{top: 48px;left: 42px;background-image: url("~@/assets/images/client/exam/" + "application-scenarios-icon1.svg");animation: 3s scenariosImgUpDown1 linear infinite;}
+          }
+        }
+        li:nth-child(2){
+          .application-scenarios-img {
+            background-image: url("~@/assets/images/client/exam/" + "application-scenarios-img2.svg");
+            i{top: 35px;left: 38px;background-image: url("~@/assets/images/client/exam/" + "application-scenarios-icon2.svg");animation: 3s scenariosImgUpDown2 linear infinite;}
+          }
+        }
+        li:nth-child(3){
+          .application-scenarios-img {
+            background-image: url("~@/assets/images/client/exam/" + "application-scenarios-img3.svg");
+            i{top: 35px;left: 32px;background-image: url("~@/assets/images/client/exam/" + "application-scenarios-icon3.svg");animation: 3s scenariosImgUpDown2 linear infinite;}
+          }
+        }
+        // 应用场景图标动画
+        @keyframes scenariosImgUpDown1 {
+          0%, to {top: 48px;}
+          50% {top: 40px;}
+        }
+        @keyframes scenariosImgUpDown2 {
+          0%, to {top: 35px;}
+          50% {top: 28px;}
+        }
       }
   }
 

src/views/client/examPlatform.vue

@@ -18,9 +18,9 @@
             <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="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>
+                <li><img :src="advantagesImg4" alt="功能丰富的在线考试"><h5>功能丰富的在线考试</h5><p>强大的题库管理和功能丰富的考试控制功能</p></li>
             </ul>
         </div>
 
@@ -45,8 +45,8 @@
         <div class="exam-product-show">
             <h4 class="client-title">产品展示</h4>
             <div class="product-show-container">
-                <el-carousel :interval="200000" type="card" arrow="never">
-                    <el-carousel-item v-for="item in topCarousels" :key="item">
+                <el-carousel :interval="500" :autoplay="false" type="card" arrow="never">
+                    <el-carousel-item v-for="item in productShowCarousels">
                         <div class="product-show-carousel">
                             <img :src="item.img">
                             <h5>{{item.title}}</h5>
@@ -55,6 +55,36 @@
                 </el-carousel>
             </div>
         </div>
+
+        <!-- 应用场景 -->
+        <div class="exam-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">
+                            <h5>岗位考试</h5>
+                            <p>无论传统的培训还是新型的在线培训，企业都需要利用考核来进行培训效果评估，可以实现人才岗位胜任力测评、按需培训、绩效考核等功能，为领导者对员工素质进行评价和分析提供有力的数据支持。</p>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="application-scenarios-img"><i></i></div>
+                        <div class="application-scenarios-content">
+                            <h5>大型竞赛</h5>
+                            <p>多种组卷、考试模式，可以覆盖大多数竞赛场景，报名注册只需简单一步就搞定，无中间流程，企业还可自由定制证书，合格后进行发放，降低使用成本，规范、快捷、高效，万人同考无压力。</p>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="application-scenarios-img"><i></i></div>
+                        <div class="application-scenarios-content">
+                            <h5>资格考试</h5>
+                            <p>不限次发布考试，特殊题型可使用拍照上传功能，考生后台记录历史成绩，通过考试分析及时了解考生知识掌握情况，在线考试能突破时间空间限制，有利于组织大规模的考试，提高教学考核方式的灵活性。</p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -66,7 +96,7 @@
         },
         data() {
             return {
-                topCarousels: [
+                productShowCarousels: [
                         {img:require(`@/assets/images/client/exam/product-show-img1.png`),title:"平台总览"},
                         {img:require(`@/assets/images/client/exam/product-show-img3.png`),title:"考务管理"},
                         {img:require(`@/assets/images/client/exam/product-show-img2.png`),title:"人员管理"}