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" @click="FreeTrial">免费试用</a>
      </div>
      <!--  产品试用 -->
      <div class="platform-products-experience client-container">
        <h4 class="client-title">产品试用</h4>
        <p>免注册，立即试用麦塔在线考试系统</p>
        <ul class="experience-ul-box mta-hidden-xs">
          <li>
            <div @mouseenter="enterCode" @mouseleave="leaveCode"><i></i>
              <h5>手机前台学员端</h5>
              <p>免登录手机扫描二维码</p>
              <p>体验考生答卷真实界面</p>
              <a style="cursor: default">扫码试用</a>
              <span ref="codeBtn" v-if="youkeFlag"><em></em></span>
              <div ref="codeBtn" v-if="!youkeFlag">系统升级中...</div>
            </div>
          </li>
          <li><div><i></i><h5>电脑前台学员端</h5><p>适用于各种考试考核竞赛</p><p>拥有强大的并发负载能力</p><a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
          <li><div><i></i><h5>电脑后台管理端</h5><p>三个简单步骤轻松完成发布</p><p>简单操作让复杂工作智能化</p><a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">免费体验</a></div></li>
          <li><div><i></i><h5>更新日志</h5><p>麦塔，只想给你更好的</p><p>我们愿和您一起进步</p><a  class="client-default-Btn" @click="goCheckLog">点击查看</a></div></li>
        </ul>
        <!-- 手机轮播 -->
        <div class="experience-swiper-box mta-hidden-sm">
          <div v-swiper:mySwiper="swiperOption" class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="experience-content-box">
                  <i class="sjxyd-icon"></i>
                  <h5>手机前台学员端</h5>
                  <p>免登录手机扫描二维码，体验考生答卷真实界面</p>
                  <a style="cursor: default" @click="ykFreeTrial">立即体验</a>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="experience-content-box">
                  <i  class="dnxyd-icon"></i>
                  <h5>电脑前台学员端</h5>
                  <p>适用于各种考试考核竞赛</p>
                  <p>拥有强大的并发负载能力</p>
                  <a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="experience-content-box">
                  <i class="dngld-icon"></i>
                  <h5>电脑后台管理端</h5>
                  <p>三个简单步骤轻松完成发布</p>
                  <p>简单操作让复杂工作智能化</p>
                  <a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">后台体验</a></div>
              </div>
              <!--<div class="swiper-slide">
                <div class="experience-content-box">
                  <i class="skrz-icon"></i>
                  <h5>更新日志</h5>
                  <p>麦塔想您所想，不止于功能</p>
                  <p>我们一直在更新迭代</p>
                  <a  class="client-default-Btn" @click="goCheckLog">查看日志</a>
                </div>
              </div>-->
            </div>
            <div class="swiper-pagination swiper-pagination-style"></div>
            <p class="experience-swiper-tip">←左右滑动查看更多→</p>
          </div>
        </div>
      </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>支持选择题、填空题、判断题、问答题、阅读理解题、听力题、视频题八大类题型，支持单题上传和Word、Excel批量导入试题等多种试题录入方式，支持树状分类各种复杂的试题体系，无限级组织结构和学员标签，任意定义可自定义的学员信息字段，满足学员信息管理的各种需求。</p>
                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</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>支持PC使用，移动端H5使用，还可以根据考试场景自如设置答卷模式，支持微信、钉钉等第三方平台无缝连接，支持个性化自定义组织专用的皮肤、Logo，强化您的组织和品牌属性。</p>
                <div><a rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</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>严格的考试监控防作弊体系</h5>
                <i></i>
                <p>支持答题前人脸身份核验，试题乱序、选项乱序、禁止右键复制粘贴，考试过程中限制切屏次数时间，实时头像抓拍和视频监控AI对比防止作弊，对有作弊嫌疑的学员可以强制交卷。</p>
                <div><a rel="nofollow" class="client-default-Btn"  @click="FreeTrial">免费试用</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" @click="FreeTrial">免费试用</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 mta-hidden-xs">
            <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>
          <!-- 手机轮播 -->
          <div class="experience-swiper-box mta-hidden-sm">
            <div v-swiper:mySwiperGn="swiperOptionGn" class="swiper-container">
              <ul class="swiper-wrapper">
                <li class="swiper-slide">
                  <div class="experience-content-box">
                    <i class="product-function-icon1"></i><h5>角色权限管理</h5>
                    <p>可根据用户需求分层独立管理，多层级的组织架构和角色权限快速搭建，解决大型组织的复杂的管理需求，支持对接微信、钉钉、教务、OA、HR、ERP等系统单点登录和用户信息同步</p>
                  </div>
                </li>
                <li class="swiper-slide">
                  <div class="experience-content-box">
                    <i class="product-function-icon2"></i><h5>考试防作弊体系</h5>
                    <p>支持人脸识别登录，身份核验；考试过程中支持限制切屏次数、时间，解决离开考试界页面问题；头像抓拍和视频实时监控有效防止作弊</p>
                  </div>
                </li>
                <li class="swiper-slide">
                  <div class="experience-content-box">
                    <i class="product-function-icon3"></i><h5>灵活的组卷模式</h5>
                    <p>固定试卷支持手工指定试题，并设置试题分数,所有考生使用相同试卷(可乱序)；抽题试卷，按试题难度、题型等分类设置抽题数量，随机生成不同试卷；随机试卷可以指定抽题分类、题型并设置抽题数量和分数，随机组合为用户生成不同的试卷</p>
                  </div>
                </li>
                <li class="swiper-slide">
                  <div class="experience-content-box">
                    <i class="product-function-icon4"></i><h5>丰富的题库管理</h5>
                    <p>可以按科目无限级添加、管理试题和试题标签，支持选择题、填空题、判断题、问答题、阅读理解题、听力题、视频题八大类题型，支持单题上传和Word、Excel批量导入试题、图片，公式等多种试题录入方式</p>
                  </div>
                </li>
                <li class="swiper-slide">
                  <div class="experience-content-box">
                    <i class="product-function-icon5"></i><h5>智能考试安排</h5>
                    <p>支持几十种个性考试参数的灵活设置，全方位把控考试细节，智能化考试安排，面对各类考试需求全适应，能随机应变不同的考场环境</p>
                  </div>
                </li>
                <li class="swiper-slide">
                  <div class="experience-content-box">
                    <i class="product-function-icon6"></i><h5>个性化定制</h5>
                    <p>支持个性化自定义组织专用的皮肤、Logo，强化您的组织和品牌属性</p>
                  </div>
                </li>
                <li class="swiper-slide">
                  <div class="experience-content-box">
                    <i class="product-function-icon7"></i><h5>多维度统计分析</h5>
                    <p>支持题目分析，可以查看全体和各个部门的得分情况，可以查看学员历次考试成绩汇总和趋等多维度数据情况</p>
                  </div>
                </li>
                <li class="swiper-slide">
                  <div class="experience-content-box">
                    <i class="product-function-icon8"></i><h5>性能稳定数据安全</h5>
                    <p>强大的考试并发负载能力，保证大并发考试的稳定；多重云数据保护和备份备份恢复机制，保护用户数据安全和隐私</p>
                  </div>
                </li>
              </ul>
              <div class="swiper-pagination swiper-pagination-style"></div>
              <p class="experience-swiper-tip">←左右滑动查看更多→</p>
            </div>
          </div>
          <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
        </div>
      </div>


      <!-- 为不同行业场景提供解决方案 -->
      <div class="platform-application-scenarios">
        <div class="client-container">
          <h4 class="client-title">为不同行业场景提供解决方案</h4>
          <ul class="application-scenarios-box mta-hidden-xs">
            <li>
              <div class="application-scenarios-content">
                <div class="application-scenarios-img"></div>
                <h5>岗位考核</h5>
                <p :title="`现今，企业为了提升人才育留及整体水平，已经逐渐重视起人才培养，企业想要检验新员工入职和在职员工的培训效果，就必须通过组织考试的方式，麦塔在线考试系统可以实现人才岗位胜任力测评、培训考核、绩效考核等多种功能，学习情况一目了然。`">
                  现今，企业为了提升人才育留及整体水平，已经逐渐重视起人才培养，企业想要检验新员工入职和在职员工的培训效果，就必须通过组织考试的方式，麦塔在线考试系统可以实现人才岗位胜任力测评、培训考核、绩效考核等多种功能，学习情况一目了然。
                </p>
              </div>
            </li>
            <li>
              <div class="application-scenarios-content">
                <div class="application-scenarios-img"></div>
                <h5>大型竞赛</h5>
                <p :title="`知识竞赛可以增加学习趣味性，有效促进员工的互动参与性，已成为越来越多企业和教育机构组织培训考试的主要方式，麦塔作为专业的知识竞赛答题软件，解决了众多企业组织知识竞赛的痛点，支持在线考试系统app以及绑定关注微信公众号使用微信答题，并且支持万人同时参加考试，非常适合大型竞赛场景。`">
                  知识竞赛可以增加学习趣味性，有效促进员工的互动参与性，已成为越来越多企业和教育机构组织培训考试的主要方式，麦塔作为专业的知识竞赛答题软件，解决了众多企业组织知识竞赛的痛点，支持在线考试系统app以及绑定关注微信公众号使用微信答题，并且支持万人同时参加考试，非常适合大型竞赛场景。
                </p>
              </div>
            </li>
            <li>
              <div class="application-scenarios-content">
                <div class="application-scenarios-img"></div>
                <h5>认证考试</h5>
                <p :title="`近年来，证书认证考试作为某种能力或资格的证明，企业需求逐渐增大，麦塔考试系统除了能够为前期组织考试节省大量的成本之外，还可对于严肃正式的考试证书认证场景给予专业的技术支持，能不限次发布考试，自定义设计并上传证书，考试合格自动发放，应用场景十分灵活。`">
                  近年来，证书认证考试作为某种能力或资格的证明，企业需求逐渐增大，麦塔考试系统除了能够为前期组织考试节省大量的成本之外，还可对于严肃正式的考试证书认证场景给予专业的技术支持，能不限次发布考试，自定义设计并上传证书，考试合格自动发放，应用场景十分灵活。
                </p>
              </div>
            </li>
          </ul>
          <!-- 手机轮播 -->
          <div class="experience-swiper-box mta-hidden-sm">
            <div v-swiper:mySwiperCj="swiperOptionCj" class="swiper-container">
              <ul class="swiper-wrapper">
                <li class="swiper-slide">
                  <div class="experience-content-box scenarios-gwks-box">
                    <i class="product-function-icon1"></i><h5>岗位考核</h5>
                    <p>现今，企业为了提升人才育留及整体水平，已经逐渐重视起人才培养，企业想要检验新员工入职和在职员工的培训效果，就必须通过组织考试的方式，麦塔在线考试系统可以实现人才岗位胜任力测评、培训考核、绩效考核等多种功能，学习情况一目了然。</p>
                  </div>
                </li>
                <li class="swiper-slide">
                  <div class="experience-content-box scenarios-dxjs-box">
                    <i class="product-function-icon2"></i><h5>大型竞赛</h5>
                    <p>知识竞赛可以增加学习趣味性，有效促进员工的互动参与性，已成为越来越多企业和教育机构组织培训考试的主要方式，麦塔作为专业的知识竞赛答题软件，解决了众多企业组织知识竞赛的痛点，支持在线考试系统app以及绑定关注微信公众号使用微信答题，并且支持万人同时参加考试，非常适合大型竞赛场景。</p>
                  </div>
                </li>
                <li class="swiper-slide">
                  <div class="experience-content-box scenarios-zgks-box">
                    <i class="product-function-icon3"></i><h5>认证考试</h5>
                    <p>近年来，证书认证考试作为某种能力或资格的证明，企业需求逐渐增大，麦塔考试系统除了能够为前期组织考试节省大量的成本之外，还可对于严肃正式的考试证书认证场景给予专业的技术支持，能不限次发布考试，自定义设计并上传证书，考试合格自动发放，应用场景十分灵活。</p>
                  </div>
                </li>
              </ul>
              <div class="swiper-pagination swiper-pagination-style"></div>
              <p class="experience-swiper-tip">←左右滑动查看更多→</p>
            </div>
          </div>
          <a rel="nofollow" class="free-trial-default-btn" @click="FreeTrial">免费试用</a>
        </div>
      </div>

      <!-- 新闻资讯 -->
      <div class="platform-news-information mta-hidden-xs">
        <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>
    <!-- 系统维护-->
    <el-dialog :close-on-click-modal="false" :visible.sync="systemMaintainDl" class="system-maintain-dialog"></el-dialog>
  </div>


