产品功能

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

@@ -380,7 +380,7 @@
       .exam-banner-container{
         width:500px;
         display: inline-block;
-        h1{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 110px;}
+        h4{@include setFontStyle(40);color: #FFF;letter-spacing: 0;padding-top: 110px;}
         p{@include setFontStyle(0);color: #FFF;margin: 16px 0;}
         em{width:1px;height:16px;display:inline-block;margin: 0 24px;background: #DFE6FE;vertical-align: middle;}
         a{width: 132px;height: 32px;line-height: 32px;display: block;@include setFontStyle(-4);color: #2B5CFD;background: #FFFFFF;text-align:center;border-radius: 4px;}
@@ -393,8 +393,34 @@
         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;}
+        h5{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);}
+      }
+
+      /* 产品功能 */
+      .exam-product-function{
+        background: #F9FAFF;
+        padding-bottom: 32px;
+        // 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("~@/assets/images/client/exam/" + "product-function-icon1.svg");}}
+          li:nth-child(2){i{background-image:url("~@/assets/images/client/exam/" + "product-function-icon2.svg");}}
+          li:nth-child(3){i{background-image:url("~@/assets/images/client/exam/" + "product-function-icon3.svg");}}
+          li:nth-child(4){i{background-image:url("~@/assets/images/client/exam/" + "product-function-icon4.svg");}}
+          li:nth-child(5){i{background-image:url("~@/assets/images/client/exam/" + "product-function-icon5.svg");}}
+          li:nth-child(6){i{background-image:url("~@/assets/images/client/exam/" + "product-function-icon6.svg");}}
+          li:nth-child(7){i{background-image:url("~@/assets/images/client/exam/" + "product-function-icon7.svg");}}
+          li:nth-child(8){i{background-image:url("~@/assets/images/client/exam/" + "product-function-icon8.svg");}}
+          li:hover{div{box-shadow: 0 2px 4px 0 #D4DBFF;border-radius: 8px;cursor: default}}
+        }
       }
 
 

src/assets/images/client/exam/product-function-icon1.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="41" viewBox="0 0 40 41">
+  <g fill="none" fill-rule="evenodd" transform="translate(0 1)">
+    <path fill="#2B5CFD" d="M40,40 C40,28.954305 31.045695,20 20,20 C8.954305,20 0,28.954305 0,40"/>
+    <rect width="1" height="10" x="19" y="27" fill="#E8ECFF" rx=".5"/>
+    <circle cx="20" cy="11" r="11" fill="#E8ECFF"/>
+    <path fill="#E8ECFF" d="M38.9059955,31.942939 C39.9593652,31.279215 40.2886119,29.9180736 39.6513305,28.861643 L38.440161,26.8987433 C37.8194297,25.9187301 36.5501254,25.5465581 35.4821124,26.0314156 C35.3509448,24.8698014 34.3455503,23.9929529 33.1529402,24 L30.8237681,24 C29.598474,23.9970976 28.5803631,24.924944 28.4945959,26.1227132 C27.4028544,25.6000712 26.0845429,25.9876298 25.4666721,27.0128654 L24.302086,28.9985895 C23.6886353,30.0615243 24.0376141,31.4093166 25.0940045,32.057061 C24.0406348,32.720785 23.7113881,34.0819264 24.3486695,35.138357 L25.559839,37.1012567 C26.1805703,38.0812699 27.4498746,38.4534419 28.5178876,37.9685844 C28.6490552,39.1301986 29.6544497,40.0070471 30.8470598,40 L33.1762319,40 C34.401526,40.0029024 35.4196369,39.075056 35.5054041,37.8772868 C36.5971456,38.3999288 37.9154571,38.0123702 38.5333279,36.9871346 L39.697914,35.0014105 C40.3113647,33.9384757 39.9623859,32.5906834 38.9059955,31.942939 Z"/>
+    <circle cx="32" cy="32" r="4" fill="#7998FF"/>
+  </g>
+</svg>

src/views/client/examPlatform.vue

@@ -6,7 +6,7 @@
             <div class="client-container">
                 <!--  banner文字区域 -->
                 <div class="exam-banner-container">
-                    <h1>麦塔在线考试平台</h1>
+                    <h4>麦塔在线考试平台</h4>
                     <p>简约而不简单<em></em>简约而不简单</p>
                     <a>了解详情</a>
                 </div>
@@ -17,13 +17,29 @@
         <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>
+                <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>
         </div>
 
+        <!--  产品功能 -->
+        <div class="exam-product-function">
+            <div class="client-container">
+                <h1 class="client-title">产品功能</h1>
+                <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>
+                    <li><div><i></i><h5>多种组卷模式</h5><p>支持直接选题组卷、按比例随机抽题组卷，满足各种组卷需求；整卷答题适用于正规考试，逐题模式适用于竞赛闯关考试</p></div></li>
+                    <li><div><i></i><h5>丰富的题库管理</h5><p>可以按科目建设题库，支持按照题型的难度，知识点的分类进行管理，纵向横向多维度的题库管理方式</p></div></li>
+                    <li><div><i></i><h5>个性化定制</h5><p>定义主题背景、品牌、logo，搭建您的专属在线考试平台</p></div></li>
+                    <li><div><i></i><h5>批量导题</h5><p>支持单选、多选、不定项选择题、判断题、填空题、问答题多种题型，同时支持word、Excel批量上传试题、图片，公式，一键轻松导入2000+题目</p></div></li>
+                    <li><div><i></i><h5>智能考试安排</h5><p>几十种考试参数设置，全方位把控考试细节，适应各种考试场景，考试安排智能化，随时随地，快速考试</p></div></li>
+                    <li><div><i></i><h5>多维度统计分析</h5><p>从用户、考试、成绩、试题、排名、机构等层面多维度的统计系统数据</p></div></li>
+                </ul>
+            </div>
+        </div>
     </div>
 </template>