<template>
  <div class="mian" ref="catalog1" id="catalog1">
    <!-- <div class="title">学习须知</div> -->
    <div class="content fl">
      <div class="cont-left">
        <div class="h2">学习须知</div>
        <p style="text-indent: 0">尊敬的学员：</p>
        <p>您好!欢迎参加中国银行业协会“高级财富管理师”证书培训项目。为顺利完成学习及考试，请您阅读以下事项。</p>
        <p>预祝大家学习愉快，学有所获！</p>
        <div class="txt-cont" ref="catalog2" id="catalog2">
          <div class="tits">班级管理</div>
          <p>
            1.请严格遵守网络和信息化管理有关规定，不得在项目下任何交流平台发布关于政治、宗教、民族的不当言论；禁止散布任何不实消息和煽动性言论；不得侮辱讲师、教学管理人员及同学；不得发布任何形式的广告、外链、拉票消息。以上情况一经发现，立即取消培训资格。由此引起的法律责任，概由发起者负责。
          </p>
          <p>2.认真阅读研修日程安排和作息时间，提前做好个人工作及生活安排，保证充足学习及备考时间。</p>
          <p>
            3.自觉遵守培训纪律，每日上、下午自觉签到，不迟到、不早退；因故不能出席，需提前向班主任申请。上课时请关闭手机或设置为震动（无声），严禁在课堂上接打电话、随意走动。
          </p>
          <p>
            4.为尊重授课专家及其所在机构的知识产权，研修班仅提供书面讲义，恕不提供电子课件拷贝，请妥善保管学习资料。另外，出于内部资料保护的考虑，研修讲义与授课演示版内容会有细微差异，请大家理解。
          </p>
          <p>
            5.自觉爱护公共设施，下课自觉将周边垃圾清理干净；请妥善保管好个人物品及研修相关资料，确保人身、财产和信息安全。
          </p>
        </div>
        <div class="txt-cont" ref="catalog3" id="catalog3">
          <div class="tits">我的学习</div>
          <p>高级财富管理师证书学习内容包括：【教材学习】、【必修课程】、【拓展课程】，请按如下安排完成学习任务。</p>
          <p>1.教材学习：《私人银行理论与实务》为唯一考试指定教材，请提前购买学习。</p>
          <div style="text-align: center">
            <img src="../../assets/images/lear-tips-code.jpg" width="400" />
          </div>
          <p>2.必修课程：</p>
          <div style="text-align: center">
            <img src="@/assets/images/lear-tips-plan.png" />
          </div>
          <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" />
              <div class="rtxt">考试时间：8月28日 17:00-18:00</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" />
              <div class="rtxt">考试形式：现场闭卷笔试</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" />
              <div class="rtxt">考试时长：60分钟</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" />
              <div class="rtxt">考试题型：单选+多选+判断</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" />
              <div class="rtxt">通过标准：完成面授课程，考试成绩60分以上符合认证标准予以发放证书</div>
            </li>
            <li>
              <img src="../../assets/images/lear-tips-icon.png" />
              <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" />
              <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" />
              <div class="rtxt">查询方式:可通过输入姓名、证书编号或者身份证号任意两项进行查询。</div>
            </li>
          </ul>
          <div style="text-align: center">
            <img src="../../assets/images/lear-tips-img2.png" />
          </div>
        </div>
        <div class="txt-cont" ref="catalog6" id="catalog6">
          <div class="tits">继续教育</div>
          <p>
            参照人社部令第25号《专业技术人员继续教育规定》和《中国银行业专业人员继续教育管理办法》，中银协“高级财富管理师”证书要求持证人员参加继续教育，在规定的周期里完成一定的继续教育学时要求，是该证书项目专业化、规范化管理的重要环节。
          </p>
          <p>
            根据要求，获得本证书的持证学员，自获得证书的第二年开始继续教育学习，每自然年为一个继续教育周期，每个周期累计学时数不少于90学时。其中30指定学时中在中国银行业专业人员在线教育系统完成不少于20学时，10学时可通过中国银行业专业人员在线教育系统或参加银行业监管部门、中国银行业协会及各地银行业协（学、公）会、金融机构、大专院校以及其他合格教育培训机构组织的面授课程或网络培训完成；60自学实践学时通过参加其他自学或工作实践等学习完成。中国银行业专业人员在线教育系统网址：<a
              href="http://ucollege.china-cbi.net/"
              target="_blank"
              >http://ucollege.china-cbi.net/</a
            >；也可选择移动端学习，关注微信公众号：中银协在线教育。
          </p>
          <p>
            持证学员累计两个周期未完成继续教育，将无法在中国银行业协会专业人员职业资格考试证书查询系统中查询到该证书，直至补齐所有继续教育学时为止。
          </p>
          <div style="text-align: center">
            <img src="../../assets/images/lear-tips-img5.png" width="90%" />
            <img src="../../assets/images/lear-tips-img3.png" width="90%" />
          </div>
          <table border="1" class="table">
            <tr>
              <th>类型</th>
              <th>截至2021年3月</th>
            </tr>
            <tr>
              <td>专业基础课程</td>
              <td>218门、536.5学时</td>
            </tr>
            <tr>
              <td>政策法规与职业操守</td>
              <td>10门、21.5课时</td>
            </tr>
            <tr>
              <td>网络证书</td>
              <td>3门、56学时</td>
            </tr>
            <tr>
              <td>直播回放课程</td>
              <td>10门、10学时</td>
            </tr>
            <tr>
              <td>共计</td>
              <td>241门、624学时</td>
            </tr>
          </table>
          <p>
            截至2021年3月，系统累计提供网络学习课程332门，884学时，为行业人员打造了高质量的网络学习平台。课程内容专业权威，主要围绕监管动向，银行业和金融业的行业发展热点展开，内容丰富。课程体系系统全面，包括9大核心模块，例如政策法规、个人金融、公司金融、创新业务、风险管理、通用技能和健康生活，还包括近年来行业热点私人银行与财富管理、客户服务与开发等。学员5星评价占比持续保持在90%以上，4星以上评价占比持续保持在97%以上。
          </p>
        </div>
        <div class="txt-cont" ref="catalog7" id="catalog7">
          <div class="tits">交流平台</div>
          <p>
            【高级财富管理师俱乐部】公众号是“高级财富管理师”持证学员交流学习的平台，公众号主要有培训项目动态更新、行业资讯信息发布、行业经验分享、大咖访谈论道、优秀学员介绍以及继续教育学习等内容。
          </p>
          <div style="text-align: center"><img src="../../assets/images/lear-tips-img4.png" /></div>
        </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: ''
        }
      ]
    }
  },
  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>
