nuxtProject/pages/product/exam.vue

<template>
  <div class="client-exam-page client-platform-page">
    <!-- 广告图位置 -->
    <div class="client-banner-box">
      <div
        :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
        class="client-platform-banner">
      </div>
    </div>

    <!--  产品体验  -->
    <div class="platform-products-experience client-container">
      <h4 class="client-title">产品体验</h4>
      <p class="client-subtitle-one-row">无序注册，即可免费体验青谷在线考试系统</p>
      <!--   多端体验   -->
      <chanPinTiYan></chanPinTiYan>
    </div>

    <!--  产品优势  -->
    <div class="platform-products-services">
      <h4 class="client-title">产品优势</h4>
      <imgCardLv2 class="img-card" :option="item" v-for="(item,index) in productList" :key="index">
        <div class="btn-groups">
          <freeTrialBtn class="free-train-btn btn-item" v-if="item.mianfei" :myType="item.myType"/>
          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
        </div>
      </imgCardLv2>
    </div>

    <!--  更多辅助功能  -->
    <div class="client-fuzhu-gongneng client-container">
      <h4>更多辅助功能</h4>
      <ul>
        <li>
          <i></i>
          <span>报名审核</span>
        </li>
        <li>
          <i></i>
          <span>发布证书</span>
        </li>
        <li>
          <i></i>
          <span>数据统计</span>
        </li>
        <li>
          <i></i>
          <span>断电续考</span>
        </li>
      </ul>

    </div>

    <!--  新闻资讯  -->
    <newsComp2 :newsData="topCarousels"></newsComp2>
  </div>
</template>

<script>

import freeTrialBtn from "~/components/common/freeTrialBtn";
import onlineInformationBtn from "~/components/common/onlineInformationBtn";
import newsComp2 from "~/components/common/newsComp2";
import chanPinTiYan from "~/components/common/chanPinTiYan";
import imgCardLv2 from "@/components/common/layout/imgDes/imgCardLv2_exam";
import {BannerImgs, classifys} from "~/defaultConfig"

/**
 * @ 产品与服务 -> 考试系统
 */
