nuxtProject/components/common/chanPinTiYan.vue

<template>
  <div>
    <ul class="experience-ul-box mta-hidden-xs">
      <li>
        <div>
          <h5>手机学员端</h5>
          <i></i>
          <p>用手机扫描二维码，考生30秒体验答卷</p>
          <a style="cursor: default">扫码试用</a>
          <span ref="codeBtn" v-if="youkeFlag"><em></em></span>
          <div ref="codeBtn" v-if="!youkeFlag">系统升级中...</div>
        </div>
      </li>
      <li><div><h5>电脑管理端</h5><i></i><p>欢迎体验青谷系统后台，三步轻松组织一场考试</p><a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
      <li><div><h5>电脑学员端</h5><i></i><p>支持市面各种主流浏览器，支持十万量级的考试并发</p><a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">免费体验</a></div></li>
    </ul>
    <!-- 手机轮播 -->
    <div class="experience-phone-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">
              <h5>手机学员端</h5>
              <i class="sjxyd-icon"></i>
              <p>用手机扫描二维码，考生30秒体验答卷</p>
              <a style="cursor: default" @click="ykFreeTrial">立即体验</a>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="experience-content-box">
              <h5>电脑管理端</h5>
              <i class="dnxyd-icon"></i>
              <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>
              <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>
    <!--  系统维护  -->
    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
  </div>

</template>

<script>
export default {
  name: "chanPinTiYan",
  data() {
    return {
      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,
      },
    }
  },
  methods: {
    ykFreeTrial() {
      if(this.youkeFlag){
        // 没升级
        window.open('https://youkeksc.mtavip.com/kscmdist/#/youke')
      }else{
        // 升级中
        this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
      }
    },
    // 判断是否为移动端
    isH5(){
      var browserWidth=document.documentElement.clientWidth;
      if(browserWidth <= 768){
        return true;
      }else{
        return false;
      }
    },
    KsTyBtn(btnUrl) {
      if(this.youkeFlag) {
        if(this.isH5()){
          this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
        }else {
          window.open(btnUrl);
        }
      }else{
        if(this.isH5()){
          // 升级中
          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
        }else{
          this.systemMaintainDl = true;
        }
      }
    },
  },
  created() {
    // 页面初始化
    this.$axios.$post('/home/youke/stop').then(res=>{
      if (res.data === '1') {
        this.youkeFlag = false;
      }else{
        this.youkeFlag = true;
      }
    });
  },
}
</script>

<style lang="scss">
  .experience-ul-box{
    margin: 0 -60px;text-align: center;
    li{
      width:33.33%;display: inline-block;text-align: center;font-size: 16px;
      >div{
        height: 476px;margin: 0 60px;padding:46px 36px;border: 1px solid #eaeaea;
        border-radius: 10px;position: relative;overflow: hidden;box-sizing: border-box;
        div{font-size:20px;color:#fff;position: absolute;right: 0;left: 0;top: 0;bottom: 0;box-sizing: border-box;transition: 0.5s;overflow: hidden;border-radius: 10px;line-height: 476px;background: rgba(0,0,0,.6);cursor: default;}
        i{display: inline-block;width: 200px;height: 180px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;background-position: center;}
        h5{font-size: 20px;color: #565656;margin-bottom: 24px;}
        p{min-height: 52px;font-size: 14px;padding: 0;margin: 0;color: #565656;line-height: 24px;}
        a{width: 180px;height: 45px;line-height: 45px;display: inline-block;margin-top: 24px;text-align: center;background-color: #00B96B;
          border-color: rgba(255, 0, 0, 0);border-width: 1px;border-style: solid;color: rgb(255, 255, 255);border-radius:4px;font-weight: normal;cursor: pointer}
        span{display: none;transition: 0.5s;position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;}
        em{width:200px;height:200px;display: block;margin: 90px auto;background-image:url("~static/images/client/exam/exam-code-img.png");background-size: cover;}
        em.px-img-box{background-image:url("~static/images/client/train/train-code-img.png")}
      }
      >div:after{
        content: "";width: 100%;height: 4px;position: absolute;bottom: 0;background: #00b96b;left: 0;
      }
      >div:hover{
        padding:0;box-shadow: 0 0 13px 0 rgba(223,223,223,0.60);
        h5{background: #00b96b;color: #fff;padding: 27px 0 17px;}
        p{padding: 0 36px;}
        span{display: block;}
      }

    }
    li:nth-child(1) i{background-image:url("~static/images/client/exam/exam-tel-icon.png")}
    li:nth-child(2) i{background-image:url("~static/images/client/exam/exam-pc-icon.png")}
    li:nth-child(3) i{background-image:url("~static/images/client/exam/exam-xy-icon.png")}
  }
  /**************** 手机样式 ****************/
  .experience-phone-box {
    position: relative;
    // swiper--div
    .swiper-slide {width: 100%;}

    .swiper-pagination-style {
      width: 80px;position: absolute;bottom: 66px;left: 50%;margin-left: -30px;z-index: 99;

      // 小圆点
      .my-bullet-swiper {width: 10px;height: 10px;border-radius: 5px;display: inline-block;background: rgba(17,221,71, 0.2);margin-right: 14px;}

      // 分页active
      .my-bullet-active-swiper {background: #00B96B;}
    }

    // 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: 120px;height: 70px;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: 0 48px;line-height: 24px;}
      a {width: 122px;height: 35px;line-height: 35px;background-color: #00B96B;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;}
    // 图片
    .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-xy-icon.png")}
  }


</style>