<template>
  <div class="mian" ref="catalog1" id="catalog1">
    <div class="content fl">
      <div class="title">学习须知</div>
      <div class="cont-left">
        <div class="h2">学习须知</div>
        <div class="explain">
          <div class="tits">尊敬的学员：</div>
          <div class="txt">您好!欢迎您参加中国银行业协会“高级财富管理师”证书培训项目。为顺利完成学习及考试，请您阅读以下事项。预祝大家学习愉快，学有所获！</div>
        </div>
        <div class="txt-cont" ref="catalog2" id="catalog2">
          <div class="tits">班级管理</div>
          <p>
            1.请严格遵守网络和信息化管理有关规定，不得在项目下任何交流平台发布关于政治、宗教、民族的不当言论；禁止散布任何不实消息和煽动性言论；不得侮辱讲师、教学管理人员及同学；不得发布任何形式的广告、外链、拉票消息。以上情况一经发现，立即取消培训资格。由此引起的法律责任，概由发起者负责。
          </p>
          <p>2.认真阅读“学习须知-我的学习”完整内容，提前做好个人工作及生活安排，保证充足学习及备考时间。</p>
          <p>3.《私人银行理论与实务》为唯一考试指定教材，请提前购买学习。</p>
          <img src="../../assets/images/lear-tips-code.png" alt="" class="qr-code" />
          <p>
            4.研修课程直播期间，请按时进入课堂，不迟到、不早退；因故不能出席者，需提前向班主任申请；必修课学习为获取证书的必要条件，缺课学员请通过课程回放完成学习，课程回放周期为30天。出于内部资料保护的考虑，必修课电子课件资料与授课演示版内容会有细微差异，请大家理解。
          </p>
          <p>5.本项目采取线上考试，远程监考。请认真阅读【考试须知】，考前做好设备测试，严格遵守考试纪律。如有违纪现象，立即取消考试资格。</p>
          <p>
            6.为尊重授课专家及其所在机构的知识产权，全部课程内容禁止任何形式的翻录行为。且项目下全部课程及资料仅供高级财富管理师证书学员学习使用，严禁其他任何形式的使用行为，无论该使用是否为商业用途。
          </p>
        </div>
        <div class="txt-cont" ref="catalog3" id="catalog3">
          <div class="tits">我的学习</div>
          <p>高级财富管理师证书学习内容包括：【教材学习】、【研修课程】、【拓展课程】，请按如下安排完成学习任务。</p>
          <p>
            1.教材学习：建议学习周期4星期，请按照【我的学习-教材学习-学习计划】充分备考；学习中遇到问题，可通过【我的学习-教材学习-教材提问】上传问题，学习导师会定时予以解答。
          </p>
          <p>2.研修课程：</p>
          <img src="../../assets/images/lear-tips-img1.png" alt="" class="img1" />
          <p>3.拓展课程：为帮助学员夯实金融基础，扩充财富管理知识储备，高级财富管理师证书培训项目开设丰富拓展课程，课程有效期1年，供学员考后持续学习。</p>
        </div>
        <div class="txt-cont" ref="catalog4" id="catalog4">
          <div class="tits">我的考试</div>
          <ul>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" alt="" />
              <div class="rtxt">考试时间：4月18日 16:30-17:30</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" alt="" />
              <div class="rtxt">考试形式：闭卷机考，仅限电脑登陆（手机/平板电脑无法进入考试系统）</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" alt="" />
              <div class="rtxt">考试时长：60分钟</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" alt="" />
              <div class="rtxt">考试题型：单选+多选+判断</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" alt="" />
              <div class="rtxt">通过标准：完成研修课程，考试成绩60分以上予以发放证书</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" alt="" />
              <div class="rtxt">证书发放：纸质证书邮寄发放</div>
            </li>
          </ul>
        </div>
        <div class="txt-cont" ref="catalog5" id="catalog5">
          <div class="tits">证书查询</div>
          <ul>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" alt="" />
              <div class="rtxt">查询地址：<a href="http://www.ccbp.org.cn/qitachaxun">http://www.ccbp.org.cn/qitachaxun</a></div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" alt="" />
              <div class="rtxt">查询方式:可通过输入姓名、证书编号或者身份证号任意两项进行查询。</div>
            </li>
          </ul>
          <img src="../../assets/images/lear-tips-img2.png" alt="" class="img2" />
        </div>
        <div class="txt-cont" ref="catalog6" id="catalog6">
          <div class="tits">继续教育</div>
          <p class="ind">
            根据中国银行业协会“高级财富管理师”证书继续教育要求，每年为一个继续教育周期，周期内需完成90学时继续教育学习，其中30个教育培训学时中，至少20学时在中国银行业专业人员在线教育系统上完成，其余10学时可通过中国银行业专业人员在线教育系统或参加银行业监管部门、中国银行业协会及各地银行业协（学、公）会、金融机构、大专院校以及其他合格教育培训机构组织的其他面授或网络培训完成。剩余的60自学实践学时可通过参加其他自学或工作实践等活动完成。
          </p>
          <p class="ind">
            请各位学员获取证书后，及时注册并在时限内完成学习，学习系统地址：<a href="http://ucollege.china-cbi.net/">http://ucollege.china-cbi.net/</a
            >；也可选择移动端学习，关注微信公众号：中银协在线教育。
          </p>
          <img src="../../assets/images/lear-tips-img3.png" alt="" class="img2" />
        </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>
  </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: ''
        }
      ]
    }
  },
  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 < 150 && offH > -150) {
          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;
    .title {
      color: #333333;
      font-size: 18px;
      line-height: 65px;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
      font-weight: bold;
    }
    .cont-txt {
      padding-bottom: 30px;
      p {
        font-size: 18px;
        color: #666666;
        line-height: 30px;
        text-indent: 2em;
      }
    }
    .h2 {
      font-size: 35px;
      color: #333333;
      text-align: center;
      padding: 10px 0;
      font-weight: bold;
    }
    .explain {
      .tits {
        font-size: 22px;
        color: #333333;
        font-weight: bold;
      }
      .txt {
        font-size: 18px;
        color: rgba(51, 51, 51, 1);
        line-height: 40px;
        width: 90%;
        margin: 0 auto;
      }
    }
    .cont-left {
      width: 75%;
    }
    .txt-cont {
      margin-top: 20px;
      .tits {
        font-size: 22px;
        line-height: 40px;
        width: 100%;
        color: #333;
        border-bottom: 1px solid #cccccc;
        font-weight: bold;
      }
      p {
        text-align: justify;
        color: rgba(51, 51, 51, 1);
        font-size: 18px;
        line-height: 40px;
        margin-top: 10px;
        width: 90%;
        margin: 10px auto 0 auto;
      }
      .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: 5px auto;
        li {
          margin-top: 15px;
          display: flex;
          img {
            width: 12px;
            height: 12px;
            margin-top: 8px;
          }
          .rtxt {
            color: #333333;
            font-size: 18px;
            margin-left: 5px;
            a {
              color: #3d7ad7;
            }
          }
        }
      }
    }
    .cont-right.susp {
      position: fixed;
      right: -10px;
      top: 80px;
    }
    .cont-right {
      position: absolute;
      top: 80px;
      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%;
              }
            }
          }
        }
      }
    }
  }
}
</style>
