<template>
  <div class="mian">
    <!-- <div class="title">考前须知</div> -->
    <div class="content">
      <div class="cont-left">
        <div class="h2">考前须知</div>
        <p>
          为确保考试顺利有序进行，现将考试有关事项公示如下。请各位考生认真阅读，明确考试规则，遵守考试纪律，做好考前准备。
        </p>
        <div class="txt-cont" ref="catalog1" id="catalog1">
          <div class="tits">考试时间</div>
          <p>
            考试定于<span style="color: red">2021年9月5日 10:00—11:00</span>
            举行，考生务必准时参加考试。（请合理安排时间，以免错过）。
          </p>
        </div>
        <div class="txt-cont" ref="catalog2" id="catalog2">
          <div class="tits">考试内容</div>
          <p>1.题型：均为客观题，其中单选题20题，每题2分；多选题10题，每题3分；判断题15题，每题2分，总分100分。</p>
          <p>2.考点：试题内容70%源于教材学习内容，30%源于直播课程授课内容</p>
        </div>
        <div class="txt-cont" ref="catalog3" id="catalog3">
          <div class="tits">考试信息</div>
          <p>1.准考证号：学员手机号</p>
          <p>2.试考考试口令：148084</p>
          <p>3.正式考试口令：148085</p>
        </div>
        <div class="txt-cont" ref="catalog4" id="catalog4">
          <div class="tits">考试成绩</div>
          <p>考试成绩为“通过”或“未通过”，将在考试后以3 个工作日内通知考试结果，考试通过者可获得证书。</p>
        </div>
        <div class="txt-cont" ref="catalog5" id="catalog5">
          <div class="tits">考前准备</div>
          <p>本次考试采用互联网线上考试+全程视频监控的形式，监控部分将启用双视角监控，请考生自行准备以下设备:</p>
          <p>1.带摄像头的笔记本或台式PC，并确保设备能够在考试期间开启摄像头、接入稳定的互联网服务。</p>
          <p>2.可接入互联网的手机或pad,用于第二视角监控将使用进行，考试时按照考试要求角度和位置摆放。</p>
          <p>
            3.使用考试电脑登陆<a href="https://eztest.org/home/entry/" target="_blank">https://eztest.org/home/entry/</a
            >,提前下载并安装相关的考试系统（分为windows和Mac版）。
          </p>
        </div>
        <div class="txt-cont" ref="catalog6" id="catalog6">
          <div class="tits">试考</div>
          <p>为确保考生顺利参加考试，将提前开启考试系统帮助考生进行设备调试以及熟悉考试的流程。</p>
          <p style="color: red">1.试考时间：8月29日9:00-9月4日18:00</p>
          <p>2.客服答疑：试考期间每天的8:00-19:00，有任何问题可通过页面右侧在线客服寻求帮助。</p>
          <p>
            3.特别提示：试考仅用于学员提前熟悉考试流程及考试系统功能，模拟试题与实际考试无关，测试结果不计入本次学习的考试成绩。
          </p>
        </div>
        <div class="txt-cont" ref="catalog7" id="catalog7">
          <div class="tits">考试纪律</div>
          <p>
            1.正式考试开始30分钟前，考生可输入正式考试口令及手机号码登录考试系统，进行考前准备（包括确认考生信息、调试摄像头，开启第二视角监控等）等待正式开考。
          </p>
          <p>2.考试开始15分钟后，迟到考生无法进入系统。</p>
          <p>3.考试开始30分钟内，不可提交交卷；</p>
          <p>4.考试时间结束仍未提交试卷的，系统将强制自动提交</p>
          <p>5.考生只能使用一台设备登录参加考试，无法登录多台设备，考试过程中将全屏锁屏无法切换屏幕直至考试结束。</p>
          <p>
            6.考生应诚信考试并自觉服从监考工作人员管理，不得以任何理由妨碍监考员等考试工作人员履行职责，不得扰乱考试秩序。
          </p>
          <p>
            7.考场环境要求：考场内不得摆放考试教材及任何与考试相关的参考资料，不得有考生以外的任何人出入；考试期间摄像头全程开启，无遮挡，露出完整的头部、肩部、双耳在监控范围内，否则将判定为违纪。
          </p>
          <p>
            8.考试过程中不得任何形式翻看资料；不得随意走动、离开考场；答题期间不得无故关闭、遮挡摄像头；出现上述行为，一律按无效试卷处理。
          </p>
          <p>9.考试过程中遇到任何系统问题，可点击右下角“技术支持”咨询。</p>
        </div>
        <div class="txt-cont" ref="catalog8" id="catalog8">
          <div class="tits">设备调试操作指南</div>
          <p>1.考试场所</p>
          <p>
            考生应选择安静、光线充足、独立的空间独自参加考试，不建议在公共场所（如公共教室、图书馆、咖啡馆、办公室等）进行考试。
          </p>
          <p>2.用于在线考试的电脑</p>
          <p>
            安装考试客户端需要带正常上网功能的电脑，电脑操作系统要求为Windows（推荐Win7、Win10）或Mac
            OS（10.13以上）；考试用电脑具备可正常工作的摄像设备（内置或外置摄像头均可）；考试期间将全程使用摄像头，需确保电脑摄像头开启，无遮挡。
          </p>
          <p>3.用作鹰眼第二视角监控的设备</p>
          <p>
            带正常上网功能的智能手机或平板设备，必须带有可正常工作的摄像头，<span style="color: red"
              >且关闭自动锁屏功能</span
            >。监控设备推荐使用的浏览器要求如下：
          </p>
          <table border="1" class="table">
            <tr>
              <th>设备</th>
              <th colspan="2">智能手机/平板设备</th>
            </tr>
            <tr>
              <td>操作系统</td>
              <td>IOS</td>
              <td>Android</td>
            </tr>
            <tr>
              <td>系统版本</td>
              <td>IOS 11.0.2+</td>
              <td>Android 10+</td>
            </tr>
            <tr>
              <td>浏览器</td>
              <td>Safari 11+</td>
              <td>Chrome 75+</td>
            </tr>
            <tr>
              <td>摄像头</td>
              <td>有</td>
              <td>有</td>
            </tr>
            <tr>
              <td>关闭自动锁屏功能</td>
              <td>设置→显示与亮度→自动锁定→永不</td>
              <td>开发者工具中选择保持唤醒状态（按手机型号百度搜索）</td>
            </tr>
          </table>
          <p>4.考试设备调试</p>
          <p>
            开课前系统将开设模拟考试入口，帮助考生熟悉系统。考生需下载安装本次平台，输入手机号进入考试，完成摄像头调试及学员人脸认证拍照。<span
              style="color: red"
              >考试系统下载链接如下：<a href="https://eztest.org/home/entry/" target="_blank"
                >https://eztest.org/home/entry/</a
              ></span
            >
          </p>
          <div style="text-align: center">
            <img src="../../assets/images/examina/exa_01.png" />
          </div>
          <p>
            5.第二视角监控设备要求：手机扫码进入鹰眼监控，摄像头架设在考试设备的侧后方、距离1.5米-2米处、摄像头高度1.2-1.5米，与考试位置成45度角。
          </p>
          <div style="text-align: center">
            <img src="../../assets/images/examina/exa_02.png" />
          </div>
          <p>
            6.考试期间提示网络故障应及时修复。故障解决后，重新打开鹰眼监控，考生进入考试继续作答，网络故障发生之前的作答结果会保存；但由于考试设备或网络故障导致考试时间的损失、或无法完成考试的，将不会获得补时或补考的机会。
          </p>
          <p>
            7.关闭电脑、监控手机/平板上与考试无关的网页和软件，包括安全卫士、电脑管家及各类通讯软件，以免由于被动弹窗导致被系统判定为作弊。
          </p>
          <p>8.保证考试电脑、监控手机/平板设备电量充足，建议考试期间外接电源。</p>
        </div>
        <div class="txt-cont" ref="catalog9" id="catalog9">
          <div class="tits">联系方式</div>
          <p>考试系统相关问题请联系考试页面右侧“技术支持”，或考务电话：010-86462004。</p>
          <p>预祝大家考试顺利！</p>
        </div>
      </div>
      <div :class="showClass" ref="suspension">
        <div class="cont">
          <div class="titl">
            <img src="../../assets/images/lear-tips-micon.png" />
            <div class="txt">目录导航</div>
          </div>
          <ul>
            <template v-for="(item, index) in catalogList">
              <li :key="index" :class="item.active" @click="clickScroll(item.id, index)">
                <div class="name">{{ item.name }}</div>
                <div class="prog">
                  <div class="pr1"></div>
                  <div class="pr2"></div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showClass: 'cont-right',
      catalogList: [
        { name: '考试时间', id: 'catalog1', active: 'active' },
        { name: '考试内容', id: 'catalog2', active: '' },
        { name: '考试信息', id: 'catalog3', active: '' },
        { name: '考试成绩', id: 'catalog4', active: '' },
        { name: '考前准备', id: 'catalog5', active: '' },
        { name: '试考', id: 'catalog6', active: '' },
        { name: '考试纪律', id: 'catalog7', active: '' },
        { name: '设备调试操作指南', id: 'catalog8', active: '' },
        { name: '联系方式', id: 'catalog9', active: '' }
      ]
    }
  },
  mounted() {
    document.addEventListener('scroll', this.handleScrollx, true)
  },
  methods: {
    handleScrollx() {
      this.catalogList.map((item, index) => {
        if (!this.$refs[item.id]) {
          return
        }
        const offH = this.$refs[item.id].getBoundingClientRect().top
        if (offH < 140 && offH > -140) {
          for (let i = 0; i < this.catalogList.length; i++) {
            this.catalogList[i].active = ''
          }
          this.catalogList[index].active = 'active'
        }
      })
      document.documentElement.scrollTop > 100 ? (this.showClass = 'cont-right susp') : (this.showClass = 'cont-right')
    },
    clickScroll(id, index) {
      document.getElementById(id).scrollIntoView()
      this.catalogList.map((item, i) => {
        item.active = ''
      })
      this.catalogList[index].active = 'active'
    }
  }
}
</script>
