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>
    </div>

    <!--  常见严肃性考试场景  -->
    <gangweiList label="常见严肃性考试场景" :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>


    <!--  严肃性考试解决方案  -->
    <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 green" v-if="item.zixun"/>
        </div>
      </imgCardLv2>
    </div>

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

    <!--  严肃性考试热门问答 PC -->
    <div class="client-wenda-box client-container mta-hidden-xs">
      <h4>严肃性考试热门问答</h4>
      <div class="wenda-content">
        <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 class="answer-box" v-if="curActive === 1">
          <div><span>问</span><span>考试前开启身份证、人脸识别是否会耽误考试时间？</span></div>
          <div><span>答</span><span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可</span>
          </div>
        </div>

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

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

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

        <div class="answer-box answer-kefu" v-if="curActive === 5">
          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
          <div>
            <span>答</span>
            <div class="answer-kefu-box">
              <div>
                <p>客服电话：400-0990-883</p>
                <p>客服 QQ：227551695</p>
              </div>
              <img :src="img1">
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  严肃性考试热门问答 H5 -->
    <div class="client-wenda-box-h5 client-container mta-hidden-sm">
      <h4>严肃性考试热门问答</h4>
      <div class="wenda-content">
        <div class="answer-box">
          <div><span>问</span><span>考试前开启身份证、人脸识别是否会耽误考试时间？</span></div>
          <div><span>答</span><span>我们提供了两种解决方案，1.现场采集头像，五分钟之内就能完成，方便快捷，不会耽误考试时间。2提前让考生提供近期2寸照，录入系统，考试之前直接识别即可</span>
          </div>
        </div>

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

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

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

        <div class="answer-box answer-kefu">
          <div><span>问</span><span>考试人数多的情况下系统稳定有保障吗？</span></div>
          <div>
            <span>答</span>
            <div class="answer-kefu-box">
              <div>
                <p>客服电话：400-0990-883</p>
                <p>客服 QQ：227551695</p>
              </div>
              <img :src="img1">
            </div>
          </div>
        </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/productImage/p13.png`),
            order: 1,
          },
          mianfei: true,
          zixun: true,
          shenqing: false,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '数据加密保护，保障考试信息安全',
            des: '',
            list: [
              {
                value: '考生答卷时禁止复制、粘贴考题，防止试题和答案泄露',
              },
              {
                value: '企业级技术框架；数据存储备份机制；算法、秘钥双重保险，数据安全可靠',
              },
              {
                value: '支持私有服务器部署内网考试，让考试数据更安全',
              },
            ],
            order: 1,
          },
          img: {
            url: require(`~/static/productImage/p14.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/productImage/p16.png`),
            order: 1,
          },
          mianfei: false,
          zixun: true,
          shenqing: true,
          myType: 'kaoshi'
        },
        {
          content: {
            title: '多维度统计分析，考试结果可视化',
            des: '',
            list: [
              {
                value: '智能判分系统，减轻管理员工工作压力，考后直接出成绩及排行榜等信息',
              },
              {
                value: '从用户、考试、成绩、试题、排名、机构等层面多维度分析考试结果，掌握考生考试情况',
              },
            ],
            order: 1,
          },
          img: {
            url: require(`~/static/productImage/p15.png`),
            order: 2,
          },
          mianfei: false,
          zixun: true,
          shenqing: true,
          myType: 'kaoshi'
        }
      ],
      curActive: 1,
      img1: require('static/codeImage/code-kefu.png'),
    }
  },
}
</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;
    }
  }
}

.client-banner-box {
  .banner-btn-groups.left {
    left: 88px;
    top: 472px;
    .solution-exam {
      color:#0a924a;
      width: 180px;
      height: 50px;
      line-height: 50px;
      background: #3ef897;
      border-color: #3ef897;
    }
  }
}

.client-xuanchuan-box {
  width: 100%;
  height: 240px;
  background-image: url("~static/codeImage/code-bj01.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 110px 0 0 0;
  margin: 0 auto;
  text-align: center;

  h4 {
    color: #fff;
    font-size: 40px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
  }

  .solution-exam-online {
    background: #F7DA5C;
    color: #fff;
    border-color: #F7DA5C;
  }
}

.client-wenda-box {
  margin-top: 50px;

  h4 {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin-bottom: 70px;
  }

  .wenda-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 45px;
    border-radius: 12px;
    border: 1px solid #00b96b;
    height: 330px;
  }

  ul {
    width: 50%;
    margin-left: 20px;

    li {
      color: #333;
      font-weight: 500;
      line-height: 30px;
      font-size: 18px;
      margin-bottom: 18px;
      cursor: pointer;

      &.active {
        color: #00b96b;
      }
    }
  }

  .answer-box {
    width: 50%;

    > div {
      font-weight: 500;
      color: #333;
      margin-bottom: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      span:first-child {
        width: 34px;
        height: 34px;
        line-height: 34px;
        display: inline-block;
        color: #fff;
        background: #7cc659;
        border-radius: 6px;
        margin-right: 10px;
        text-align: center;
        align-self: flex-start;
        flex-shrink: 0;
      }

      &:first-child span {
        margin-top: 40px;
      }
    }

    &.answer-kefu {

      .answer-kefu-box {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        > div {
          margin-right: 40px;
        }
      }

      img {
        width: 200px;
        height: 200px;
      }
    }
  }
}

@media (max-width: 768px) {

  .client-xuanchuan-box {
    width: 100%;
    height: 110px;
    background-image: url("~static/codeImage/code-bj01.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10% 0 0 0;
    margin: 0 auto 20px;
    text-align: center;

    h4 {
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      text-align: center;
      margin-bottom: 3%;
    }
  }

  .client-wenda-box-h5 {
    h4 {
      font-size: 18px;
      font-weight: 800;
      color: #333;
      text-align: center;
      margin-bottom: 7%;
    }

    ul {
      width: 50%;
      margin-left: 20px;

      li {
        color: #333;
        font-weight: 500;
        line-height: 1.5;
        font-size: 14px;
        margin-bottom: 10px;
        cursor: pointer;

        &.active {
          color: #00b96b;
        }
      }
    }

    .answer-box {
      padding: 10px;
      border:  1px solid #ccc;
      margin-bottom: 20px;
      border-radius: 8px;

      > div {
        font-weight: 500;
        color: #333;
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;

        span:first-child {
          display: inline-block;
          color: #fff;
          background-color: #00b96b;
          border-radius: 12px;
          padding: 10px;
          margin-right: 10px;
          align-self: flex-start;
        }

        &:first-child span {
          margin-top: 40px;
        }
      }

      &.answer-kefu {


        .answer-kefu-box {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;

          > div {
            margin-right: 40px;
          }
        }

        img {
          width: 100px;
          height: 100px;
        }
      }
    }
  }

  .platform-products-services {

    .client-title {
      font-size: 18px;
      margin-top: 30px;
    }
  }


}

</style>