产品优势

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

@@ -375,7 +375,8 @@
       height: 400px;
       background-image: url("~@/assets/images/client/exam/" + "exam-banner-background.png");
       background-position-x: center;
-      // banner文字区域
+
+      /* banner文字区域 */
       .exam-banner-container{
         width:500px;
         display: inline-block;
@@ -385,6 +386,18 @@
         a{width: 132px;height: 32px;line-height: 32px;display: block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
       }
     }
+
+      /* 产品优势 */
+      .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;}
+        h2{@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;}
+      }
+
+
   }
 
   /********  describe: 关于我们 author: TX  date:2020-08-07  ********/

src/assets/images/client/exam/product-advantages-img1.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="65" viewBox="0 0 64 65">
+  <g fill="none" fill-rule="evenodd" transform="translate(0 1)">
+    <rect width="30" height="5.333" x="22" y="48" fill="#E8ECFF" rx="2.667"/>
+    <circle cx="13.333" cy="50.667" r="13.333" fill="#2B5CFD"/>
+    <circle cx="13.333" cy="50.667" r="8" fill="#E8ECFF"/>
+    <rect width="34" height="5.333" x="16" y="29.333" fill="#E8ECFF" rx="2.667" transform="rotate(-46 33 32)"/>
+    <circle cx="50.667" cy="13.333" r="13.333" fill="#2B5CFD"/>
+    <rect width="30" height="5.333" x="11.333" y="10.667" fill="#E8ECFF" rx="2.667"/>
+    <circle cx="50.667" cy="13.333" r="8" fill="#E8ECFF"/>
+    <circle cx="8" cy="13.333" r="8" fill="#E8ECFF"/>
+    <circle cx="8" cy="13.333" r="4" fill="#7998FF"/>
+    <circle cx="56" cy="50.667" r="8" fill="#E8ECFF"/>
+    <circle cx="56" cy="50.667" r="4" fill="#7998FF"/>
+  </g>
+</svg>

src/assets/images/client/exam/product-advantages-img2.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="65" viewBox="0 0 64 65">
+  <defs>
+    <rect id="考试监控预防作弊-a" width="64" height="64"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(0 1)">
+    <mask id="考试监控预防作弊-b" fill="#fff">
+      <use xlink:href="#考试监控预防作弊-a"/>
+    </mask>
+    <path fill="#2B5CFD" d="M64,66 C64,48.326888 49.673112,34 32,34 C14.326888,34 0,48.326888 0,66" mask="url(#考试监控预防作弊-b)"/>
+    <circle cx="32" cy="26" r="26" fill="#E8ECFF"/>
+    <circle cx="32" cy="34" r="17" fill="#7998FF"/>
+    <circle cx="32" cy="34" r="6" fill="#E8ECFF"/>
+  </g>
+</svg>

src/assets/images/client/exam/product-advantages-img3.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="65" viewBox="0 0 64 65">
+  <g fill="none" fill-rule="evenodd" transform="translate(0 1)">
+    <rect width="64" height="64" fill="#E8ECFF" rx="8"/>
+    <rect width="42" height="3" x="11" y="31" fill="#7998FF" rx="1.5"/>
+    <path stroke="#2B5CFD" stroke-linecap="round" stroke-width="3" d="M44,9 L47,9 C51.418278,9 55,12.581722 55,17 L55,22 M55,45 L55,47 C55,51.418278 51.418278,55 47,55 L45,55 M20,55 L17,55 C12.581722,55 9,51.418278 9,47 L9,45 M9,21 L9,17 C9,12.581722 12.581722,9 17,9 L21,9"/>
+  </g>
+</svg>

src/assets/images/client/exam/product-advantages-img4.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="65" viewBox="0 0 64 65">
+  <g fill="none" fill-rule="evenodd" transform="translate(0 1)">
+    <path fill="#2B5CFD" d="M19.2,3.63797881e-13 L51.2,3.63797881e-13 C58.2692448,3.67828352e-13 64,5.7307552 64,12.8 L64,12.8 L64,12.8 L19.2,12.8 L19.2,3.63797881e-13 Z"/>
+    <path fill="#E8ECFF" d="M17.5167286,3.63797881e-13 L52.8,3.63797881e-13 L52.8,3.63797881e-13 L52.8,54.4832714 C52.8,59.7392155 48.5392155,64 43.2832714,64 L8,64 L8,64 L8,9.51672862 C8,4.26078454 12.2607845,3.66539739e-13 17.5167286,3.63797881e-13 Z"/>
+    <path fill="#7998FF" d="M0,51.2 L43.2,51.2 L43.676574,53.7417281 C44.1556196,56.296638 45.050123,58.7557743 46.3245241,61.0213761 L48,64 L48,64 L8.19174999,64 C6.08749024,64 4.13749472,62.8960444 3.05470345,61.0917517 C1.9003937,59.1682853 1.09775085,57.0546712 0.684346267,54.8498468 L0,51.2 L0,51.2 Z"/>
+    <path fill="#2B5CFD" d="M4.91671455,9.9152239 C6.74822214,8.85762698 9.0903041,9.48500553 10.147901,11.3165131 C10.1479928,11.316672 10.1480845,11.3168309 10.1481762,11.3169898 L20.8,29.7695522 L20.8,29.7695522 L14.1665709,33.6 L3.51474713,15.1474376 C2.45721697,13.3154376 3.08486657,10.9730174 4.91671455,9.9152239 Z"/>
+    <polygon fill="#2B5CFD" points="20 33.6 24 37.6 16 37.6" transform="rotate(149 20 35.6)"/>
+    <rect width="19.2" height="3.2" x="25.6" y="16" fill="#7998FF" rx="1.6"/>
+    <rect width="16" height="3.2" x="28.8" y="27.2" fill="#7998FF" rx="1.6"/>
+    <rect width="28.8" height="3.2" x="16" y="38.4" fill="#7998FF" rx="1.6"/>
+  </g>
+</svg>

src/views/client/examPlatform.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="client-exam-page">
+
         <!-- 考试平台页 banner栏 -->
         <div class="client-exam-banner">
             <div class="client-container">
@@ -11,17 +12,33 @@
                 </div>
             </div>
         </div>
+
+        <!--  产品优势 -->
+        <div class="client-container">
+            <h1 class="client-title">产品优势</h1>
+            <ul class="exam-product-advantages">
+                <li><img :src="advantagesImg1" alt="万人并发运行顺畅"><h2>万人并发运行顺畅</h2><p>拥有强大的考试并发负载能力，支持30万考生同时在线考试</p></li>
+                <li><img :src="advantagesImg2" alt="考试监控预防作弊"><h2>考试监控预防作弊</h2><p>人脸识别匹配，防止替考作弊，切屏强制交卷，防止考生分屏查找答案</p></li>
+                <li><img :src="advantagesImg3" alt="微信答题一扫就考"><h2>微信答题一扫就考</h2><p>学员用手机扫描二维码，考生30秒就能轻松答题</p></li>
+                <li><img :src="advantagesImg4" alt="功能丰富的在线考试"><h2>功能丰富的在线考试</h2><p>强大的题库管理和功能丰富的考试控制功能；随机组卷考试，稳定大并发考试</p></li>
+            </ul>
+        </div>
+
     </div>
 </template>
 
 <script>
     import MtaBreadcrumb    from '@/components/client/common/MtaBreadcrumb.vue';
     export default {
-        name:       'courseDev',
+        name:       'examPlatform',
         props:      {
         },
         data() {
             return {
+                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`),
+                advantagesImg4:  require(`@/assets/images/client/exam/product-advantages-img4.svg`),
             };
         },
         components: {