export default {
  name: "exam",
  layout: 'templateB',
  components: { freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan, imgCardLv2},
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/news/carousel`, {'newsClassifyId': classifys.kaoshixitong.classify, 'keyword': classifys.kaoshixitong.keyword}),
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.kaoshixitong}),
    ]
    const [res1, res2] = await Promise.all(arr);
    return {
      topCarousels: res1.data.data || [],
      bannerList: res2.data.data || [],
    }
  },
  head(){
    return {
      title: '在线考试平台_在线考试软件_试卷软件系统',
      meta: [
        {
          name: 'keywords',
          content: '考试平台,试卷系统,试卷软件'
        },
        {
          name:'description',
          content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  data() {
    return {

      productList: [
        {
          content: {
            title: '青谷云在线考试服务',
            list: [
              {
                value: '考试系统使用方便,操作简单，节约成本，无需独立开发',
              },
              {
                value: '在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务',
              },
              {
                value: '支持万人同时在线，超高并发安全稳定运行',
              },
            ],
            order: 2,
          },
          img: {
            url:  require(`~/static/productImage/p07.png`),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '强大的人员管理和考试功能',
            list: [
              {
                value: '支持手动、批量导入人员及部门多层级管理功能，解决企业人员多且分散的问题',
              },
              {
                value: '六大常用题型，批量导入；固定组卷，随机组卷，固定+随机综合组卷，涵盖错题，按难度程度抽题',
              },
              {
                value: '支持客观题自动判断，主观题后台人工阅卷。有效减少人力成本，提升时间小楼，降低费用成本',
              },
            ],
            order: 1,
          },
          img: {
            url:   require(`~/static/productImage/p05.png`),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '全流程AI监考防作弊体系',
            list: [
              {
                value: '人脸识别身份核验成功方可考试，防替考作弊行为',
              },
              {
                value: '多屏监控画面展现考试全过程，考生的面部表情、一举一动在后台实时呈现',
              },
              {
                value: '随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制',
              },
            ],
            order: 2,
          },
          img: {
            url:  require(`~/static/productImage/p08.png`),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '多端口个性化设置随心选择',
            list: [
              {
                value: '支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统',
              },
              {
                value: '与三方平台无缝集成、支持OA、HR、ERP、教务、微信、钉钉等应用的对接',
              },
              {
                value: 'PC、APP、H5统一管理，数据互通，充分利用碎片化时间，塑造学员高频率使用习惯',
              },
            ],
            order: 1,
          },
          img: {
            url: require(`~/static/productImage/p06.png`),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        }
      ],

      youkeFlag: false,// 控制游客系统是否维护中
      SystemWidthFlag: 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;
      }
    },
    // 鼠标移入
    enterCode() {
      if (this.youkeFlag) {
        this.$refs.codeBtn.style.bottom = '90px';
      } else {
        this.$refs.codeBtn.style.bottom = '0';
      }
    },
    // 鼠标移出
    leaveCode() {
      this.$refs.codeBtn.style.bottom = '305px';
    },
    // 考试体验按钮
    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" scoped>
// 按钮
.free-train-btn,.apply-btn{margin-right: 16px;}
.btn-groups {
  margin-top: 48px;
}

.product-exam-btn {
  color: #00b96b;
  width: 200px;
  height: 60px;
  line-height: 60px;
  border-radius: 8px;
  background: #fff;
  border-color: #fff;
}

// 辅助功能
.client-fuzhu-gongneng {
    margin-top: 130px;
    margin-bottom: 120px;

    h4 {
      font-size: 30px;
      font-weight: 800;
      color: #333;
      text-align: center;
      margin-bottom: 140px;
    }

    ul {
    display: flex;
    justify-content: space-between;

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;

      i {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        width: 123px;
        height: 123px;
        margin: 0 auto 20px;
        text-align: center;
      }
      span {
        color: #333;
        font-size: 20px;
        font-weight: 800;
        text-align: center;
      }

      &:nth-child(1) {
        i {
          background-image: url("~static/gangweiIcon/z108.png");
        }

      }
      &:nth-child(2) {
        i {
          background-image: url("~static/gangweiIcon/z109.png");
        }

      }
      &:nth-child(3) {
        i {
          background-image: url("~static/gangweiIcon/z110.png");
        }

      }
      &:nth-child(4) {
        i {
          background-image: url("~static/gangweiIcon/z111.png");
        }
      }

    }
  }
}

@media (max-width: 768px) {
  .btn-groups {
    display: flex;justify-content: center;margin-top: 30px;
  }

  .client-fuzhu-gongneng {
    margin-top: 130px;
    margin-bottom: 120px;

    h4 {
      font-size: 18px;
      font-weight: 800;
      color: #333;
      text-align: center;
      margin-bottom: 11%;
    }

    ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 20px;

        i {
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          display: inline-block;
          width: 80px;
          height: 80px;
          margin: 0 auto 20px;
          text-align: center;
        }
        span {
          color: #333;
          font-size: 14px;
          font-weight: 800;
          text-align: center;
        }

        &:nth-child(1) {
          i {
            background-image: url("~static/gangweiIcon/z108.png");
          }

        }
        &:nth-child(2) {
          i {
            background-image: url("~static/gangweiIcon/z109.png");
          }

        }
        &:nth-child(3) {
          i {
            background-image: url("~static/gangweiIcon/z110.png");
          }

        }
        &:nth-child(4) {
          i {
            background-image: url("~static/gangweiIcon/z111.png");
          }
        }

      }
    }
  }
}

.platform-products-services {
  .img-card:nth-child(3) {
    background: #fafffc;
  }
  .img-card:nth-child(5) {
    background: #fafffc;
  }
}


</style>