<template>
  <div class="mian">
    <div class="content fl">
      <div class="title">考前须知</div>
      <div class="cont-left">
        <div class="h2">考前须知</div>
        <div class="explain">
          <div class="txt">“高级财富管理师”证书培训作为提升从业人员素质的基本途径，得到了监管部门、各金融机构及广大从业人员的高度认可，对于规范从业人员职业水平，实现从业人员自我管理起到了巨大的推动作用。</div>
          <div class="txt">不断规范“高级财富管理师”证书考试制度,目的是建立财富管理从业人员职业标准及用人规范,为金融机构和客户鉴别从业者能力提供识别标杆。为确保考试顺利有序进行，现将《考前须知》公示如下。请各位考生认真阅读，明确考试规则，遵守考试纪律，做好考前准备。</div>
          <div class="txt">预祝大家考试顺利！</div>
        </div>
        <div class="txt-cont" ref="catalog1" id="catalog1">
          <div class="tits">考试规则</div>
          <p>1.考生连接监考摄像头后，使用电脑Chrome浏览器，凭本人学习账号登陆在线学习系统，点击【我的考试-高级财富管理师证书考试】入口进入考试系统。</p>
          <p>2.考前30分钟，学员可进行“人脸识别”身份认证；请按系统提示填写本人真实信息，配合审核；认证失败请选择“人工审核”。</p>
          <p>3.考试时长60分钟，考试开始15分钟后，迟到考生无法进入系统；考试开始30分钟内，不可提前交卷；考试时间结束仍未提交试卷的，系统将自动提交。</p>
          <p>4.本次考试为闭卷考试，考试过程中请保持监考摄像头和电脑摄像头同时开启，系统会启动实时监控、随机拍照、及防切屏功能，切换及刷新页面超过3次、页面超时无操作，系统将强制交卷。</p>
        </div>
        <div class="txt-cont" ref="catalog2" id="catalog2">
          <div class="tits">考试纪律</div>
          <p>1.考生应诚信考试并自觉服从监考工作人员管理，不得以任何理由妨碍监考员等考试工作人员履行职责，不得扰乱考试秩序。</p>
          <p>2.考场环境要求：网络稳定通畅的独立空间,考场内不得摆放考试教材及任何与考试相关的参考资料，不得有考生以外的任何人出入；监考摄像头连接完毕后，请将手机静音放置在镜头可见处。</p>
          <p>3.考试过程中不得查看手机、翻看资料；不得随意走动、离开考场；答题期间不得无故关闭、遮挡摄像头；出现上述行为，一律按无效试卷处理。</p>
          <p>4.考试过程中遇到任何系统问题，请面向监考摄像头举手示意，得到监考老师同意后，方可电话联系班主任解决。</p>
        </div>
        <div class="txt-cont" ref="catalog3" id="catalog3">
          <div class="tits">考试流程</div>
          <ul>
            <li>
              <div class="l">
                <img src="../../assets/images/examina/exa-bg-li1.png" alt="">
              </div>
              <div class="li-txt">
                <div>·请在考前一周开始设备调试，系统将开设模拟考试入口，帮助考生熟悉系统</div>
                <div>·调试内容包括：监考摄像头链接、电脑（配置最新版Google Chrome浏览器及Adobe Flash Player软件，并确保Flash及电脑摄像头不被禁用，电脑需自带摄像头，以备启用考试防作弊系统）</div>
              </div>
            </li>
            <li>
              <div class="l">
                <img src="../../assets/images/examina/exa-bg-li2.png" alt="">
              </div>
              <div class="li-txt">
                <div>·15:30-16:15</div>
                <div>·清理考场环境，确认达到考场标准</div>
                <div>·再次确认考试电脑配置，连接监考摄像头，并摆放到指定位置</div>
              </div>
            </li>
            <li>
              <div class="l">
                <img src="../../assets/images/examina/exa-bg-li3.png" alt="">
              </div>
              <div class="li-txt">
                <div>·16:00-16:30</div>
                <div>·人脸识别功能开始，审核成功可进入考试页面等待考试开始</div>
                <div>·人脸识别失败，请点击“人工审核”，等待1分钟后刷新页面进入考试。请在考试电脑中提前上传身份证照片，以备人工审核环节使用。</div>
              </div>
            </li>
            <li>
              <div class="l">
                <img src="../../assets/images/examina/exa-bg-li4.png" alt="">
              </div>
              <div class="li-txt">
                <div>·16:30-17:30</div>
                <div>·请留意页面左侧“答题卡”，了解完整试卷，确保完成全部试题后再提交试卷，试卷提交后不可重复答题。</div>
              </div>
            </li>
            <li class="top">
              <div class="l">
                <img src="../../assets/images/examina/exa-bg-li5.png" alt="">
              </div>
              <div class="li-txt">
                <div>·提交试卷后，请持续关注系统 “公告”获得成绩查询信息。</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left" ref="catalog4" id="catalog4">
        <div class="txt-cont">
          <div class="tits">操作视频</div>
        </div>
        <video width="100%" height="100%" controls>
          <source src="https://zws-imgs-pub.ezijing.com/static/public/20dc3dd6dc9d7d773bfe0e2476314828.mp4" type="video/mp4">
        </video>
      </div>
    </div>
    <div class="content">
      <div class="cont-left" ref="catalog5" id="catalog5">
        <div class="txt-cont">
          <div class="tits">操作手册</div>
        </div>
        <div class="new-h2">
          <div class="h2">WMP在线考试系统操作手册</div>
        </div>
        <div class="txt-cont">
          <div class="tits">目录</div>
          <p>1.监考摄像头配置指南</p>
          <p>2.电脑配置指南</p>
          <p>3.考试系统操作指南</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont" ref="catalog5" id="catalog5">
          <div class="tits">监考摄像头配置指南</div>
          <div class="exa-main">
            <div class="min-tit">1.下载注册及设备绑定</div>
            <div class="con-mian step1-img-w">
              <img src="../../assets/images/examina/step1-1.png" alt="" class="step1-1">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step1-2.png" alt="" class="step1-2">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step1-3.png" alt="" class="step1-3">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">2.设备连接网络</div>
            </div>
            <div class="con-mian step2-img-w">
              <img src="../../assets/images/examina/step2-1.png" alt="" class="step2-1">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step2-2.png" alt="" class="step2-2">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step2-3.png" alt="" class="step2-3">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">3.添加成功</div>
            </div>
            <div class="con-mian step3-img-w">
              <img src="../../assets/images/examina/step3-1.png" alt="" class="step3-1">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step3-2.png" alt="" class="step3-2">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step3-3.png" alt="" class="step3-3">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">4.修改设备名字（如果已经修改成功这一步请忽略）</div>
            </div>
            <div class="con-mian step4-img-w">
              <img src="../../assets/images/examina/step4-1.png" alt="" class="step4-1">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step4-2.png" alt="" class="step4-2">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step4-3.png" alt="" class="step4-3">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step4-4.png" alt="" class="step4-4">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">5.解除绑定-考试结束后</div>
            </div>
            <div class="con-mian step5-img-w">
              <div class="tip-txt">特别提示：考试结束后请务必将摄像头设备解绑，否则会影响使用，感谢配合</div>
              <img src="../../assets/images/examina/step5-1.png" alt="" class="step5-1">
              <img src="../../assets/images/examina/step5-2.png" alt="" class="step5-2">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="tits">电脑配置指南</div>
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">1.下载最新版谷歌浏览器 <a href="https://www.google.cn/intl/zh-CN/chrome/">https://www.google.cn/intl/zh-CN/chrome/</a></div>
            </div>
            <div class="con-mian step6-img-w">
              <img src="../../assets/images/examina/step6-1.png" alt="" class="step6-1">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">2.更新电脑Flash插件 <a href="https://www.google.cn/intl/zh-CN/chrome/">https://www.google.cn/intl/zh-CN/chrome/</a></div>
            </div>
            <div class="con-mian step6-img-w">
              <img src="../../assets/images/examina/step7-1.png" alt="" class="step7-1">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">3.检查电脑Flash插件和摄像头没有被禁用</div>
            </div>
            <div class="con-mian step7-img-w">
              <div class="sbt">
                <img src="../../assets/images/lear-tips-icon.png" alt="">
                <div class="t">谷歌浏览器解除Flash插件禁用，操作步骤参考网址：</div>
              </div>
              <a href="https://jingyan.baidu.com/article/e4511cf367fdd62b845eafe3.html">https://jingyan.baidu.com/article/e4511cf367fdd62b845eafe3.html</a>
              <div class="sbt">
                <img src="../../assets/images/lear-tips-icon.png" alt="">
                <div class="t">摄像头解除禁用：</div>
              </div>
              <div class="tt">Windows系统：设置-隐私-相机或摄像头-打开允许权限</div>
              <div class="tt"> iOS系统：系统偏好设置-点击“flash player”-进入flash设置界面，在上方选项中点击“摄像头和麦克风”-选择“阻止所有站点使用摄像头和麦克风”</div>
              <div class="sbt">
                <img src="../../assets/images/lear-tips-icon.png" alt="">
                <div class="t">以上如有疑问，请联系班主任老师</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="tits">考试系统操作指南</div>
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">1.考场环境及摄像头画面标准-本人上半身、电脑、鼠标、手机需在视频内</div>
            </div>
            <div class="con-mian step6-img-w">
              <img src="../../assets/images/examina/step8-1.png" alt="" class="step8-1">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">2.考试系统操作指南-我的考试-人脸识别</div>
            </div>
            <div class="con-mian step4-img-w">
              <img src="../../assets/images/examina/step9-1.png" alt="" class="step4-1">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step9-2.png" alt="" class="step4-2">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step9-3.png" alt="" class="step4-3">
              <img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow">
              <img src="../../assets/images/examina/step9-4.png" alt="" class="step4-4">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">3.进入考试页面</div>
            </div>
            <div class="con-mian step6-img-w">
              <img src="../../assets/images/examina/step11-1.png" alt="" class="step8-1">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="cont-left">
        <div class="txt-cont">
          <div class="exa-main">
            <div class="padd-min-tit">
              <div class="min-tit">4.考试系统操作指南</div>
            </div>
            <div class="con-mian step6-img-w">
              <img src="../../assets/images/examina/step12-1.png" alt="" class="step8-1">
            </div>
            <div class="tip-t">操作过程中遇任何问题，请及时联系班主任处理，以免影响正常考试！</div>
          </div>
        </div>
      </div>
    </div>
    <div :class="showClass" ref="suspension">
        <div class="cont">
          <div class="titl">
            <img src="../../assets/images/lear-tips-micon.png" alt="">
            <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>