</template>

<script>
  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
  Swiper.use([Navigation, Pagination,Autoplay]);
  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('333 =>', res2.data.data);
      return {
        bannerList: res1.data.data||[],
        topCarousels: res2.data.data||[],

      };

    },
    data() {
      return {
        SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
        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`),
        youkeFlag:false,// 控制游客系统是否维护中
        systemMaintainDl:false,// 系统维护弹窗
        swiperData: [
          { imgUrl: require(`~/static/images/client/index/index-products-kaoshi.png`)},
          { imgUrl: require(`~/static/images/client/index/index-products-peixun.png`) },
          { imgUrl: require(`~/static/images/client/index/index-products-kejian.png`) },
        ],
        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,
        },
        swiperOptionGn: {
          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,
        },
        swiperOptionCj: {
          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,
        },
      };
    },
    head(){
      return {
        title: '在线考试平台_在线考试软件_试卷软件系统',
        meta: [
          {
            name: 'keywords',
            content: '考试平台,试卷系统,试卷软件'
          },
          {
            name:'description',
            content:'麦塔考试系统具有良好高并发性和访问安全部署、严格的考试监控防作弊功能、PC移动支持多终端，随时随地考试、丰富的考试管理功能。'
          }
        ],
      }
    },
    computed:   {},
    methods:    {
      // 游客系统试用
      ykFreeTrial(){
        if(this.youkeFlag){
          // 没升级
          window.open('https://youkeksc.mtavip.com/kscmdist/#/youke')
        }else{
          // 升级中
          this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
        }
      },
      // 免费试用
      FreeTrial(){
        this.getSystemWidth();
          // 没升级
          if(this.SystemWidthFlag){
            window.open('https://cdnks.mtavip.com/mdist/#/webRegister?flug=1')
          }else{
            window.open('https://cdnks.mtavip.com/a/register?flug=1')

          }
      },
      // 判断是否为移动端
      getSystemWidth(){
        var browserWidth=document.documentElement.clientWidth;
        if(browserWidth <= 768){
          this.SystemWidthFlag = true;
        }else{
          this.SystemWidthFlag = false;
        }
      },
      // 考试体验按钮
      KsTyBtn(btnUrl){
        this.getSystemWidth();
        if(this.youkeFlag) {
          if(this.SystemWidthFlag){
            this.$router.push({ name: 'copyUrl', query: { url: btnUrl, } });
          }else {
            window.open(btnUrl);
          }
        }else{
          if(this.SystemWidthFlag){
            // 升级中
            this.$message({customClass:'phone-message-box',type: 'warning',message: '系统升级中，请稍后再试...'});
          }else{
            this.systemMaintainDl = true;
          }
        }
      },

      //  describe: 查看日志 author: Wgy date:6/8/21

      goCheckLog(){
        this.$router.push({ name: 'checkLogKaoshi' });
      },
      // 鼠标移入
      enterCode(){
        if(this.youkeFlag){
        this.$refs.codeBtn.style.bottom ='90px';
        }else{
          this.$refs.codeBtn.style.bottom ='0';
        }
      },

      // 鼠标移出
      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() {
      // 页面初始化
      this.$axios.$post('/home/youke/stop').then(res=>{
        if (res.data === '1') {
          this.youkeFlag = false;
        }else{
          this.youkeFlag = true;
        }
      });
    },
    mounted() {
      this.getSystemWidth();
    },
    beforeDestroy() {
    },
  };
</script>