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"><em></em></span></div></li>
        <li><div><i></i><h5>电脑学员端</h5><p>支持市面各种主流浏览器</p><p>支持十万量级的考试并发</p><a href="https://youkeksc.mtavip.com/c/youke" target="_blank">立即体验</a></div></li>
        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a href="https://youkeksa.mtavip.com/a/youke" target="_blank">后台体验</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"><em class="px-img-box"></em></span></div></li>
        <li><div><i></i><h5>电脑学员端</h5><p>学练考评一站式培训平台</p><p>支持市面各种主流浏览器</p><a href="https://youkepxc.mtavip.com/c/youke" target="_blank">立即体验</a></div></li>
        <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a href="https://youkepxa.mtavip.com/a/youke" target="_blank">后台体验</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>立即注册</a>
      </div>
    </div>
  </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`),
      };
    },
    head(){
      return {
      }
    },
    computed: {},
    methods:  {
      // 考试鼠标移入
      enterCodeKs(){
        this.$refs.codeBtnKs.style.bottom ='90px';
      },

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

      // 培训鼠标移出
      leaveCodePx(){
        this.$refs.codeBtnPx.style.bottom ='305px';
      },
    },
    created() {

    },
    mounted() {
    },
    beforeDestroy() {
    },
  };
</script>