考试系统响应式页面开发

assets/scss/cus-client/cus-client-common.scss

@@ -642,7 +642,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 }
 
 
-// 麦塔栅格
+/********************************* 麦塔栅格**********************************/
 // 大于768的隐藏
   @media screen and (min-width: 769px) {
     .mta-hidden-sm{display: none!important;}
@@ -658,3 +658,39 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
       .el-message__icon:before{font-size: 50px;}
     }
   }
+
+/********************************* 麦塔移动端组件**********************************/
+@media (max-width: 768px) {
+  //  swiper
+  .experience-swiper-box {
+    position: relative;
+    // swiper--div
+    .swiper-slide {width: 100%;}
+
+    .swiper-pagination-style {
+      width: 100px;position: absolute;bottom: 66px;left: 50%;margin-left: -42px;z-index: 99;
+
+      // 小圆点
+      .my-bullet-swiper {width: 10px;height: 10px;border-radius: 5px;display: inline-block;background: rgba(0, 102, 204, 0.2);margin-right: 14px;}
+
+      // 分页active
+      .my-bullet-active-swiper {background: rgb(0, 102, 204)}
+    }
+
+    // swiper 内容区
+    .experience-content-box {
+      height: 243px;display: flex;flex-direction: column;align-items: center;justify-content: center;
+      margin: 5px 4% 40px;box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;text-align: center;padding: 20px 0;
+
+      i {width: 64px;height: 64px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;display: inline-block;flex-shrink: 0;}
+      h5 {font-weight: 700;font-size: 16px;color: rgb(16, 16, 16);margin-bottom: 30px;}
+      p {font-weight: 400;font-size: 14px;color: rgb(16, 16, 16);margin: 6px 0;}
+      a {width: 122px;height: 35px;line-height: 35px;background-color: rgb(0, 102, 204);color: rgb(255, 255, 255);border-radius: 5px;font-size: 14px;
+        padding: 0;text-align: center;display: inline-block;margin-top: 16px;
+      }
+    }
+
+    // swiper 提示
+    .experience-swiper-tip {font-weight: 400;font-size: 14px;color: rgb(96, 96, 96);text-align: center;margin: 0 0 42px;}
+  }
+}

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

