体验中心页面开发

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

@@ -1215,6 +1215,11 @@
        span{font-size: 52px;color: #ffff00}
        a{width: 355px;height: 60px;line-height: 60px;text-align: center;background: #ff4d4d;border-radius: 4px;display: inline-block;color: #fff;}
      }
+    @media (max-width: 768px){
+      /* 网站banner */
+      .client-platform-banner div{background-position-x: 42%;}
+      .experience-swiper-box .swiper-pagination-style {width: 80px;margin-left: -30px;}
+    }
   }
   // 立即注册弹窗
   .register-now-dialog{

pages/tiyanCenter/index.vue

@@ -8,7 +8,7 @@
     <div class="platform-products-experience client-container">
       <h4 class="client-title">麦塔在线考试系统体验版</h4>
       <p>简单好用的SaaS考试系统</p>
-      <ul class="experience-ul-box">
+      <ul class="experience-ul-box mta-hidden-xs">
         <li>
           <div @mouseenter="enterCodeKs" @mouseleave="leaveCodeKs">
             <i></i><h5>手机学员端</h5>
@@ -19,15 +19,49 @@
             <div ref="codeBtnKs" v-if="!youkeFlag">系统升级中...</div>
           </div>
         </li>
-        <li><div><i></i><h5>电脑学员端</h5><p>支持市面各种主流浏览器</p><p>支持十万量级的考试并发</p><a @click="clientKsTy">立即体验</a></div></li>
-        <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 @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
+        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">后台体验</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" @click="FreeTrial(1)">立即体验</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="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</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="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">后台体验</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-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="enterCodePx" @mouseleave="leaveCodePx">
             <i></i><h5>手机学员端</h5>
@@ -38,13 +72,46 @@
             <div ref="codeBtnPx" v-if="!youkeFlag">系统升级中...</div>
           </div>
         </li>
-        <li><div><i></i><h5>电脑学员端</h5><p>学练考评一站式培训平台</p><p>支持市面各种主流浏览器</p><a @click="clientPxTy">立即体验</a></div></li>
-        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a @click="adminPxTy">后台体验</a></div></li>
+        <li><div><i></i><h5>电脑学员端</h5><p>学练考评一站式培训平台</p><p>支持市面各种主流浏览器</p><a @click="pxTyBtn('https://youkepxc.mtavip.com/c/youke')">立即体验</a></div></li>
+        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a @click="pxTyBtn('https://youkepxa.mtavip.com/a/youke')">后台体验</a></div></li>
       </ul>
+      <div class="experience-swiper-box mta-hidden-sm">
+        <div v-swiper:mySwiperPx="swiperOptionPx" class="swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <div class="experience-content-box">
+                <i class="sjxyd-icon"></i>
+                <h5>手机学员端</h5>
+                <p>点击立即体验按钮，随时随地想学就学</p>
+                <a style="cursor: default" @click="FreeTrial(2)">立即体验</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="pxTyBtn('https://youkepxc.mtavip.com/c/youke')">立即体验</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="pxTyBtn('https://youkepxa.mtavip.com/a/youke')">后台体验</a></div>
+            </div>
+          </div>
+          <div class="swiper-pagination swiper-pagination-style"></div>
+          <p class="experience-swiper-tip">←左右滑动查看更多→</p>
+        </div>
+      </div>
     </div>
 
     <!-- 企业考培立即注册-->
-    <div class="tiyan-center-register">
+    <div class="tiyan-center-register mta-hidden-xs">
       <div class="client-container">
         <h5>企业考培,就用麦塔</h5>
         <p>现在注册立享<span>30人</span>纯免费版本<span>3年</span>使用权限</p>
@@ -74,6 +141,8 @@
 </template>
 
 <script>
+  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
+  Swiper.use([Navigation, Pagination,Autoplay]);
   export default {
     name:     'tiyanCenter',
     layout:   'templateB',
@@ -88,6 +157,38 @@
         registerDl:false,
         youkeFlag:false,// 控制游客系统是否维护中
         systemMaintainDl:false,// 系统维护弹窗
+        swiperOption: {
+          pagination: {
+            el: '.swiper-pagination',
+            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
+            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
+            clickable: true, // 点击当前滑块切换到对应的轮播图片
+          },
+          autoplay: {
+            delay: 5000,
+          },
+          paginationClickable: true,
+          speed: 800,
+          loop: true,
+          observer: true,
+          observeParents: true,
+        },
+        swiperOptionPx: {
+          pagination: {
+            el: '.swiper-pagination',
+            bulletClass: 'my-bullet-swiper', // 自定义设置默认类名
+            bulletActiveClass: 'my-bullet-active-swiper', // 自定义滑块活跃类名
+            clickable: true, // 点击当前滑块切换到对应的轮播图片
+          },
+          autoplay: {
+            delay: 5000,
+          },
+          paginationClickable: true,
+          speed: 800,
+          loop: true,
+          observer: true,
+          observeParents: true,
+        },
       };
     },
     head(){
@@ -103,36 +204,74 @@
     },
     computed: {},
     methods:  {
-      // 考试学员端体验
-      clientKsTy(){
-        if(this.youkeFlag) {
-          window.open("https://youkeksc.mtavip.com/c/youke");
+      // 判断是否为移动端
+      getSystemWidth(){
+        var browserWidth=document.documentElement.clientWidth;
+        if(browserWidth <= 768){
+          this.SystemWidthFlag = true;
         }else{
-          this.systemMaintainDl = true;
+          this.SystemWidthFlag = false;
         }
       },
-      // 考试管理端体验
-      adminKsTy(){
-        if(this.youkeFlag) {
-        window.open("https://youkeksa.mtavip.com/a/youke");
+      // 免费试用
+      FreeTrial(type){
+        var registerType = type;
+        this.getSystemWidth();
+        if(this.youkeFlag){
+          if(this.SystemWidthFlag){
+            if(registerType===1) {
+              window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
+            }else {
+              window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=2')
+            }
+          }else{
+            if(registerType===1){
+              window.open('https://cdnks.mtavip.com/a/register?flug=1')
+            }else{
+              window.open('https://cdnks.mtavip.com/a/register?flug=2')
+            }
+
+          }
         }else{
-          this.systemMaintainDl = true;
+          // 升级中
+          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
         }
       },
-      // 培训学员端体验
-      clientPxTy(){
+      // 考试体验按钮
+      KsTyBtn(btnUrl){
+        this.getSystemWidth();
         if(this.youkeFlag) {
-        window.open("https://youkepxc.mtavip.com/c/youke");
+          if(this.SystemWidthFlag){
+            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
+          }else {
+            window.open(btnUrl);
+          }
         }else{
+          if(this.SystemWidthFlag){
+            // 升级中
+            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
+          }else{
             this.systemMaintainDl = true;
+          }
         }
       },
-      // 培训管理端体验
-      adminPxTy(){
+      // 培训学员端体验
+      pxTyBtn(btnUrl){
+        this.getSystemWidth();
         if(this.youkeFlag) {
-        window.open("https://youkepxa.mtavip.com/a/youke");
+          if(this.SystemWidthFlag){
+            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
+          }else {
+            window.open(btnUrl);
+          }
         }else{
-          this.systemMaintainDl = true;
+          if(this.SystemWidthFlag){
+            // 升级中
+            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
+          }else{
+            this.systemMaintainDl = true;
+          }
+
         }
       },
       // 考试鼠标移入
@@ -178,6 +317,7 @@
       });
     },
     mounted() {
+      this.getSystemWidth();
     },
     beforeDestroy() {
     },