nuxtProject/pages/solution/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>全流程AI监考防作弊体系</h3>
      <p>青谷为您打造专业的严肃性在线考试解决方案</p>
      <onlineInformationBtn/>
    </div>

    <div class="client-container">
      <!--  常见严肃性考试场景  -->
      <gangweiList label="常见严肃性考试场景" :list="gangwei" :pc-num="4" :h5-num="2" :pc-margin="120"
                   :h5-margin="0"></gangweiList>
    </div>


    <!--  严肃性考试解决方案  -->
    <div class="platform-products-services client-container">
      <h4 class="client-title">严肃性考试解决方案</h4>
      <imgCardLv2 class="img-card" :option="item" v-for="(item,index) in productList" :key="index" :col-pc="3" :col-h5="2">
        <div class="btn-groups">
          <onlineInformationBtn class="online-information-btn btn-item" v-if="item.zixun"/>
        </div>
      </imgCardLv2>
    </div>

    <!--  宣传图  -->
    <div class="client-xuanchuan-box">
      <h4>青谷为您打造专业的严肃性在线考试解决方案</h4>
      <onlineInformationBtn></onlineInformationBtn>
    </div>

    <!--  严肃性考试热门问答  -->
    <div class="client-wenda-box">
      <h4>严肃性考试热门问答</h4>
      <div>
        <ul>
          <li :class="{active: curActive === 1}" @click="curActive = 1">1. 考试前开启身份证认证、人脸识别是否会耽误考试时间？</li>
          <li :class="{active: curActive === 2}" @click="curActive = 2">2. 开启摄像头监控后，考生的摄像头遇到用不了的情况怎么解决？</li>
          <li :class="{active: curActive === 3}" @click="curActive = 3">3. 考试人数多的情况下系统稳定有保障吗？</li>
          <li :class="{active: curActive === 4}" @click="curActive = 4">4. 考生在考试中途遇到死机中断怎么办？</li>
          <li :class="{active: curActive === 5}" @click="curActive = 5">5. 如果您还有更多的疑惑，请联立即联系我们</li>
        </ul>

        <div v-if="curActive === 1">
          <span>问</span>考试前开启身份证、人脸识别是否会耽误考试时间？
          <span>答</span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可
        </div>

        <div v-if="curActive === 2">
          <span>问</span>开启摄像监考后，考生的摄像头遇到用不了的情况怎么解决？
          <span>答</span>正常情况下摄像头都是可以使用的；当然如有无法使用的情况，其原因有多种，我们已提供相关的解决方案，考生可以根据操作指引启用电脑摄像头。
        </div>

        <div v-if="curActive === 3">
          <span>问</span>考试人数多的情况下系统稳定有保障吗？
          <span>答</span>如果考试人数过多，系统将采用分布式部署，保证系统稳定性。目前已有很多的企业使用青谷组织过超过万人高并发在线考试，我们会为您提供技术支持，考试人数再多页可保障系统稳定性。
        </div>

        <div v-if="curActive === 4">
          <span>问</span>考生在考试中途遇到死机中断怎么办？？
          <span>答</span>青谷考试带有每五分钟自动保存功能，时间节点内的答题数据都会保留。
        </div>

        <div v-if="curActive === 5">
          <div>
            <p>客服电话： 400-0990-883</p>
            <p>QQ:227551695</p>
          </div>
          <img src="#">
        </div>
      </div>
    </div>

    <!--  立即咨询  -->
    <desWithCode source="exam"></desWithCode>
  </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 {BannerImgs, yansukaoshi} from "~/defaultConfig";
import desWithCode from "@/components/common/layout/desComp/desWithCode";
import gangweiList from "@/components/common/layout/desComp/gangweiList";
import imgCardLv2 from "~/components/common/layout/imgDes/imgCardLv2";

/**
 * @ 解决方案 -> 严肃考试
 */
export default {
  name: "exam.vue",
  layout: 'templateB',
  components: {
    freeTrialBtn, onlineInformationBtn, newsComp2, chanPinTiYan, desWithCode, gangweiList, imgCardLv2
  },
  async asyncData({$axios, store}) {
    const arr = [
      $axios.$post(`/home/news/carousel`, {'newsClassifyId': 0, 'keyword': '考试'}),
      $axios.$post(`/home/banner/list`, {'code': BannerImgs.yansukaoshi}),
    ]
    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移动支持多终端，随时随地考试、丰富的考试管理功能。'
        }
      ],
    }
  },
  computed: {
    gangwei() {
      return yansukaoshi
    }
  },
  data() {
    return {
      productList: [
        {
          content: {
            title: '强大的AI防作弊，保障考试公平公正',
            des: '',
            list: [
              {
                value: '人脸识别、摄像头监考、有效防止替考代考，保障考试公平公正',
              },
              {
                value: '支持子管理员协助多屏监控在线监考，考生的面部表情、一举一动在后台实时呈现，最大程度模拟人工监考场景',
              },
              {
                value: '随机组件、试题乱序、选择题选项乱序、超时强制交卷、防止切屏限制，有效的防止考生相互抄卷的行为',
              },

            ],
            order: 2,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '数据加密保护，保障考试信息安全',
            des: '',
            list: [
              {
                value: '考生答卷时禁止复制、粘贴考题，防止试题和答案泄露',
              },
              {
                value: '企业级技术框架；数据存储备份机制；算法、秘钥双重保险，数据安全可靠',
              },
              {
                value: '支持私有服务器部署内网考试，让考试数据更安全',
              },
            ],
            order: 1,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '良好的高并发性，系统稳定性高',
            des: '',
            list: [
              {
                value: '采用的运行稳定、安全性很高的JAVA语言开发',
              },
              {
                value: '拥有强大的考试并发负载能力，支持万人以上考生同时在线考试',
              },
              {
                value: '分布式微服务架构、开放、安全、高能、高可靠的服务调用',
              },
              {
                value: '为企业快速，灵活构建大规模分布式服务应用提供基础',
              },
            ],
            order: 2,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 1,
          },
          mianfei: false,
          zixun: true,
          shenqing: true,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '多维度统计分析，考试结果可视化',
            des: '',
            list: [
              {
                value: '智能判分系统，减轻管理员工工作压力，考后直接出成绩及排行榜等信息',
              },
              {
                value: '从用户、考试、成绩、试题、排名、机构等层面多维度分析考试结果，掌握考生考试情况',
              },
            ],
            order: 1,
          },
          img: {
            url: require('~/static/codeImage/code-jingli.png'),
            order: 2,
          },
          mianfei: false,
          zixun: true,
          shenqing: true,
          myType: 'kaoshi'
        }
      ],
      curActive: 1,
    }
  },
}
</script>

<style lang="scss" scoped>
.active {
  color: green;
}
.platform-products-services {
  .client-title {
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    color: #333;
    margin-top: 80px;
    margin-bottom: 70px;
  }

  .btn-groups {
    margin-top: 48px;
    .btn-item {
      margin-right: 20px;
    }
  }
}
</style>