@@ -407,7 +407,7 @@
 
       /* 产品体验*/
       .platform-products-experience{
-        p{font-size: 20px;line-height: 20px;text-align: center;margin: 30px 0 42px;}
+        >p{font-size: 20px;line-height: 20px;text-align: center;margin: 30px 0 42px;}
         .experience-ul-box{
           margin: 0 -16px;text-align: center;
           li{
@@ -451,16 +451,16 @@
             h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin: 12px 0 8px 0;}
             p{@include setFontStyle(-6);height:66px;line-height: 22px;color: rgba(0,0,0,0.65);@include multi-line-ellipsis(3);}
           }
-          li:nth-child(1){i{background-image:url("~static/images/client/exam/product-function-icon1.png");}}
-          li:nth-child(2){i{background-image:url("~static/images/client/exam/product-function-icon2.png");}}
-          li:nth-child(3){i{background-image:url("~static/images/client/exam/product-function-icon3.png");}}
-          li:nth-child(4){i{background-image:url("~static/images/client/exam/product-function-icon4.png");}}
-          li:nth-child(5){i{background-image:url("~static/images/client/exam/product-function-icon5.png");}}
-          li:nth-child(6){i{background-image:url("~static/images/client/exam/product-function-icon6.png");}}
-          li:nth-child(7){i{background-image:url("~static/images/client/exam/product-function-icon7.png");}}
-          li:nth-child(8){i{background-image:url("~static/images/client/exam/product-function-icon8.png");}}
-          li:hover{div{box-shadow: 0 2px 4px 0 #D4DBFF;border-radius: 8px;cursor: default}}
         }
+        .product-function-box li:nth-child(1) i,.product-function-icon1{background-image:url("~static/images/client/exam/product-function-icon1.png");}
+        .product-function-box li:nth-child(2) i,.product-function-icon2{background-image:url("~static/images/client/exam/product-function-icon2.png");}
+        .product-function-box li:nth-child(3) i,.product-function-icon3{background-image:url("~static/images/client/exam/product-function-icon3.png");}
+        .product-function-box li:nth-child(4) i,.product-function-icon4{background-image:url("~static/images/client/exam/product-function-icon4.png");}
+        .product-function-box li:nth-child(5) i,.product-function-icon5{background-image:url("~static/images/client/exam/product-function-icon5.png");}
+        .product-function-box li:nth-child(6) i,.product-function-icon6{background-image:url("~static/images/client/exam/product-function-icon6.png");}
+        .product-function-box li:nth-child(7) i,.product-function-icon7{background-image:url("~static/images/client/exam/product-function-icon7.png");}
+        .product-function-box li:nth-child(8) i,.product-function-icon8{background-image:url("~static/images/client/exam/product-function-icon8.png");}
+        .product-function-box li:hover{div{box-shadow: 0 2px 4px 0 #D4DBFF;border-radius: 8px;cursor: default}}
       }
 
       /* 应用场景 */
@@ -481,24 +481,92 @@
           }
         }
         li:nth-child(1){
-          .application-scenarios-img {
-            background-image: url("~static/images/client/exam/application-scenarios-img1.png");
-          }
+          .application-scenarios-img {background-image: url("~static/images/client/exam/application-scenarios-img1.png");}
           .application-scenarios-content{background: #ffbf00;}
         }
         li:nth-child(2){
-          .application-scenarios-img {
-            background-image: url("~static/images/client/exam/application-scenarios-img2.png");
-          }
+          .application-scenarios-img {background-image: url("~static/images/client/exam/application-scenarios-img2.png");}
           .application-scenarios-content{background: #3799db;}
         }
         li:nth-child(3){
-          .application-scenarios-img {
-            background-image: url("~static/images/client/exam/application-scenarios-img3.png");
-          }
+          .application-scenarios-img {background-image: url("~static/images/client/exam/application-scenarios-img3.png");}
           .application-scenarios-content{background: #63ba86;}
         }
       }
+    @media (max-width: 768px){
+      /* 网站banner */
+      .client-platform-banner{
+        height: 150px;
+        div{background-size: cover;}
+        .free-trial-default-btn{top: 90px;margin-left: -61px;}
+      }
+
+      // 产品体验
+      .platform-products-experience{
+        .sjxyd-icon {background-image: url("~static/images/client/exam/exam-tel-icon.png")}
+        .dnxyd-icon {background-image: url("~static/images/client/exam/exam-pc-icon.png")}
+        .dngld-icon {background-image: url("~static/images/client/exam/exam-sz-icon.png")}
+        .skrz-icon {background-image: url("~static/images/client/exam/exam-sx-icon.svg")}
+        >p{font-weight: 400;font-size: 14px;color: rgba(85, 85, 85, 1);margin: 24px 0 16px;}
+      }
+
+      // 产品优势
+      .platform-products-services{
+        li:not(:last-child) {border: 0;}
+        .products-services-content div{text-align: center;margin-bottom: 40px;}
+      }
+
+      // 产品功能
+      .platform-product-function{
+        padding-bottom: 16px;
+        // swiper
+        .experience-swiper-box{
+          // swiper 内容区域
+          .experience-content-box{
+            height:328px;margin: 16px 4% 20px;padding: 16px 16px 46px;box-sizing: border-box;box-shadow: rgb(170, 209, 249) 0 0 6px -1px;
+            i{width: 150px;height: 122px;}
+            h5{width: 100%;text-align: left;margin-bottom: 12px;}
+            p{text-align: justify;line-height: 24px;margin: 0;@include multi-line-ellipsis(4);}
+          }
+          // 分页
+          .swiper-pagination-style {width: 200px;margin-left: -90px;bottom: 50px;}
+          // 左右滑动
+          .experience-swiper-tip{margin: 0}
+        }
+      }
+
+      // 应用场景
+      .platform-application-scenarios{
+        padding-bottom: 16px;
+        // swiper
+        .experience-swiper-box{
+          margin-top: 16px;
+          .experience-content-box{
+            height: 295px;box-shadow:none;padding: 16px;box-sizing: border-box;margin: 0 4% 40px;
+            h5{margin-bottom: 12px;color: #fff}
+            p{text-align: justify;line-height: 24px;margin: 0;@include multi-line-ellipsis(45);color: #fff}
+          }
+          .scenarios-gwks-box{
+            background-color: #ffbf00;
+            i{background-image: url("~static/images/client/exam/application-scenarios-img1.png");}
+          }
+          .scenarios-dxjs-box{
+            background-color: #3799db;
+            i{background-image: url("~static/images/client/exam/application-scenarios-img2.png");}
+          }
+          .scenarios-zgks-box{
+            background-color: #63ba86;
+            i{background-image: url("~static/images/client/exam/application-scenarios-img3.png");}
+          }
+          // 分页
+          .swiper-pagination-style {width: 76px;margin-left: -30px;bottom:25px;}
+          // 左右滑动
+          .experience-swiper-tip{margin: 0}
+
+        }
+
+      }
+    }
   }
 
   /********  describe: 培训平台--图片（和考试默认图片不同） author: TX  date:2020-08-14  ********/
@@ -1208,6 +1276,11 @@
     .course-develop-input-code{width: calc(100% - 122px);}
     .course-develop-code-btn.el-button{width:110px;box-sizing:border-box;padding: 12px;margin-left: 8px;background-color: rgb(0, 102, 204);color: #fff;}
 
+    // 公司名称
+    .dialog-input-company{
+      .el-form-item__content{display: grid;}
+    }
+
     // 表单按钮
     .form-blue-btn,.form-border-btn{
        width: 100%;height: 50px;line-height: 50px;color: rgb(255, 255, 255);border-radius: 5px;@include setFontStyle(-4);text-align: center;border: 1px solid transparent;
@@ -1218,6 +1291,17 @@
 
     // 咨询电话
     .course-develop-tel{display:block;text-align: center;margin: 60px 0;font-weight: 700;@include setFontStyle(-2);color: #101010;}
+
+    // 产品
+    .dialog-input-company{text-align: center;padding: 0;}
+  }
+
+  /********  describe: 注册页面--手机  author: TX  date:2021-08-06  ********/
+  .register-phone-page{
+    // 标题
+    .course-develop-title{font-size: 20px;}
+    // 咨询电话
+    .course-develop-tel{margin: 46px 0;}
   }
 }
 

pages/examsystem/index.vue

@@ -5,13 +5,13 @@
       <!-- 考试平台页 banner栏 -->
       <div class="client-platform-banner">
         <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>
+        <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
       </div>
       <!--  产品体验 -->
       <div class="platform-products-experience client-container">
         <h4 class="client-title">产品体验</h4>
         <p>无需注册，即可免费体验麦塔在线考试系统</p>
-        <ul class="experience-ul-box">
+        <ul class="experience-ul-box mta-hidden-xs">
           <li>
             <div @mouseenter="enterCode" @mouseleave="leaveCode"><i></i>
               <h5>手机学员端</h5>
@@ -26,8 +26,53 @@
           <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a @click="adminKsTy">后台体验</a></div></li>
           <li><div><i></i><h5>更新日志</h5><p>麦塔想您所想，不止于功能</p><p>我们一直在更新迭代</p><a  class="client-default-Btn" @click="goCheckLog">查看日志</a></div></li>
         </ul>
+        <!-- 手机轮播 -->
+        <div class="experience-swiper-box mta-hidden-sm">
+          <div v-swiper:mySwiper="swiperOption" class="swiper-container">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="sjxyd-icon"></i>
+                  <h5>手机学员端</h5>
+                  <p>用手机扫描二维码，考生30秒体验答卷</p>
+                  <a style="cursor: default">扫码体验</a>
+                </div>
+              </div>
+              <div class="swiper-slide">
+                <div class="experience-content-box">
+                  <i  class="dnxyd-icon"></i>
+                  <h5>电脑学员端</h5>
+                  <p>支持市面各种主流浏览器</p>
+                  <p>支持十万量级的考试并发</p>
+                  <a @click="clientKsTy">立即体验</a>
+                </div>
+              </div>
+              <div class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="dngld-icon"></i>
+                  <h5>电脑管理端</h5>
+                  <p>欢迎体验麦塔系统后台</p>
+                  <p>三步轻松组织一场考试</p>
+                  <a @click="adminKsTy">后台体验</a></div>
+              </div>
+              <div class="swiper-slide">
+                <div class="experience-content-box">
+                  <i class="skrz-icon"></i>
+                  <h5>更新日志</h5>
+                  <p>麦塔想您所想，不止于功能</p>
+                  <p>我们一直在更新迭代</p>
+                  <a  class="client-default-Btn" @click="goCheckLog">查看日志</a>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-pagination swiper-pagination-style"></div>
+            <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+          </div>
+        </div>
       </div>
-      <!--  产品优势 -->
+
+
+
       <div class="platform-products-services">
         <h4 class="client-title">产品优势</h4>
         <ul>
@@ -39,7 +84,7 @@
                 <h5>良好高并发性和访问安全性</h5>
                 <i></i>
                 <p>采用的运行稳定、安全性很高的JAVA语言开发；拥有强大的考试并发负载能力，支持万人以上考生同时在线考试；分布式微服务架构、开放、安全、高能、高可靠的服务调用； 为企业快速、灵活构建大规模分布式服务应用提供基础；</p>
-                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
+                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
               </div>
             </div>
             </div>
@@ -52,7 +97,7 @@
                 <h5>严格的考试监控防作弊功能</h5>
                 <i></i>
                 <p>试题乱序、选项乱序、禁止右键复制粘贴；人脸识别登录，防止替考；考试过程禁止切屏，解决离开考试界面的问题；考试过程中头像抓拍和视频监控防止作弊</p>
-                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
+                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
               </div>
             </div>
             </div>
@@ -65,7 +110,7 @@
                 <h5>PC移动支持多终端，随时随地考试</h5>
                 <i></i>
                 <p>支持PC使用，更支持移动端H5使用，还可以支持微信绑定答题，学员用手机扫描二维码，轻松答题支持专属APP的定制</p>
-                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
+                <div><a rel="nofollow" class="client-default-Btn"  @click="FreeTrial">免费试用</a></div>
               </div>
             </div>
             </div>
@@ -78,7 +123,7 @@
                 <h5>丰富的考试管理功能</h5>
                 <i></i>
                 <p>多层级组织架构快速搭建，多级权限管理人员设置；支持多种题型，单选、多选、判断、填空、简答、阅读理解、公式题、音频题、图片题、视频题，同时支持word和Excel批量导入题库；支持随机抽取试题，每个考生题目随机生成；多种考试参数设置：答题倒计时，答卷限时，成绩发布，选择按人员、部门、职位发布考试。支持学员证书和积分获取，支持刷题模式的练习管理。</p>
-                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
+                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</a></div>
               </div>
             </div>
             </div>
@@ -91,7 +136,7 @@
       <div class="platform-product-function">
         <div class="client-container">
           <h4 class="client-title">产品功能</h4>
-          <ul class="product-function-box">
+          <ul class="product-function-box mta-hidden-xs">
             <li><div><i></i><h5>用户权限管理</h5><p>多层级组织架构和角色权限的快速搭建，可分层独立管理，解决大型组织的复杂培训管理需求，支持和用户的OA、HR、ERP、教务、微信、钉钉等系统对接单点登录和用户信息同步</p></div></li>
             <li><div><i></i><h5>考试防作弊管理</h5><p>支持人脸识别登录，防止替考；考试过程禁止切屏，解决离开考试界面的问题；考试过程中头像抓拍和视频监控防止作弊</p></div></li>
             <li><div><i></i><h5>多种组卷模式</h5><p>支持固定选题组卷、按比例随机抽题组卷，满足各种组卷需求；整卷答题适用于正规考试，逐题模式适用于竞赛闯关考试</p></div></li>
@@ -101,7 +146,64 @@
             <li><div><i></i><h5>多维度统计分析</h5><p>从用户、考试、成绩、试题、排名、机构等层面多维度的统计系统数据</p></div></li>
             <li><div><i></i><h5>性能稳定数据安全</h5><p>企业级技术框架，保证大并发考试的稳定；数据备份恢复，保障安全性</p></div></li>
           </ul>
-          <a rel="nofollow" class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
+          <!-- 手机轮播 -->
+          <div class="experience-swiper-box mta-hidden-sm">
+            <div v-swiper:mySwiperGn="swiperOptionGn" class="swiper-container">
+              <ul class="swiper-wrapper">
+                <li class="swiper-slide">
+                  <div class="experience-content-box">
+                    <i class="product-function-icon1"></i><h5>用户权限管理</h5>
+                    <p>多层级组织架构和角色权限的快速搭建，可分层独立管理，解决大型组织的复杂培训管理需求，支持和用户的OA、HR、ERP、教务、微信、钉钉等系统对接单点登录和用户信息同步</p>
+                  </div>
+                </li>
+                <li class="swiper-slide">
+                  <div class="experience-content-box">
+                    <i class="product-function-icon2"></i><h5>考试防作弊管理</h5>
+                    <p>支持人脸识别登录，防止替考；考试过程禁止切屏，解决离开考试界面的问题；考试过程中头像抓拍和视频监控防止作弊</p>
+                  </div>
+                </li>
+                <li class="swiper-slide">
+                  <div class="experience-content-box">
+                    <i class="product-function-icon3"></i><h5>多种组卷模式</h5>
+                    <p>支持固定选题组卷、按比例随机抽题组卷，满足各种组卷需求；整卷答题适用于正规考试，逐题模式适用于竞赛闯关考试</p>
+                  </div>
+                </li>
+                <li class="swiper-slide">
+                  <div class="experience-content-box">
+                    <i class="product-function-icon4"></i><h5>丰富的题库管理</h5>
+                    <p>可以按科目多维度建设题库，支持单选、多选、判断题、填空题、简答题多种题型，同时支持word、Excel批量上传试题、图片，公式，一键轻松导入</p>
+                  </div>
+                </li>
+                <li class="swiper-slide">
+                  <div class="experience-content-box">
+                    <i class="product-function-icon5"></i><h5>智能考试安排</h5>
+                    <p>几十种考试参数设置，全方位把控考试细节，适应各种考试场景，考试安排智能化，随时随地，快速考试</p>
+                  </div>
+                </li>
+                <li class="swiper-slide">
+                  <div class="experience-content-box">
+                    <i class="product-function-icon6"></i><h5>个性化定制</h5>
+                    <p>定义主题背景、品牌、logo，搭建您的专属在线考试平台</p>
+                  </div>
+                </li>
+                <li class="swiper-slide">
+                  <div class="experience-content-box">
+                    <i class="product-function-icon7"></i><h5>多维度统计分析</h5>
+                    <p>从用户、考试、成绩、试题、排名、机构等层面多维度的统计系统数据</p>
+                  </div>
+                </li>
+                <li class="swiper-slide">
+                  <div class="experience-content-box">
+                    <i class="product-function-icon8"></i><h5>性能稳定数据安全</h5>
+                    <p>企业级技术框架，保证大并发考试的稳定；数据备份恢复，保障安全性</p>
+                  </div>
+                </li>
+              </ul>
+              <div class="swiper-pagination swiper-pagination-style"></div>
+              <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+            </div>
+          </div>
+          <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
         </div>
       </div>
 
@@ -110,7 +212,7 @@
       <div class="platform-application-scenarios">
         <div class="client-container">
           <h4 class="client-title">应用场景</h4>
-          <ul class="application-scenarios-box">
+          <ul class="application-scenarios-box mta-hidden-xs">
             <li>
               <div class="application-scenarios-content">
                 <div class="application-scenarios-img"></div>
@@ -133,12 +235,39 @@
               </div>
             </li>
           </ul>
-          <a rel="nofollow" class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
+          <!-- 手机轮播 -->
+          <div class="experience-swiper-box mta-hidden-sm">
+            <div v-swiper:mySwiperCj="swiperOptionCj" class="swiper-container">
+              <ul class="swiper-wrapper">
+                <li class="swiper-slide">
+                  <div class="experience-content-box scenarios-gwks-box">
+                    <i class="product-function-icon1"></i><h5>岗位考试</h5>
+                    <p>无论传统的培训还是新型的在线培训，企业都需要利用考核来进行培训效果评估，可以实现人才岗位胜任力测评、按需培训、绩效考核等功能，为领导者对员工素质进行评价和分析提供有力的数据支持。</p>
+                  </div>
+                </li>
+                <li class="swiper-slide">
+                  <div class="experience-content-box scenarios-dxjs-box">
+                    <i class="product-function-icon2"></i><h5>大型竞赛</h5>
+                    <p>多种组卷、考试模式，可以覆盖大多数竞赛场景，报名注册只需简单一步就搞定，无中间流程，企业还可自由定制证书，合格后进行发放，降低使用成本，规范、快捷、高效，万人同考无压力。</p>
+                  </div>
+                </li>
+                <li class="swiper-slide">
+                  <div class="experience-content-box scenarios-zgks-box">
+                    <i class="product-function-icon3"></i><h5>资格考试</h5>
+                    <p>不限次发布考试，特殊题型可使用拍照上传功能，考生后台记录历史成绩，通过考试分析及时了解考生知识掌握情况，在线考试能突破时间空间限制，有利于组织大规模的考试，提高教学考核方式的灵活性。</p>
+                  </div>
+                </li>
+              </ul>
+              <div class="swiper-pagination swiper-pagination-style"></div>
+              <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+            </div>
+          </div>
+          <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
         </div>
       </div>
 
       <!-- 新闻资讯 -->
-      <div class="platform-news-information">
+      <div class="platform-news-information mta-hidden-xs">
         <div class="client-container">
           <h4 class="client-title">新闻资讯</h4>
           <ul>
@@ -162,6 +291,8 @@
 </template>
 
 <script>
+  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
+  Swiper.use([Navigation, Pagination,Autoplay]);
   export default {
     name:       'examsystem',
     layout:'templateB',
@@ -187,12 +318,69 @@
     },
     data() {
       return {
+        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
         advantagesImg1:  require(`~/static/images/client/exam/product-advantages-img1.png`),
         advantagesImg2:  require(`~/static/images/client/exam/product-advantages-img2.png`),
         advantagesImg3:  require(`~/static/images/client/exam/product-advantages-img3.png`),
         advantagesImg4:  require(`~/static/images/client/exam/product-advantages-img4.png`),
         youkeFlag:false,// 控制游客系统是否维护中
         systemMaintainDl:false,// 系统维护弹窗
+        swiperData: [
+          { imgUrl: require(`~/static/images/client/index/index-products-kaoshi.png`)},
+          { imgUrl: require(`~/static/images/client/index/index-products-peixun.png`) },
+          { imgUrl: require(`~/static/images/client/index/index-products-kejian.png`) },
+        ],
+        swiperOption: {
+          pagination: {
+            el: '.swiper-pagination',
+            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
+            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
+            clickable: true, // 点击当前滑块切换到对应的轮播图片
+          },
+          autoplay: {
+            delay: 100000,
+          },
+          paginationClickable: true,
+          speed: 800,
+          loop: true,
+          observer: true,
+          observeParents: true,
+          autoplayDisableOnInteraction: false,
+        },
+        swiperOptionGn: {
+          pagination: {
+            el: '.swiper-pagination',
+            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
+            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
+            clickable: true, // 点击当前滑块切换到对应的轮播图片
+          },
+          autoplay: {
+            delay: 100000,
+          },
+          paginationClickable: true,
+          speed: 800,
+          loop: true,
+          observer: true,
+          observeParents: true,
+          autoplayDisableOnInteraction: false,
+        },
+        swiperOptionCj: {
+          pagination: {
+            el: '.swiper-pagination',
+            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
+            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
+            clickable: true, // 点击当前滑块切换到对应的轮播图片
+          },
+          autoplay: {
+            delay: 100000,
+          },
+          paginationClickable: true,
+          speed: 800,
+          loop: true,
+          observer: true,
+          observeParents: true,
+          autoplayDisableOnInteraction: false,
+        },
       };
     },
     head(){
@@ -212,6 +400,31 @@
     },
     computed:   {},
     methods:    {
+      // 免费试用
+      FreeTrial(type){
+        var registerType = type;
+        this.getSystemWidth();
+        if(this.SystemWidthFlag){
+          window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
+        }else{
+          window.open('https://cdnks.mtavip.com/a/register?flug=1')
+
+        }
+      },
+      // 判断是否为移动端
+      getSystemWidth(){
+        var browserWidth=document.documentElement.clientWidth;
+        if(browserWidth <= 768){
+          this.SystemWidthFlag = true;
+        }else{
+          this.SystemWidthFlag = false;
+        }
+      },
+      // 按钮
+      testFun(){
+        var width=document.documentElement.clientWidth;
+        console.log(width,'this.windowHeight(document.documentElement.clientHeight);')
+      },
       // 考试学员端体验
       clientKsTy(){
         if(this.youkeFlag) {
@@ -273,11 +486,10 @@
       });
     },
     mounted() {
+      this.getSystemWidth();
     },
     beforeDestroy() {
     },
   };
 </script>
-<style>
 
-</style>