产品展示

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

@@ -393,7 +393,7 @@
         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{color: rgba(0,0,0,0.85);text-align: center;margin: 16px 0 8px;}
+        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);}
       }
 
@@ -423,7 +423,37 @@
         }
       }
 
+      /* 产品展示 */
+      .exam-product-show{
+        background: #0E1F3C;
+        h4{color: #fff;}
+        .product-show-container{width: 1500px;margin: 0 auto;}
+        .el-carousel{
+          height: 360px;padding: 48px 0 80px;
+          .el-carousel__container{height: 360px;}
+        }
+        .el-carousel__item{
+          .el-carousel__mask{background: transparent;}
+          .product-show-carousel{
+            width:280px;
+            padding-top: 80px;
+            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;}
+          }
+        }
+        .el-carousel__item.is-active{
+          .product-show-carousel{
+            width: 560px;
+            //background: blue;
+            padding-top: 0;
+            img{height: 315px}
+          }
+        }
 
+        .el-carousel__indicators--outside{display: none}
+      }
   }
 
   /********  describe: 关于我们 author: TX  date:2020-08-07  ********/

src/views/client/examPlatform.vue

@@ -15,7 +15,7 @@
 
         <!--  产品优势 -->
         <div class="client-container">
-            <h1 class="client-title">产品优势</h1>
+            <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>
@@ -27,7 +27,7 @@
         <!--  产品功能 -->
         <div class="exam-product-function">
             <div class="client-container">
-                <h1 class="client-title">产品功能</h1>
+                <h4 class="client-title">产品功能</h4>
                 <ul class="product-function-box">
                     <li><div><i></i><h5>用户权限管理</h5><p>可以设置不同角色管理，给管理用户添加管理部门人员权限，支持用户单点登录、信息同步</p></div></li>
                     <li><div><i></i><h5>考试防作弊</h5><p>多重防作弊手段，切屏监控、离开考试，系统强制收卷</p></div></li>
@@ -40,6 +40,21 @@
                 </ul>
             </div>
         </div>
+
+        <!-- 产品展示 -->
+        <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">
+                        <div class="product-show-carousel">
+                            <img :src="item.img">
+                            <h5>{{item.title}}</h5>
+                        </div>
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -51,6 +66,11 @@
         },
         data() {
             return {
+                topCarousels: [
+                    {img:require(`@/assets/images/client/exam/product-show-img1.png`),title:"平台总览"},
+                    {img:require(`@/assets/images/client/exam/product-show-img2.png`),title:"平台总览"},
+                    {img:require(`@/assets/images/client/exam/product-show-img3.png`),title:"平台总览"}
+                    ],
                 advantagesImg1:  require(`@/assets/images/client/exam/product-advantages-img1.svg`),
                 advantagesImg2:  require(`@/assets/images/client/exam/product-advantages-img2.svg`),
                 advantagesImg3:  require(`@/assets/images/client/exam/product-advantages-img3.svg`),
@@ -68,7 +88,10 @@
 
         },
         mounted() {
-
+           /* for (let i = 0; i < 3; i++) {
+                this.topCarousels.push(require(`@/assets/images/client/exam/product-show-img${i + 1}.png`));
+                console.log(this.topCarousels)
+            }*/
         },
         beforeDestroy() {
         },