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>
      <h3>在线考试就用青谷</h3>
      <p>一款简单好用的考试系统</p>
      <liaoJieGengDuo/>
    </div>

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

    </div>

    <!--  产品优势  -->
    <div class="platform-products-services">
      <h4 class="client-title">产品优势</h4>
      <ul>
        <li>
          <div class="client-container">
            <div class="products-services-box products-contrary-box">
              <img src="#" alt="强大的人员和试题管理"/>
              <div class="products-services-content">
                <h5>青谷云在线考试服务</h5>
                <p class="p-before-circle">考试系统使用方便,操作简单，节约成本，无需独立开发</p>
                <p class="p-before-circle">在云平台直接搭建企业账号，邀请员工登录，即可享受完整的线上考试服务</p>
                <p class="p-before-circle">支持万人同时在线，超高并发安全稳定运行</p>
                <div>
                  <a class="client-default-Btn">
                    <freeTrialBtn myType="kaoshi"/>
                  </a>
                  <onlineInformationBtn class="client-default-Btn" />
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <div class="products-services-content">
                <h5>强大的人员管理和考试功能</h5>
                <p class="p-before-circle">支持手动、批量导入人员及部门多层级管理功能，解决企业人员多且分散的问题</p>
                <p class="p-before-circle">六大常用题型，批量导入；固定组卷，随机组卷，固定+随机综合组卷，涵盖错题，按难度程度抽题</p>
                <p class="p-before-circle">支持客观题自动判断，主观题后台人工阅卷。有效减少人力成本，提升时间小楼，降低费用成本</p>
                <div><a rel="nofollow" class="client-default-Btn">
                  <freeTrialBtn myType="kaoshi"/>
                </a><span class="client-default-Btn">
                  <onlineInformationBtn/>
                </span></div>
              </div>
              <img src="#" alt="多种终端支持，随时随地考试"/>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box products-contrary-box">
              <img src="#" alt="严格的考试监控防作弊体系"/>
              <div class="products-services-content">
                <h5>全流程AI监考防作弊体系</h5>
                <p class="p-before-circle">人脸识别身份核验成功方可考试，防替考作弊行为</p>
                <p class="p-before-circle">多屏监控画面展现考试全过程，考生的面部表情、一举一动在后台实时呈现</p>
                <p class="p-before-circle">随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制</p>
                <div><a rel="nofollow" class="client-default-Btn">
                  <freeTrialBtn myType="kaoshi"/>
                </a><span class="client-default-Btn">
                  <onlineInformationBtn/>
                </span></div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="client-container">
            <div class="products-services-box">
              <div class="products-services-content">
                <h5>多端口个性化设置随心选择</h5>
                <p class="p-before-circle">支持个性化定制登录背景、品牌、logo等，一键搭建属于您的个性化在线考试系统</p>
                <p class="p-before-circle">与三方平台无缝集成、支持OA、HR、ERP、教务、微信、钉钉等应用的对接</p>
                <p class="p-before-circle">PC、APP、H5统一管理，数据互通，充分利用水平化时间，塑造学员高频率使用习惯</p>
                <div><a rel="nofollow" class="client-default-Btn">
                  <freeTrialBtn myType="kaoshi"/>
                </a><span class="client-default-Btn">
                  <onlineInformationBtn/>
                </span></div>
              </div>
              <img src="#" alt="实用便捷的判卷功能"/>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!--  更多辅助功能  -->
    <div>
      <h3>更多辅助功能</h3>
      <ul>
        <li>
          <img src="#">
          <span>报名审核</span>
        </li>
        <li>
          <img src="#">
          <span>发布证书</span>
        </li>
        <li>
          <img src="#">
          <span>数据统计</span>
        </li>
        <li>
          <img src="#">
          <span>断电续考</span>
        </li>
      </ul>

    </div>

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

<script>
import liaoJieGengDuo from "~/components/common/liaoJieGengDuo";
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 {BannerImgs, classifys} from "~/defaultConfig"

/**
 * @ 产品与服务 -> 考试系统
 */
export default {
  name: "exam",
  layout: 'templateB',
  components: {liaoJieGengDuo, freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan},
  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 {
      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 scoped>
.client-exam-page {
  margin-top: 70px;
}

.client-banner-box {
  height: 200px;
  background: green;
  text-align: center;
  color: #fff;
}
</style>