</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: ''
        }
      ]
    }
  },
  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>

<style lang="scss" scoped>
.mian{
  padding: 40px;
  .content{
    position: relative;
    background:rgba(255,255,255,1);
    border-radius:6px;
    padding: 0 40px 30px 40px;
    margin-bottom: 20px;
    .title{
      color: #333333;
      font-size: 18px;
      line-height: 65px;
      border-bottom: 1px solid rgba(204,204,204,1);
    }
    .cont-txt{
      padding-bottom: 30px;
      p{
        font-size:18px;
        color:#666666;
        line-height:30px;
        text-indent: 2em;
      }
    }
    .new-h2{
      margin-top: 30px;
    }
    .h2{
      font-size: 35px;
      color: #333333;
      text-align: center;
      padding: 10px 0;
    }
    .explain{
      .tits{
        font-size: 22px;
        color: #333333;
      }
      .txt{
        font-size: 18px;
        color:rgba(51,51,51,1);
        line-height:40px;
        width: 90%;
        margin: 0 auto;
        text-indent: 2em;
      }
    }
    .cont-left{
      width: 75%;
    }
    .txt-cont{
      margin-top: 20px;
      .tits{
        font-weight: bold;
        font-size: 22px;
        line-height: 40px;
        width: 100%;
        color: #333;
        border-bottom: 1px solid #cccccc;
        padding-top: 10px;
      }
      p{
        text-align:justify;
        color:rgba(51,51,51,1);
        font-size: 18px;
        line-height: 35px;
        margin-top: 15px;
        width: 90%;
        margin: 10px auto 0 auto;
        text-indent: -0.8em;
      }
      .qr-code{
        width: 35%;
        display: block;
        margin: 0 auto;
      }
      .img1{
        width: 80%;
        display: block;
        margin: 10px auto 0 auto;
      }
      .img2{
        width: 65%;
        margin: 10px auto;
        display:block;
      }
      .ind{
        text-indent: 2em;
      }
      ul{
        margin: 0 auto;
        padding: 27px 0 0 0;
        list-style: none;
        li.top{
          .li-txt{
            position: absolute;
            top: 55%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            left: 20%;
          }
        }
        li:nth-child(2){
          .l{
            opacity: 0.6;
          }
        }
        li:nth-child(3){
          .l{
            opacity: 0.7;
          }
        }
        li:nth-child(4){
          .l{
            opacity: 0.8;
          }
        }
        li:nth-child(5){
          .l{
            opacity: 0.9;
          }
        }
        li{
          position: relative;
          width: 100%;
          margin-bottom: 30px;
          overflow: hidden;
          .l{
            position: relative;
            float: left;
            width: 20%;
            opacity: 0.5;
            img{
              display: block;
              width: 100%;
            }
            span{
              position: absolute;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
              -o-transform: translate(-50%,-50%);
              -ms-transform: translate(-50%,-50%);
              color: #fff;
              font-size:20px;
              text-align: center;
              white-space: nowrap;
            }
          }
          .li-txt{
            float: left;
            width: 77%;
            margin-left: 3%;
            div{
              font-size: 18px;
              color:rgba(51,51,51,1);
              line-height: 30px;
            }
          }
        }
      }
    }
  }
    .cont-right.susp{
      position: fixed;
      right: -40px;
      top: 80px;
    }
    .cont-right{
      position: absolute;
      top: 150px;
      right: 0;
      width: 30%;
      .cont{
        width: 200px;
        margin: 0 auto;
        .titl{
          width: 100%;
          height: 73px;
          background: url('../../assets/images/lear-tips-mbg.png');
          background-size: 100% 100%;
        }
        .titl{
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 28px;
            height: 28px;
          }
          .txt{
            color:rgba(255,255,255,1);
            font-size: 22px;
            margin-left: 8px;
          }
        }
        ul{
          padding: 0;
          li.active{
            .name{
              color: #2994EA;
            }
            .prog{
              .pr1{
                background: #2994EA;
              }
              .pr2{
                background: #2994EA;
              }
            }
          }
          li{
            display: flex;
            list-style: none;
            width: 164px;
            margin: 0 auto 20px auto;
            cursor: pointer;
            .name{
              font-size: 18px;
              color: #999999;
            }
            .prog{
              width: 86px;
              margin-left: auto;
              position: relative;
              margin-top: 5px;
              .pr1{
                position: absolute;
                top: 8px;
                right: 0;
                width: 100%;
                height: 1px;
                background: #D8D8D8;
              }
              .pr2{
                position: absolute;
                top: 0;
                right: 0;
                width:16px;
                height:16px;
                background:rgba(216,216,216,1);
                border-radius: 50%;
              }
            }
          }
        }
      }
    }
}
.exa-main{
  .tip-t{
    font-size: 22px;
    color: #333333;
  }
  .padd-min-tit{
    padding: 8px 0 0 0;
  }
  .min-tit{
    color:rgba(51,51,51,1);
    font-size:18px;
    margin: 20px 0 20px 10px;
    a{
      color: #018AFF;
    }
  }
  .con-mian{
    display: table;
    img{
      vertical-align: middle;
    }
  }
  .step1-img-w{
    img{
      width: 30%;
    }
    .step-arrow{
      width: 5%;
    }
  }
  .step2-img-w{
    .step2-1{
      width: 23.5%;
    }
    .step2-2{
      width: 24.5%;
    }
    .step2-3{
      width: 41.5%;
    }
    .step-arrow{
      width: 5%;
    }
  }
  .step3-img-w{
    img{
      width: 30%;
    }
    .step-arrow{
      width: 5%;
    }
  }
  .step4-img-w{
    img{
      width: 21.25%;
    }
    .step-arrow{
      width: 5%;
    }
  }
  .step5-img-w{
    .tip-txt{
      width: 30%;
      color:rgba(255,41,41,1);
      font-size: 18px;
      display: inline-block;
    }
    img{
      width: 30%;
      margin-left: 3%;
    }
  }
  .step6-img-w{
    img{
      width: 100%;
    }
  }
  .step7-img-w{
    .sbt{
      overflow: hidden;
      margin-top: 15px;
    }
    img{
      float: left;
      width: 12px;
      height: 12px;
      margin: 7px 5px 0 0;
    }
    .t{
      float: left;
      color:rgba(51,51,51,1);
      font-size: 18px;
    }
    a{
      margin-left:20px;
      padding-top: 10px;
      font-size: 18px;
      color:rgba(1,138,255,1);
      display: block;
    }
    .tt{
      font-size: 18px;
      color: #333333;
      margin-left:20px;
      line-height: 30px;
      margin-top: 10px;
    }
  }
}
@media screen and (min-width: 1610px) {
  .mian .content .txt-cont ul li .l{
    width: 13%;
  }
  .mian .content .txt-cont ul li .li-txt div{
    font-size: 20px;
  }
  .mian .content .txt-cont ul li.top .li-txt{
    left: 13%;
  }
}
@media screen and (max-width: 1610px) {
  .mian .content .txt-cont ul li .li-txt div{
    font-size: 16px;
  }
}
</style>
