nuxtProject/pages/examsystem/index.vue

<template>
  <div>
    <div class="client-platform-page">

      <!-- 考试平台页 banner栏 -->
      <div class="client-platform-banner">
        <div  @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/exam/exam-banner-background.png`)})`}"></div>
        <a rel="nofollow" class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
      </div>
      <!--  产品体验 -->
      <div class="platform-products-experience client-container">
        <h4 class="client-title">产品体验</h4>
        <p>无需注册，即可免费体验麦塔在线考试系统</p>
        <ul class="experience-ul-box">
          <li><div><i></i><h5>手机学员端</h5><p>用手机扫描二维码</p><p>考生30秒体验答卷</p><a @mouseenter="enterCode" @mouseleave="leaveCode" style="cursor: default">扫码体验</a><span ref="codeBtn"><em></em></span></div></li>
          <li><div><i></i><h5>电脑学员端</h5><p>支持市面各种主流浏览器</p><p>支持十万量级的考试并发</p><a href="https://youkeksc.mtavip.com/c/login" target="_blank">立即体验</a></div></li>
          <li><div><i></i><h5>电脑管理端</h5><p>欢迎体验麦塔系统后台</p><p>三步轻松组织一场考试</p><a href="https://youkeksa.mtavip.com/a/login" target="_blank">后台体验</a></div></li>
          <li><div><i></i><h5>更新日志</h5><p>麦塔想您所想，不止于功能</p><p>我们一直在更新迭代</p><a href="https://youkeksa.mtavip.com/a/login" target="_blank">查看日志</a></div></li>
        </ul>
      </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="advantagesImg1" alt="万人并发运行顺畅" />
              <div class="products-services-content">
                <h5>良好高并发性和访问安全性</h5>
                <i></i>
                <p>采用的运行稳定、安全性很高的JAVA语言开发；拥有强大的考试并发负载能力，支持万人以上考生同时在线考试；分布式微服务架构、开放、安全、高能、高可靠的服务调用； 为企业快速、灵活构建大规模分布式服务应用提供基础；</p>
                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
              </div>
            </div>
            </div>
          </li>
          <li>
            <div class="client-container">
              <div class="products-services-box">
              <img :src="advantagesImg2" alt="考试监控预防作弊" />
              <div class="products-services-content">
                <h5>严格的考试监控防作弊功能</h5>
                <i></i>
                <p>试题乱序、选项乱序、禁止右键复制粘贴；人脸识别登录，防止替考；考试过程禁止切屏，解决离开考试界面的问题；考试过程中头像抓拍和视频监控防止作弊</p>
                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
              </div>
            </div>
            </div>
          </li>
          <li>
            <div class="client-container">
              <div class="products-services-box products-contrary-box">
              <img :src="advantagesImg3" alt="微信答题一扫就考" />
              <div class="products-services-content">
                <h5>PC移动支持多终端，随时随地考试</h5>
                <i></i>
                <p>支持PC使用，更支持移动端H5使用，还可以支持微信绑定答题，学员用手机扫描二维码，轻松答题支持专属APP的定制</p>
                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
              </div>
            </div>
            </div>
          </li>
          <li>
            <div class="client-container">
              <div class="products-services-box">
              <img :src="advantagesImg4" alt="功能丰富的在线考试" />
              <div class="products-services-content">
                <h5>丰富的考试管理功能</h5>
                <i></i>
                <p>多层级组织架构快速搭建，多级权限管理人员设置；支持多种题型，单选、多选、判断、填空、简答、阅读理解、公式题、音频题、图片题、视频题，同时支持word和Excel批量导入题库；支持随机抽取试题，每个考生题目随机生成；多种考试参数设置：答题倒计时，答卷限时，成绩发布，选择按人员、部门、职位发布考试。支持学员证书和积分获取，支持刷题模式的练习管理。</p>
                <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a></div>
              </div>
            </div>
            </div>
          </li>
        </ul>

      </div>

      <!--  产品功能 -->
      <div class="platform-product-function">
        <div class="client-container">
          <h4 class="client-title">产品功能</h4>
          <ul class="product-function-box">
            <li><div><i></i><h5>用户权限管理</h5><p>多层级组织架构和角色权限的快速搭建，可分层独立管理，解决大型组织的复杂培训管理需求，支持和用户的OA、HR、ERP、教务、微信、钉钉等系统对接单点登录和用户信息同步</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>可以按科目多维度建设题库，支持单选、多选、判断题、填空题、简答题多种题型，同时支持word、Excel批量上传试题、图片，公式，一键轻松导入</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>从用户、考试、成绩、试题、排名、机构等层面多维度的统计系统数据</p></div></li>
            <li><div><i></i><h5>性能稳定数据安全</h5><p>企业级技术框架，保证大并发考试的稳定；数据备份恢复，保障安全性</p></div></li>
          </ul>
          <a rel="nofollow" class="free-trial-default-btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a>
        </div>
      </div>


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

      <!-- 新闻资讯 -->
      <div class="platform-news-information">
        <div class="client-container">
          <h4 class="client-title">新闻资讯</h4>
          <ul>
            <li style="font-size: 16px" v-for="(item, index) in topCarousels">
              <div>
                <img :src="item.pic" alt="新闻资讯" />
                <h4 @click="checkInfo(item)">{{ item.title }}</h4>
                <span>发布时间：{{item.yyyy }}-{{ item.mmdd }}</span>
                <p>{{ item.intro }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
  export default {
    name:       'examsystem',
    layout:'templateB',
    async asyncData({ $axios,store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/examsystem');

      let [res1, res2] = await Promise.all([
                                             await $axios.$post(`/home/banner/list`, { 'code': 2 }).then(res => {
                                               return res;
                                             }),
                                             await $axios.$post(`/home/news/carousel`, { 'newsClassifyId': 0,'keyword':'考试' }).then(res => {
                                               return res;
                                             })
                                           ]);
      console.log(res2.data.data);
      return {
        bannerList: res1.data.data||[],
        topCarousels: res2.data.data||[],

      };

    },
    data() {
      return {
        advantagesImg1:  require(`~/static/images/client/exam/product-advantages-img1.png`),
        advantagesImg2:  require(`~/static/images/client/exam/product-advantages-img2.png`),
        advantagesImg3:  require(`~/static/images/client/exam/product-advantages-img3.png`),
        advantagesImg4:  require(`~/static/images/client/exam/product-advantages-img4.png`),
      };
    },
    head(){
      return {
        title: '考试软件_网上考试系统_网络考试系统_在线考试答题系统_【栋科软件有限公司】',
        meta: [
          {
            name: 'keywords',
            content: '电脑答题系统,单机考试系统,自主预约考试系统,考试软件系统,考试平台软件,单机版考试软件'
          },
          {
            name:'description',
            content:'麦塔在线考试软件系统是专业的网络考试应用软件，不仅为企业节省考试成本，更方便企业对考试工作的管理，为领导者和管理层全方位了解考试情况提供了有效的数据支持。'
          }
        ],
      }
    },
    computed:   {},
    methods:    {
      // 鼠标移入
      enterCode(){
        this.$refs.codeBtn.style.bottom ='90px';
      },

      // 鼠标移出
      leaveCode(){
        this.$refs.codeBtn.style.bottom ='305px';
      },

      clickBanner(data){
        if(data){
          window.open(data)
        }

      },

      checkInfo(data) {
        const opt = {
          id: data.code,
        };
        this.$router.push({ name: 'news-id', params: opt });
      },
    },
    created() {

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

</style>