nuxtProject/pages/tiyanCenter/index.vue

<template>
  <div class="client-platform-page tiyan-center-page">
    <!-- 体验中心 banner栏 --><!--style="url('/static/images/client/exam/exam-banner-background.png')" -->
    <div class="client-platform-banner">
      <div :style="{backgroundImage: `url(${tiyanCenterImg})`}"></div>
    </div>
    <!--  麦塔在线考试系统体验版 -->
    <div class="platform-products-experience client-container">
      <h4 class="client-title">麦塔在线考试系统体验版</h4>
      <p>简单好用的SaaS考试系统</p>
      <ul class="experience-ul-box mta-hidden-xs">
        <li>
          <div @mouseenter="enterCodeKs" @mouseleave="leaveCodeKs">
            <i></i><h5>手机学员端</h5>
            <p>用手机扫描二维码</p>
            <p>考生30秒体验答卷</p>
            <a style="cursor: default">扫码体验</a>
            <span ref="codeBtnKs" v-if="youkeFlag"><em></em></span>
            <div ref="codeBtnKs" v-if="!youkeFlag">系统升级中...</div>
          </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 mta-hidden-xs">
        <li>
          <div @mouseenter="enterCodePx" @mouseleave="leaveCodePx">
            <i></i><h5>手机学员端</h5>
            <p>用手机扫描二维码</p>
            <p>随时随地想学就学</p>
            <a style="cursor: default">扫码体验</a>
            <span ref="codeBtnPx" v-if="youkeFlag"><em class="px-img-box"></em></span>
            <div ref="codeBtnPx" v-if="!youkeFlag">系统升级中...</div>
          </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 mta-hidden-xs">
      <div class="client-container">
        <h5>企业考培,就用麦塔</h5>
        <p>现在注册立享<span>30人</span>纯免费版本<span>3年</span>使用权限</p>
        <a @click="registerFun">立即注册</a>
      </div>
    </div>
    <!--  立即注册弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="registerDl"
      class="register-now-dialog"
      center>
      <div class="register-now-box">
        <p>企业考培,就用麦塔</p>
        <p>现在注册立享30人纯免费版本3年使用权限</p>
        <div class="system-box">
          <a href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank"><i></i><p>考试系统</p></a>
          <span></span>
          <a href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank"><i></i><p>培训系统</p></a>
        </div>
        <span>免费咨询电话：<span class="tel-code">400-052-2130</span></span>
      </div>
    </el-dialog>
    <!-- 系统维护-->
    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
  </div>
</template>

<script>
  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
  Swiper.use([Navigation, Pagination,Autoplay]);
  export default {
    name:     'tiyanCenter',
    layout:   'templateB',
    async asyncData({ $axios,store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/tiyanCenter');
    },
    data() {
      return {
        // 发展现状img
        tiyanCenterImg: require(`~/static/images/client/tiyanCenter/tiyanCenterImg.png`),
        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(){
      return {
        title: 'SaaS考试系统_麦塔在线考试系统_麦塔在线培训系统体验版',
        meta:  [
          {
            description: '企业考培,就用麦塔,现在注册立享30人纯免费版本3年使用权限.麦塔在线考试系统体验版-简单好用的SaaS考试系统;麦塔在线培训系统体验版-学练考评一站式培训平台。',
            keywords:    'saas考试系统',
          },
        ],
      };
    },
    computed: {},
    methods:  {
      // 判断是否为移动端
      getSystemWidth(){
        var browserWidth=document.documentElement.clientWidth;
        if(browserWidth <= 768){
          this.SystemWidthFlag = true;
        }else{
          this.SystemWidthFlag = false;
        }
      },
      // 免费试用
      FreeTrial(type){
        var registerType = type;
        this.getSystemWidth();
        if(this.youkeFlag){
            if(registerType===1) {
              window.open('https://youkeksc.mtavip.com/kscmdist/#/youke')
            }else {
              window.open('https://youkepxc.mtavip.com/pxcmdist/#/youke')
            }
        }else{
          // 升级中
          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
        }
      },
      // 考试体验按钮
      KsTyBtn(btnUrl){
        this.getSystemWidth();
        if(this.youkeFlag) {
          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;
          }
        }
      },
      // 培训学员端体验
      pxTyBtn(btnUrl){
        this.getSystemWidth();
        if(this.youkeFlag) {
          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;
          }

        }
      },
      // 考试鼠标移入
      enterCodeKs(){
        if(this.youkeFlag){
          this.$refs.codeBtnKs.style.bottom ='90px';
        }else{
          this.$refs.codeBtnKs.style.bottom ='0';
        }

      },

      // 考试鼠标移出
      leaveCodeKs(){
        this.$refs.codeBtnKs.style.bottom ='305px';
      },
      // 培训鼠标移入
      enterCodePx(){
        if(this.youkeFlag){
          this.$refs.codeBtnPx.style.bottom ='90px';
        }else{
          this.$refs.codeBtnPx.style.bottom ='0';
        }
      },

      // 培训鼠标移出
      leaveCodePx(){
        this.$refs.codeBtnPx.style.bottom ='305px';
      },
      // 立即注册按钮
      registerFun(){
        this.registerDl = true;
      },
    },
    created() {
      // 页面初始化
      this.$axios.$post('/home/youke/stop').then(res=>{
        if (res.data === '1') {
          this.youkeFlag = false;
        }else{
          this.youkeFlag = true;
        }
      });
    },
    mounted() {
      this.getSystemWidth();
    },
    beforeDestroy() {
    },
  };
</script>