nuxtProject/pages/examsystem/index.vue

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

      <!-- 考试平台页 banner栏 -->
      <div class="client-platform-banner" v-if="bannerList.length>0">
        <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="client-scene-box">
        <div class="client-container">
          <h4 class="client-title">满足12大考试应用场景</h4>
          <ul>
            <li><div><span><i></i></span><p>招聘考试</p></div></li>
            <li><div><span><i></i></span><p>资格考试</p></div></li>
            <li><div><span><i></i></span><p>员工考试</p></div></li>
            <li><div><span><i></i></span><p>需求调研</p></div></li>
            <li><div><span><i></i></span><p>渠道考核</p></div></li>
            <li><div><span><i></i></span><p>随堂测验</p></div></li>
            <li><div><span><i></i></span><p>知识竞猜</p></div></li>
            <li><div><span><i></i></span><p>模拟考试</p></div></li>
            <li><div><span><i></i></span><p>职业考核</p></div></li>
            <li><div><span><i></i></span><p>岗位晋升</p></div></li>
            <li><div><span><i></i></span><p>经销商考试</p></div></li>
            <li><div><span><i></i></span><p>党章考试</p></div></li>
          </ul>
        </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><span>创建考试</span><i>1</i></h5>
                <p class="p-before-circle">手动录入或批量导入试题，完善考试系统试题库</p>
                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="onlineFun">在线咨询</span></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><span>发布考试</span><i>2</i></h5>
                <p class="p-before-circle">可选择创建新试卷，或从试卷库中选择一张试卷进行考试</p>
                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="onlineFun">在线咨询</span></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><span>开始考试</span><i>3</i></h5>
                <p class="p-before-circle">学员使用电脑或移动设备进行考试</p>
                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="onlineFun">在线咨询</span></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><span>自动批阅</span><i>4</i></h5>
                <p class="p-before-circle">支持自动评卷。系统可根据事先录入的正确答案进行判分</p>
                <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-Btn" @click="onlineFun">在线咨询</span></div>
              </div>
            </div>
            </div>
          </li>
        </ul>

      </div>

      <!-- 六大管理中心，助你轻松组织考试 -->
      <div class="client-examOrg-box">
        <div class="client-container">
          <h4 class="client-title">六大管理中心，助你轻松组织考试</h4>
          <div class="exam-dl-box">
            <dl>
              <dt>用户管理中心</dt>
              <dd>机构管理</dd>
              <dd>部门管理</dd>
              <dd>人员管理</dd>
              <dd>角色管理</dd>
              <dd>权限管理</dd>
            </dl>
            <dl>
              <dt>试题管理中心</dt>
              <dd>试题分类</dd>
              <dd>试题类型</dd>
              <dd>试题难度</dd>
              <dd>手动录入</dd>
              <dd>批量添加</dd>
            </dl>
            <dl>
              <dt>试卷管理中心</dt>
              <dd>固定试卷</dd>
              <dd>随机试卷</dd>
              <dd>指定分数</dd>
              <dd>试卷导出</dd>
            </dl>
            <dl>
              <dt>考试管理中心</dt>
              <dd>考生范围</dd>
              <dd>时间范围</dd>
              <dd>防止作弊</dd>
              <dd>评卷范围</dd>
              <dd>查看成绩</dd>
              <dd>错题重做</dd>
              <dd>证书管理</dd>
            </dl>
            <dl>
              <dt>统计管理中心</dt>
              <dd>用户属性</dd>
              <dd>考试分析</dd>
              <dd>大数据分析</dd>
            </dl>
            <dl>
              <dt>系统管理中心</dt>
              <dd>用户注册</dd>
              <dd>注册审核</dd>
              <dd>试卷审核</dd>
              <dd>考试审核</dd>
              <dd>数据备份</dd>
              <dd>接口对接</dd>
            </dl>
          </div>
          <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial">免费试用</div><span  class="client-default-white-Btn" @click="onlineFun">在线咨询</span></div>
        </div>
      </div>

    </div>
    <reg-dialog :dialogVisible="regDialogFlag"  systemType="ksAdmin" @changeShow="showRegDialogUpdate"></reg-dialog>
  </div>


</template>

<script>
  import regDialog from '~/components/registerDialog';
  import Swiper, {Navigation, Pagination,Autoplay} from 'swiper';
  Swiper.use([Navigation, Pagination,Autoplay]);
  export default {
    name:       'examsystem',
    layout:'templateB',
    components: {
      regDialog,
    },
    async asyncData({ $axios,store }) {
      // 设置选中菜单
      store.commit('setActiveNav', '/examsystem');

      let [res1] = await Promise.all([
                                             await $axios.$post(`/home/banner/list`, { 'code': 2 }).then(res => {
                                               return res;
                                             }),
                                           ]);
      return {
        bannerList: res1.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`),
        regDialogFlag:false,
      };
    },
    head(){
      return {
        title: '考试软件_考试软件app_考试软件系统下载',
        meta: [
          {
            name: 'keywords',
            content: '考试软件下载,考试系统下载'
          },
          {
            name:'description',
            content:'久创考试软件系统是一款功能齐全的网上考试系统，能适应模拟考试、在线竞答、知识竞赛、严肃考试等多种考试场景，拥有批量录题出卷，智能防作弊，自动阅卷分析，形成清晰考试报表等多功能，简单易用。'
          }
        ],
      }
    },
    computed:   {},
    methods:    {
      // 弹窗关闭
      showRegDialogUpdate(data){
        this.regDialogFlag  = !data
        if(data === 'false'){
          this.regDialogFlag = false
        }else{
          this.regDialogFlag = true
        }
      },
      // 免费试用
      FreeTrial(){
        this.regDialogFlag = true;
      },

      // 在线咨询
      onlineFun(){
        window.open('https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd')
      },

      // banner点击
      clickBanner(data){
        if(data){
          window.open(data)
        }
      },
    },
    created() {

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