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">
        <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="clientKsTy">立即体验</a></div></li>
        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a @click="adminKsTy">后台体验</a></div></li>
      </ul>
    </div>
    <!--  麦塔在线培训系统 -->
    <div class="platform-products-experience client-container">
      <h4 class="client-title">麦塔在线培训系统体验版</h4>
      <p>学练考评一站式培训平台</p>
      <ul class="experience-ul-box">
        <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="clientPxTy">立即体验</a></div></li>
        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a @click="adminPxTy">后台体验</a></div></li>
      </ul>
    </div>

    <!-- 企业考培立即注册-->
    <div class="tiyan-center-register">
      <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>
  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,// 系统维护弹窗
      };
    },
    head(){
      return {
        title: 'SaaS考试系统_麦塔在线考试系统_麦塔在线培训系统体验版',
        meta:  [
          {
            description: '企业考培,就用麦塔,现在注册立享30人纯免费版本3年使用权限.麦塔在线考试系统体验版-简单好用的SaaS考试系统;麦塔在线培训系统体验版-学练考评一站式培训平台。',
            keywords:    'saas考试系统',
          },
        ],
      };
    },
    computed: {},
    methods:  {
      // 考试学员端体验
      clientKsTy(){
        if(this.youkeFlag) {
          window.open("https://youkeksc.mtavip.com/c/youke");
        }else{
          this.systemMaintainDl = true;
        }
      },
      // 考试管理端体验
      adminKsTy(){
        if(this.youkeFlag) {
        window.open("https://youkeksa.mtavip.com/a/youke");
        }else{
          this.systemMaintainDl = true;
        }
      },
      // 培训学员端体验
      clientPxTy(){
        if(this.youkeFlag) {
        window.open("https://youkepxc.mtavip.com/c/youke");
        }else{
            this.systemMaintainDl = true;
        }
      },
      // 培训管理端体验
      adminPxTy(){
        if(this.youkeFlag) {
        window.open("https://youkepxa.mtavip.com/a/youke");
        }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() {
    },
    beforeDestroy() {
    },
  };
</script>