考试平台新增产品体验

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

@@ -274,6 +274,30 @@
         div{width:inherit;height:inherit;background-position-x: center;background-repeat: no-repeat;}
         .free-trial-default-btn{position: absolute;top:260px;left: 50%;margin-left: -119px;}
       }
+
+      /* 产品体验*/
+      .platform-products-experience{
+        p{font-size: 20px;line-height: 20px;text-align: center;margin: 30px 0 42px;}
+        .experience-ul-box{
+          margin: 0 -16px;
+          li{
+            width:25%;display: inline-block;text-align: center;font-size: 16px;
+            div{margin: 0 16px;padding:32px 18px;box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;border-radius: 10px;position: relative}
+            i{display: inline-block;width: 46px;height: 46px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;}
+            h5{font-size: 22px;color: rgb(16, 16, 16);margin-bottom: 24px;}
+            p{font-size: 16px;padding: 0;margin: 0;color: #101010;line-height: 26px;}
+            a{width: 180px;height: 40px;line-height: 40px;display: inline-block;margin-top: 24px;text-align: center;background-color: #3e7ce7;
+              border-color: rgba(255, 0, 0, 0);border-width: 1px;border-style: solid;color: rgb(255, 255, 255);border-radius:4px;font-weight: normal;cursor: pointer}
+            span{display: block;transition: 0.5s;position: absolute;top: 0;bottom: 305px;left: 0;right: 0;overflow: hidden;}
+            em{width:180px;height:180px;display: block;margin: 24px auto;background-image:url("~static/images/client/exam/exam-code-img.png")}
+          }
+          li:nth-child(1) i{background-image:url("~static/images/client/exam/exam-tel-icon.png")}
+          li:nth-child(2) i{background-image:url("~static/images/client/exam/exam-pc-icon.png")}
+          li:nth-child(3) i{background-image:url("~static/images/client/exam/exam-sz-icon.png")}
+          li:nth-child(4) i{background-image:url("~static/images/client/exam/exam-sx-icon.svg")}
+        }
+      }
+
       /* 产品优势 */
       .platform-products-services{
           li:not(:last-child){border-bottom:1px solid #eee; }

pages/examsystem/index.vue

@@ -7,6 +7,17 @@
         <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/exam/exam-banner-background.png`)})`}"></div>
         <a rel="nofollow" class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
       </div>
+      <!--  产品体验 -->
+      <div class="platform-products-experience client-container">
+        <h4 class="client-title">产品体验</h4>
+        <p>无需注册，即可免费体验麦塔在线考试系统</p>
+        <ul class="experience-ul-box">
+          <li><div><i></i><h5>手机学员端</h5><p>用手机扫描二维码</p><p>考生30秒体验答卷</p><a @mouseenter="enterCode" @mouseleave="leaveCode" style="cursor: default">扫码体验</a><span ref="codeBtn"><em></em></span></div></li>
+          <li><div><i></i><h5>电脑学员端</h5><p>支持市面各种主流浏览器</p><p>支持十万量级的考试并发</p><a href="https://youkeksc.mtavip.com/c/Index" target="_blank">立即体验</a></div></li>
+          <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a href="https://youkeksa.mtavip.com/a/login" target="_blank">后台体验</a></div></li>
+          <li><div><i></i><h5>更新日志</h5><p>麦塔想您所想，不止于功能</p><p>我们一直在更新迭代</p><a href="https://youkeksa.mtavip.com/a/login" target="_blank">查看日志</a></div></li>
+        </ul>
+      </div>
       <!--  产品优势 -->
       <div class="platform-products-services">
         <h4 class="client-title">产品优势</h4>
@@ -188,6 +199,16 @@
     },
     computed:   {},
     methods:    {
+      // 鼠标移入
+      enterCode(){
+        this.$refs.codeBtn.style.bottom ='90px';
+      },
+
+      // 鼠标移出
+      leaveCode(){
+        this.$refs.codeBtn.style.bottom ='305px';
+      },
+
       clickBanner(data){
         if(data){
           window.open(data)

static/images/client/exam/exam-sx-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="80" height="80" class="svg-icon" style="fill: rgb(0, 64, 151);"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"></path></svg>