nuxtProject/pages/examsystem.vue

<template>
  <div>
    <mtaheader></mtaheader>
    <div class="client-exam-page">

      <!-- 考试平台页 banner栏 -->
      <div class="client-exam-banner">
        <div class="client-container">
          <!--  banner文字区域 -->
          <div class="exam-banner-container">
            <h4>麦塔在线考试平台</h4>
            <p>简约而不简单<i></i>简约而不简单</p>
            <a>了解详情</a>
          </div>
        </div>
      </div>

      <!--  产品优势 -->
      <div class="client-container">
        <h4 class="client-title">产品优势</h4>
        <ul class="exam-product-advantages">
          <li><img :src="advantagesImg1" alt="万人并发运行顺畅"><h5>万人并发运行顺畅</h5><p>拥有强大的考试并发负载能力，支持30万考生同时在线考试</p></li>
          <li><img :src="advantagesImg2" alt="考试监控预防作弊"><h5>考试监控预防作弊</h5><p>人脸识别匹配，防止替考作弊，切屏强制交卷</p></li>
          <li><img :src="advantagesImg3" alt="微信答题一扫就考"><h5>微信答题一扫就考</h5><p>学员用手机扫描二维码，考生30秒就能轻松答题</p></li>
          <li><img :src="advantagesImg4" alt="功能丰富的在线考试"><h5>功能丰富的在线考试</h5><p>强大的题库管理和功能丰富的考试控制功能</p></li>
        </ul>
      </div>

      <!--  产品功能 -->
      <div class="exam-product-function">
        <div class="client-container">
          <h4 class="client-title">产品功能</h4>
          <ul class="product-function-box">
            <li><div><i></i><h5>用户权限管理</h5><p>可以设置不同角色管理，给管理用户添加管理部门人员权限，支持用户单点登录、信息同步</p></div></li>
            <li><div><i></i><h5>考试防作弊</h5><p>多重防作弊手段，切屏监控、离开考试，系统强制收卷</p></div></li>
            <li><div><i></i><h5>多种组卷模式</h5><p>支持直接选题组卷、按比例随机抽题组卷，满足各种组卷需求；整卷答题适用于正规考试，逐题模式适用于竞赛闯关考试</p></div></li>
            <li><div><i></i><h5>丰富的题库管理</h5><p>可以按科目建设题库，支持按照题型的难度，知识点的分类进行管理，纵向横向多维度的题库管理方式</p></div></li>
            <li><div><i></i><h5>个性化定制</h5><p>定义主题背景、品牌、logo，搭建您的专属在线考试平台</p></div></li>
            <li><div><i></i><h5>批量导题</h5><p>支持单选、多选、不定项选择题、判断题、填空题、问答题多种题型，同时支持word、Excel批量上传试题、图片，公式，一键轻松导入2000+题目</p></div></li>
            <li><div><i></i><h5>智能考试安排</h5><p>几十种考试参数设置，全方位把控考试细节，适应各种考试场景，考试安排智能化，随时随地，快速考试</p></div></li>
            <li><div><i></i><h5>多维度统计分析</h5><p>从用户、考试、成绩、试题、排名、机构等层面多维度的统计系统数据</p></div></li>
          </ul>
        </div>
      </div>

      <!-- 产品展示 -->
      <div class="exam-product-show">
        <h4 class="client-title">产品展示</h4>
        <div class="product-show-container">
          <el-carousel :interval="500" :autoplay="false" type="card" arrow="never">
            <el-carousel-item v-for="(item,index) in productShowCarousels" :key="index" >
              <div class="product-show-carousel">
                <img :src="item.img">
                <h5>{{item.title}}</h5>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- 应用场景 -->
      <div class="exam-application-scenarios">
        <div class="client-container">
          <h4 class="client-title">应用场景</h4>
          <ul class="application-scenarios-box">
            <li>
              <div class="application-scenarios-img"><i></i></div>
              <div class="application-scenarios-content">
                <h5>岗位考试</h5>
                <p>无论传统的培训还是新型的在线培训，企业都需要利用考核来进行培训效果评估，可以实现人才岗位胜任力测评、按需培训、绩效考核等功能，为领导者对员工素质进行评价和分析提供有力的数据支持。</p>
              </div>
            </li>
            <li>
              <div class="application-scenarios-img"><i></i></div>
              <div class="application-scenarios-content">
                <h5>大型竞赛</h5>
                <p>多种组卷、考试模式，可以覆盖大多数竞赛场景，报名注册只需简单一步就搞定，无中间流程，企业还可自由定制证书，合格后进行发放，降低使用成本，规范、快捷、高效，万人同考无压力。</p>
              </div>
            </li>
            <li>
              <div class="application-scenarios-img"><i></i></div>
              <div class="application-scenarios-content">
                <h5>资格考试</h5>
                <p>不限次发布考试，特殊题型可使用拍照上传功能，考生后台记录历史成绩，通过考试分析及时了解考生知识掌握情况，在线考试能突破时间空间限制，有利于组织大规模的考试，提高教学考核方式的灵活性。</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <mtafooter :requestData="requestData"></mtafooter>
  </div>


</template>

<script>
  import Mtafooter from '~/components/footer.vue'
  import Mtaheader from '~/components/header.vue'
  export default {
    name:       'examsystem',
    async asyncData({ $axios }) {
      let [res1] =  await Promise.all([
                                             await $axios.$post(`/home/links/list`).then(res=>{
                                               return res
                                             })
                                           ])
      /*   debugger;
         console.log(res1);
         console.log(res2);
         debugger;*/
      return {
        requestData : res1.data.data,
      }
    },
    components: {
      Mtafooter,
      Mtaheader
    },
    props:      {
    },
    data() {
      return {
        productShowCarousels: [
          {img:require(`~/static/images/client/exam/product-show-img1.png`),title:"平台总览"},
          {img:require(`~/static/images/client/exam/product-show-img3.png`),title:"考务管理"},
          {img:require(`~/static/images/client/exam/product-show-img2.png`),title:"人员管理"}
        ],
        advantagesImg1:  require(`~/static/images/client/exam/product-advantages-img1.svg`),
        advantagesImg2:  require(`~/static/images/client/exam/product-advantages-img2.svg`),
        advantagesImg3:  require(`~/static/images/client/exam/product-advantages-img3.svg`),
        advantagesImg4:  require(`~/static/images/client/exam/product-advantages-img4.svg`),
      };
    },
    computed:   {},
    methods:    {

    },
    created() {

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

</style>