Skip to content

L
learn-online-pc
提交 c67fb09d authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

修改考前须知和学习须知文字内容

上级 f3316ebf
隐藏空白字符变更
内嵌 并排
正在显示 包含 1337 行增加 和 597 行删除
src/pages/tips/examinaTips.copy.vue 0 → 100644
浏览文件 @ c67fb09d
<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>
src/pages/tips/examinaTips.vue
浏览文件 @ c67fb09d
...@@ -3,368 +3,192 @@ ...@@ -3,368 +3,192 @@
<div class="content fl"> <div class="content fl">
<div class="title">考前须知</div> <div class="title">考前须知</div>
<div class="cont-left"> <div class="cont-left">
<div class="h2">考前须知</div> <div class="h2">关于高级财富管理师证书考试的有关事项通知</div>
<div class="explain"> <div class="explain">
<div class="txt">“高级财富管理师”证书培训作为提升从业人员素质的基本途径，得到了监管部门、各金融机构及广大从业人员的高度认可，对于规范从业人员职业水平，实现从业人员自我管理起到了巨大的推动作用。</div> <div class="txt" style="text-indent: 0">各位学员：</div>
<div class="txt">不断规范“高级财富管理师”证书考试制度,目的是建立财富管理从业人员职业标准及用人规范,为金融机构和客户鉴别从业者能力提供识别标杆。为确保考试顺利有序进行，现将《考前须知》公示如下。请各位考生认真阅读，明确考试规则，遵守考试纪律，做好考前准备。</div> <div class="txt">
<div class="txt">预祝大家考试顺利！</div> 为确保考试顺利有序进行，现将考试有关事项公示如下。请各位考生认真阅读，明确考试规则，遵守考试纪律，做好考前准备。
</div>
</div> </div>
<div class="txt-cont" ref="catalog1" id="catalog1"> <div class="txt-cont" ref="catalog1" id="catalog1">
<div class="tits">考试规则</div> <div class="tits">考试时间</div>
<p>1.考生连接监考摄像头后，使用电脑Chrome浏览器，凭本人学习账号登陆在线学习系统，点击【我的考试-高级财富管理师证书考试】入口进入考试系统。</p> <p>
<p>2.考前30分钟，学员可进行“人脸识别”身份认证；请按系统提示填写本人真实信息，配合审核；认证失败请选择“人工审核”。</p> 考试定于<span style="color: red">2021 年 4 月 1 8日 16:30—17:30</span>
<p>3.考试时长60分钟，考试开始15分钟后，迟到考生无法进入系统；考试开始30分钟内，不可提前交卷；考试时间结束仍未提交试卷的，系统将自动提交。</p> 举行，考生务必准时参加考试。（请合理安排时间，以免错过）。
<p>4.本次考试为闭卷考试，考试过程中请保持监考摄像头和电脑摄像头同时开启，系统会启动实时监控、随机拍照、及防切屏功能，切换及刷新页面超过3次、页面超时无操作，系统将强制交卷。</p> </p>
</div> </div>
<div class="txt-cont" ref="catalog2" id="catalog2"> <div class="txt-cont" ref="catalog2" id="catalog2">
<div class="tits">考试纪律</div> <div class="tits">考试内容</div>
<p>1.考生应诚信考试并自觉服从监考工作人员管理，不得以任何理由妨碍监考员等考试工作人员履行职责，不得扰乱考试秩序。</p> <p>1.题型：均为客观题，其中单选题20题，每题2分；多选题10题，每题3分；判断题15题，每题2分，总分100分。</p>
<p>2.考场环境要求：网络稳定通畅的独立空间,考场内不得摆放考试教材及任何与考试相关的参考资料，不得有考生以外的任何人出入；监考摄像头连接完毕后，请将手机静音放置在镜头可见处。</p> <p>2.考点：试题内容70%源于教材学习内容，30%源于直播课程授课内容</p>
<p>3.考试过程中不得查看手机、翻看资料；不得随意走动、离开考场；答题期间不得无故关闭、遮挡摄像头；出现上述行为，一律按无效试卷处理。</p>
<p>4.考试过程中遇到任何系统问题，请面向监考摄像头举手示意，得到监考老师同意后，方可电话联系班主任解决。</p>
</div> </div>
<div class="txt-cont" ref="catalog3" id="catalog3"> <div class="txt-cont" ref="catalog3" id="catalog3">
<div class="tits">考试流程</div> <div class="tits">考试信息</div>
<ul> <p>1.准考证号：学员手机号</p>
<li> <p>2.试考考试口令：122026</p>
<div class="l"> <p>3.正式考试口令：122285</p>
<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>
<div class="new-h2"> <div class="txt-cont" ref="catalog4" id="catalog4">
<div class="h2">WMP在线考试系统操作手册</div> <div class="tits">考试成绩</div>
<p>考试成绩为“通过”或“未通过”，将在考试后以3 个工作日内通知考试结果，考试通过者可获得证书。</p>
</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="txt-cont" ref="catalog5" id="catalog5">
<div class="tits">监考摄像头配置指南</div> <div class="tits">考前准备</div>
<div class="exa-main"> <p>本次考试采用互联网线上考试+全程视频监控的形式，监控部分将启用双视角监控，请考生自行准备以下设备:</p>
<div class="min-tit">1.下载注册及设备绑定</div> <p>1.带摄像头的笔记本或台式PC，并确保设备能够在考试期间开启摄像头、接入稳定的互联网服务。</p>
<div class="con-mian step1-img-w"> <p>2.可接入互联网的手机或pad,用于第二视角监控将使用进行，考试时按照考试要求角度和位置摆放。</p>
<img src="../../assets/images/examina/step1-1.png" alt="" class="step1-1"> <p>
<img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow"> 3.使用考试电脑登陆<a href="https://eztest.org/home/entry/" target="_blank">https://eztest.org/home/entry/</a
<img src="../../assets/images/examina/step1-2.png" alt="" class="step1-2"> >,提前下载并安装相关的考试系统（分为windows和Mac版）。
<img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow"> </p>
<img src="../../assets/images/examina/step1-3.png" alt="" class="step1-3">
</div>
</div>
</div> </div>
</div> <div class="txt-cont" ref="catalog6" id="catalog6">
</div> <div class="tits">试考</div>
<div class="content"> <p>为确保考生顺利参加考试，将提前开启考试系统帮助考生进行设备调试以及熟悉考试的流程。</p>
<div class="cont-left"> <p style="color: red">1.试考时间：4月10日15:30-4月18日14:00</p>
<div class="txt-cont"> <p>2.客服答疑：试考期间每天的8:00-19:00，有任何问题可通过页面右侧在线客服寻求帮助。</p>
<div class="exa-main"> <p>
<div class="padd-min-tit"> 3.特别提示：试考仅用于学员提前熟悉考试流程及考试系统功能，模拟试题与实际考试无关，测试结果不计入本次学习的考试成绩。
<div class="min-tit">2.设备连接网络</div> </p>
</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="txt-cont" ref="catalog7" id="catalog7">
</div> <div class="tits">考试纪律</div>
<div class="content"> <p>
<div class="cont-left"> 1.正式考试开始30分钟前，考生可输入正式考试口令及手机号码登录考试系统，进行考前准备（包括确认考生信息、调试摄像头，开启第二视角监控等）等待正式开考。
<div class="txt-cont"> </p>
<div class="exa-main"> <p>2.考试开始15分钟后，迟到考生无法进入系统。</p>
<div class="padd-min-tit"> <p>3.考试开始30分钟内，不可提交交卷；</p>
<div class="min-tit">3.添加成功</div> <p>4.考试时间结束仍未提交试卷的，系统将强制自动提交</p>
</div> <p>5.考生只能使用一台设备登录参加考试，无法登录多台设备，考试过程中将全屏锁屏无法切换屏幕直至考试结束。</p>
<div class="con-mian step3-img-w"> <p>
<img src="../../assets/images/examina/step3-1.png" alt="" class="step3-1"> 6.考生应诚信考试并自觉服从监考工作人员管理，不得以任何理由妨碍监考员等考试工作人员履行职责，不得扰乱考试秩序。
<img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow"> </p>
<img src="../../assets/images/examina/step3-2.png" alt="" class="step3-2"> <p>
<img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow"> 7.考场环境要求：考场内不得摆放考试教材及任何与考试相关的参考资料，不得有考生以外的任何人出入；考试期间摄像头全程开启，无遮挡，露出完整的头部、肩部、双耳在监控范围内，否则将判定为违纪。
<img src="../../assets/images/examina/step3-3.png" alt="" class="step3-3"> </p>
</div> <p>
</div> 8.考试过程中不得任何形式翻看资料；不得随意走动、离开考场；答题期间不得无故关闭、遮挡摄像头；出现上述行为，一律按无效试卷处理。
</p>
<p>9.考试过程中遇到任何系统问题，可点击右下角“技术支持”咨询。</p>
</div> </div>
</div> <div class="txt-cont" ref="catalog8" id="catalog8">
</div> <div class="tits">设备调试操作指南</div>
<div class="content"> <p>1.考试场所</p>
<div class="cont-left"> <p>
<div class="txt-cont"> 考生应选择安静、光线充足、独立的空间独自参加考试，不建议在公共场所（如公共教室、图书馆、咖啡馆、办公室等）进行考试。
<div class="exa-main"> </p>
<div class="padd-min-tit"> <p>2.用于在线考试的电脑</p>
<div class="min-tit">4.修改设备名字（如果已经修改成功这一步请忽略）</div> <p>
</div> 安装考试客户端需要带正常上网功能的电脑，电脑操作系统要求为Windows（推荐Win7、Win10）或Mac
<div class="con-mian step4-img-w"> OS（10.13以上）；考试用电脑具备可正常工作的摄像设备（内置或外置摄像头均可）；考试期间将全程使用摄像头，需确保电脑摄像头开启，无遮挡。
<img src="../../assets/images/examina/step4-1.png" alt="" class="step4-1"> </p>
<img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow"> <p>3.用作鹰眼第二视角监控的设备</p>
<img src="../../assets/images/examina/step4-2.png" alt="" class="step4-2"> <p>
<img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow"> 带正常上网功能的智能手机或平板设备，必须带有可正常工作的摄像头，<span style="color: red"
<img src="../../assets/images/examina/step4-3.png" alt="" class="step4-3"> >且关闭自动锁屏功能</span
<img src="../../assets/images/examina/step-arrow.png" alt="" class="step-arrow"> >。监控设备推荐使用的浏览器要求如下：
<img src="../../assets/images/examina/step4-4.png" alt="" class="step4-4"> </p>
</div> <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> </div>
</div> <p>
</div> 5.第二视角监控设备要求：手机扫码进入鹰眼监控，摄像头架设在考试设备的侧后方、距离1.5米-2米处、摄像头高度1.2-1.5米，与考试位置成45度角。
</div> </p>
<div class="content"> <div style="text-align: center">
<div class="cont-left"> <img src="../../assets/images/examina/exa_02.png" />
<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>
<p>
6.考试期间提示网络故障应及时修复。故障解决后，重新打开鹰眼监控，考生进入考试继续作答，网络故障发生之前的作答结果会保存；但由于考试设备或网络故障导致考试时间的损失、或无法完成考试的，将不会获得补时或补考的机会。
</p>
<p>
7.关闭电脑、监控手机/平板上与考试无关的网页和软件，包括安全卫士、电脑管家及各类通讯软件，以免由于被动弹窗导致被系统判定为作弊。
</p>
<p>8.保证考试电脑、监控手机/平板设备电量充足，建议考试期间外接电源。</p>
</div> </div>
</div> <div class="txt-cont" ref="catalog9" id="catalog9">
</div> <div class="tits">联系方式</div>
<div class="content"> <p>考试系统相关问题请联系考试页面右侧“技术支持”，或考务电话：010-86462004。</p>
<div class="cont-left"> <p>预祝大家考试顺利！</p>
<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>
</div> </div>
<div class="content"> <div :class="showClass" ref="suspension">
<div class="cont-left"> <div class="cont">
<div class="txt-cont"> <div class="titl">
<div class="exa-main"> <img src="../../assets/images/lear-tips-micon.png" alt="" />
<div class="padd-min-tit"> <div class="txt">目录导航</div>
<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> <ul>
</div> <template v-for="(item, index) in catalogList">
<div class="content"> <li :key="index" :class="item.active" @click="clickScroll(item.id, index)">
<div class="cont-left"> <div class="name">{{ item.name }}</div>
<div class="txt-cont"> <div class="prog">
<div class="exa-main"> <div class="pr1"></div>
<div class="padd-min-tit"> <div class="pr2"></div>
<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> </li>
</div> </template>
</div> </ul>
</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> </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> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
showClass: 'cont-right', showClass: 'cont-right',
catalogList: [ catalogList: [
{ { name: '考试时间', id: 'catalog1', active: 'active' },
name: '考试规则', { name: '考试内容', id: 'catalog2', active: '' },
id: 'catalog1', { name: '考试信息', id: 'catalog3', active: '' },
active: 'active' { name: '考试成绩', id: 'catalog4', active: '' },
}, { name: '考前准备', id: 'catalog5', active: '' },
{ { name: '试考', id: 'catalog6', active: '' },
name: '考试纪律', { name: '考试纪律', id: 'catalog7', active: '' },
id: 'catalog2', { name: '设备调试操作指南', id: 'catalog8', active: '' },
active: '' { name: '联系方式', id: 'catalog9', active: '' }
},
{
name: '考试流程',
id: 'catalog3',
active: ''
},
{
name: '操作视频',
id: 'catalog4',
active: ''
},
{
name: '操作手册',
id: 'catalog5',
active: ''
}
] ]
} }
}, },
...@@ -372,9 +196,11 @@ export default { ...@@ -372,9 +196,11 @@ export default {
document.addEventListener('scroll', this.handleScrollx, true) document.addEventListener('scroll', this.handleScrollx, true)
}, },
methods: { methods: {
handleScrollx () { handleScrollx() {
this.catalogList.map((item, index) => { this.catalogList.map((item, index) => {
if (!this.$refs[item.id]) { return } if (!this.$refs[item.id]) {
return
}
const offH = this.$refs[item.id].getBoundingClientRect().top const offH = this.$refs[item.id].getBoundingClientRect().top
if (offH < 140 && offH > -140) { if (offH < 140 && offH > -140) {
for (let i = 0; i < this.catalogList.length; i++) { for (let i = 0; i < this.catalogList.length; i++) {
...@@ -383,9 +209,9 @@ export default { ...@@ -383,9 +209,9 @@ export default {
this.catalogList[index].active = 'active' this.catalogList[index].active = 'active'
} }
}) })
document.documentElement.scrollTop > 100 ? this.showClass = 'cont-right susp' : this.showClass = 'cont-right' document.documentElement.scrollTop > 100 ? (this.showClass = 'cont-right susp') : (this.showClass = 'cont-right')
}, },
clickScroll (id, index) { clickScroll(id, index) {
document.getElementById(id).scrollIntoView() document.getElementById(id).scrollIntoView()
this.catalogList.map((item, i) => { this.catalogList.map((item, i) => {
item.active = '' item.active = ''
...@@ -397,58 +223,58 @@ export default { ...@@ -397,58 +223,58 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mian{ .mian {
padding: 40px; padding: 40px;
.content{ .content {
position: relative; position: relative;
background:rgba(255,255,255,1); background: rgba(255, 255, 255, 1);
border-radius:6px; border-radius: 6px;
padding: 0 40px 30px 40px; padding: 0 40px 30px 40px;
margin-bottom: 20px; margin-bottom: 20px;
.title{ .title {
color: #333333; color: #333333;
font-size: 18px; font-size: 18px;
line-height: 65px; line-height: 65px;
border-bottom: 1px solid rgba(204,204,204,1); border-bottom: 1px solid rgba(204, 204, 204, 1);
} }
.cont-txt{ .cont-txt {
padding-bottom: 30px; padding-bottom: 30px;
p{ p {
font-size:18px; font-size: 18px;
color:#666666; color: #666666;
line-height:30px; line-height: 30px;
text-indent: 2em; text-indent: 2em;
} }
} }
.new-h2{ .new-h2 {
margin-top: 30px; margin-top: 30px;
} }
.h2{ .h2 {
font-size: 35px; font-size: 35px;
color: #333333; color: #333333;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
} }
.explain{ .explain {
.tits{ .tits {
font-size: 22px; font-size: 22px;
color: #333333; color: #333333;
} }
.txt{ .txt {
font-size: 18px; font-size: 18px;
color:rgba(51,51,51,1); color: rgba(51, 51, 51, 1);
line-height:40px; line-height: 40px;
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
text-indent: 2em; text-indent: 2em;
} }
} }
.cont-left{ .cont-left {
width: 75%; width: 75%;
} }
.txt-cont{ .txt-cont {
margin-top: 20px; margin-top: 20px;
.tits{ .tits {
font-weight: bold; font-weight: bold;
font-size: 22px; font-size: 22px;
line-height: 40px; line-height: 40px;
...@@ -457,9 +283,9 @@ export default { ...@@ -457,9 +283,9 @@ export default {
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
padding-top: 10px; padding-top: 10px;
} }
p{ p {
text-align:justify; text-align: justify;
color:rgba(51,51,51,1); color: rgba(51, 51, 51, 1);
font-size: 18px; font-size: 18px;
line-height: 35px; line-height: 35px;
margin-top: 15px; margin-top: 15px;
...@@ -467,30 +293,30 @@ export default { ...@@ -467,30 +293,30 @@ export default {
margin: 10px auto 0 auto; margin: 10px auto 0 auto;
text-indent: -0.8em; text-indent: -0.8em;
} }
.qr-code{ .qr-code {
width: 35%; width: 35%;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.img1{ .img1 {
width: 80%; width: 80%;
display: block; display: block;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;
} }
.img2{ .img2 {
width: 65%; width: 65%;
margin: 10px auto; margin: 10px auto;
display:block; display: block;
} }
.ind{ .ind {
text-indent: 2em; text-indent: 2em;
} }
ul{ ul {
margin: 0 auto; margin: 0 auto;
padding: 27px 0 0 0; padding: 27px 0 0 0;
list-style: none; list-style: none;
li.top{ li.top {
.li-txt{ .li-txt {
position: absolute; position: absolute;
top: 55%; top: 55%;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
...@@ -500,61 +326,61 @@ export default { ...@@ -500,61 +326,61 @@ export default {
left: 20%; left: 20%;
} }
} }
li:nth-child(2){ li:nth-child(2) {
.l{ .l {
opacity: 0.6; opacity: 0.6;
} }
} }
li:nth-child(3){ li:nth-child(3) {
.l{ .l {
opacity: 0.7; opacity: 0.7;
} }
} }
li:nth-child(4){ li:nth-child(4) {
.l{ .l {
opacity: 0.8; opacity: 0.8;
} }
} }
li:nth-child(5){ li:nth-child(5) {
.l{ .l {
opacity: 0.9; opacity: 0.9;
} }
} }
li{ li {
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 30px;
overflow: hidden; overflow: hidden;
.l{ .l {
position: relative; position: relative;
float: left; float: left;
width: 20%; width: 20%;
opacity: 0.5; opacity: 0.5;
img{ img {
display: block; display: block;
width: 100%; width: 100%;
} }
span{ span {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
-o-transform: translate(-50%,-50%); -o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%,-50%); -ms-transform: translate(-50%, -50%);
color: #fff; color: #fff;
font-size:20px; font-size: 20px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
} }
} }
.li-txt{ .li-txt {
float: left; float: left;
width: 77%; width: 77%;
margin-left: 3%; margin-left: 3%;
div{ div {
font-size: 18px; font-size: 18px;
color:rgba(51,51,51,1); color: rgba(51, 51, 51, 1);
line-height: 30px; line-height: 30px;
} }
} }
...@@ -562,215 +388,225 @@ export default { ...@@ -562,215 +388,225 @@ export default {
} }
} }
} }
.cont-right.susp{ .cont-right.susp {
position: fixed; position: fixed;
right: -40px; right: -40px;
top: 80px; top: 80px;
} }
.cont-right{ .cont-right {
position: absolute; position: absolute;
top: 150px; top: 150px;
right: 0; right: 0;
width: 30%; width: 30%;
.cont{ .cont {
width: 200px; width: 200px;
margin: 0 auto; margin: 0 auto;
.titl{ .titl {
width: 100%; width: 100%;
height: 73px; height: 73px;
background: url('../../assets/images/lear-tips-mbg.png'); background: url('../../assets/images/lear-tips-mbg.png');
background-size: 100% 100%; background-size: 100% 100%;
}
.titl {
display: flex;
justify-content: center;
align-items: center;
img {
width: 28px;
height: 28px;
} }
.titl{ .txt {
display: flex; color: rgba(255, 255, 255, 1);
justify-content: center; font-size: 22px;
align-items: center; margin-left: 8px;
img{
width: 28px;
height: 28px;
}
.txt{
color:rgba(255,255,255,1);
font-size: 22px;
margin-left: 8px;
}
} }
ul{ }
padding: 0; ul {
li.active{ padding: 0;
.name{ li.active {
color: #2994EA; .name {
color: #2994ea;
}
.prog {
.pr1 {
background: #2994ea;
} }
.prog{ .pr2 {
.pr1{ background: #2994ea;
background: #2994EA;
}
.pr2{
background: #2994EA;
}
} }
} }
li{ }
display: flex; li {
list-style: none; display: flex;
width: 164px; list-style: none;
margin: 0 auto 20px auto; width: 164px;
cursor: pointer; margin: 0 auto 20px auto;
.name{ cursor: pointer;
font-size: 18px; .name {
color: #999999; 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;
} }
.prog{ .pr2 {
width: 86px; position: absolute;
margin-left: auto; top: 0;
position: relative; right: 0;
margin-top: 5px; width: 16px;
.pr1{ height: 16px;
position: absolute; background: rgba(216, 216, 216, 1);
top: 8px; border-radius: 50%;
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{ .exa-main {
.tip-t{ .tip-t {
font-size: 22px; font-size: 22px;
color: #333333; color: #333333;
} }
.padd-min-tit{ .padd-min-tit {
padding: 8px 0 0 0; padding: 8px 0 0 0;
} }
.min-tit{ .min-tit {
color:rgba(51,51,51,1); color: rgba(51, 51, 51, 1);
font-size:18px; font-size: 18px;
margin: 20px 0 20px 10px; margin: 20px 0 20px 10px;
a{ a {
color: #018AFF; color: #018aff;
} }
} }
.con-mian{ .con-mian {
display: table; display: table;
img{ img {
vertical-align: middle; vertical-align: middle;
} }
} }
.step1-img-w{ .step1-img-w {
img{ img {
width: 30%; width: 30%;
} }
.step-arrow{ .step-arrow {
width: 5%; width: 5%;
} }
} }
.step2-img-w{ .step2-img-w {
.step2-1{ .step2-1 {
width: 23.5%; width: 23.5%;
} }
.step2-2{ .step2-2 {
width: 24.5%; width: 24.5%;
} }
.step2-3{ .step2-3 {
width: 41.5%; width: 41.5%;
} }
.step-arrow{ .step-arrow {
width: 5%; width: 5%;
} }
} }
.step3-img-w{ .step3-img-w {
img{ img {
width: 30%; width: 30%;
} }
.step-arrow{ .step-arrow {
width: 5%; width: 5%;
} }
} }
.step4-img-w{ .step4-img-w {
img{ img {
width: 21.25%; width: 21.25%;
} }
.step-arrow{ .step-arrow {
width: 5%; width: 5%;
} }
} }
.step5-img-w{ .step5-img-w {
.tip-txt{ .tip-txt {
width: 30%; width: 30%;
color:rgba(255,41,41,1); color: rgba(255, 41, 41, 1);
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
} }
img{ img {
width: 30%; width: 30%;
margin-left: 3%; margin-left: 3%;
} }
} }
.step6-img-w{ .step6-img-w {
img{ img {
width: 100%; width: 100%;
} }
} }
.step7-img-w{ .step7-img-w {
.sbt{ .sbt {
overflow: hidden; overflow: hidden;
margin-top: 15px; margin-top: 15px;
} }
img{ img {
float: left; float: left;
width: 12px; width: 12px;
height: 12px; height: 12px;
margin: 7px 5px 0 0; margin: 7px 5px 0 0;
} }
.t{ .t {
float: left; float: left;
color:rgba(51,51,51,1); color: rgba(51, 51, 51, 1);
font-size: 18px; font-size: 18px;
} }
a{ a {
margin-left:20px; margin-left: 20px;
padding-top: 10px; padding-top: 10px;
font-size: 18px; font-size: 18px;
color:rgba(1,138,255,1); color: rgba(1, 138, 255, 1);
display: block; display: block;
} }
.tt{ .tt {
font-size: 18px; font-size: 18px;
color: #333333; color: #333333;
margin-left:20px; margin-left: 20px;
line-height: 30px; line-height: 30px;
margin-top: 10px; margin-top: 10px;
} }
} }
} }
@media screen and (min-width: 1610px) { @media screen and (min-width: 1610px) {
.mian .content .txt-cont ul li .l{ .mian .content .txt-cont ul li .l {
width: 13%; width: 13%;
} }
.mian .content .txt-cont ul li .li-txt div{ .mian .content .txt-cont ul li .li-txt div {
font-size: 20px; font-size: 20px;
} }
.mian .content .txt-cont ul li.top .li-txt{ .mian .content .txt-cont ul li.top .li-txt {
left: 13%; left: 13%;
} }
} }
@media screen and (max-width: 1610px) { @media screen and (max-width: 1610px) {
.mian .content .txt-cont ul li .li-txt div{ .mian .content .txt-cont ul li .li-txt div {
font-size: 16px; font-size: 16px;
} }
} }
.table {
width: 90%;
margin: 20px auto;
border-collapse: collapse;
text-align: center;
td,
th {
padding: 12px;
}
}
</style> </style>
src/pages/tips/learningTips.vue
浏览文件 @ c67fb09d
...@@ -6,51 +6,69 @@ ...@@ -6,51 +6,69 @@
<div class="h2">学习须知</div> <div class="h2">学习须知</div>
<div class="explain"> <div class="explain">
<div class="tits">尊敬的学员：</div> <div class="tits">尊敬的学员：</div>
<div class="txt">您好!欢迎您参加中国银行业协会“高级财富管理师”证书培训项目。为顺利完成学习及考试，请您阅读以下事项。预祝大家学习愉快，学有所获！</div> <div class="txt">
您好!欢迎您参加中国银行业协会“高级财富管理师”证书培训项目。为顺利完成学习及考试，请您阅读以下事项。预祝大家学习愉快，学有所获！
</div>
</div> </div>
<div class="txt-cont" ref="catalog2" id="catalog2"> <div class="txt-cont" ref="catalog2" id="catalog2">
<div class="tits">班级管理</div> <div class="tits">班级管理</div>
<p>1.请严格遵守网络和信息化管理有关规定，不得在项目下任何交流平台发布关于政治、宗教、民族的不当言论；禁止散布任何不实消息和煽动性言论；不得侮辱讲师、教学管理人员及同学；不得发布任何形式的广告、外链、拉票消息。以上情况一经发现，立即取消培训资格。由此引起的法律责任，概由发起者负责。</p> <p>
1.请严格遵守网络和信息化管理有关规定，不得在项目下任何交流平台发布关于政治、宗教、民族的不当言论；禁止散布任何不实消息和煽动性言论；不得侮辱讲师、教学管理人员及同学；不得发布任何形式的广告、外链、拉票消息。以上情况一经发现，立即取消培训资格。由此引起的法律责任，概由发起者负责。
</p>
<p>2.认真阅读“学习须知-我的学习”完整内容，提前做好个人工作及生活安排，保证充足学习及备考时间。</p> <p>2.认真阅读“学习须知-我的学习”完整内容，提前做好个人工作及生活安排，保证充足学习及备考时间。</p>
<p>3.《私人银行理论与实务》为唯一考试指定教材，请提前购买学习。</p> <p>3.《私人银行理论与实务》为唯一考试指定教材，请提前购买学习。</p>
<img src="../../assets/images/lear-tips-code.png" alt="" class="qr-code"> <img src="../../assets/images/lear-tips-code.png" alt="" class="qr-code" />
<p>4.必修课程直播期间，请按时进入课堂，不迟到、不早退；因故不能出席者，需提前向班主任申请；必修课学习为获取证书的必要条件，缺课学员请通过课程回放完成学习，课程回放周期为30天。出于内部资料保护的考虑，必修课电子课件资料与授课演示版内容会有细微差异，请大家理解。</p> <p>
<p>5.本项目采取线上考试，远程监考。请认真阅读【考试须知】，考前做好设备测试，严格遵守考试纪律。如有违纪现象，立即取消考试资格。</p> 4.必修课程直播期间，请按时进入课堂，不迟到、不早退；因故不能出席者，需提前向班主任申请；必修课学习为获取证书的必要条件，缺课学员请通过课程回放完成学习，课程回放周期为30天。出于内部资料保护的考虑，必修课电子课件资料与授课演示版内容会有细微差异，请大家理解。
<p>6.为尊重授课专家及其所在机构的知识产权，全部课程内容禁止任何形式的翻录行为。且项目下全部课程及资料仅供高级财富管理师证书学员学习使用，严禁其他任何形式的使用行为，无论该使用是否为商业用途。</p> </p>
<p>
5.本项目采取线上考试，远程监考。请认真阅读【考试须知】，考前做好设备测试，严格遵守考试纪律。如有违纪现象，立即取消考试资格。
</p>
<p>
6.为尊重授课专家及其所在机构的知识产权，全部课程内容禁止任何形式的翻录行为。且项目下全部课程及资料仅供高级财富管理师证书学员学习使用，严禁其他任何形式的使用行为，无论该使用是否为商业用途。
</p>
</div> </div>
<div class="txt-cont" ref="catalog3" id="catalog3"> <div class="txt-cont" ref="catalog3" id="catalog3">
<div class="tits">我的学习</div> <div class="tits">我的学习</div>
<p>高级财富管理师证书学习内容包括：【教材学习】、【必修课程】、【拓展课程】，请按如下安排完成学习任务。</p> <p>高级财富管理师证书学习内容包括：【教材学习】、【必修课程】、【拓展课程】，请按如下安排完成学习任务。</p>
<p>1.教材学习：建议学习周期4星期，请按照【我的学习-教材学习-学习计划】充分备考；学习中遇到问题，可通过【我的学习-教材学习-教材提问】上传问题，学习导师会定时予以解答。</p> <p>
1.教材学习：建议学习周期4星期，请按照【我的学习-教材学习-学习计划】充分备考；学习中遇到问题，可通过【我的学习-教材学习-教材提问】上传问题，学习导师会定时予以解答。
</p>
<p>2.必修课程：</p> <p>2.必修课程：</p>
<img src="https://zws-imgs-pub.ezijing.com/static/public/2de142939eab076e258c6c9debad1c92.png" alt="" class="img1"> <img
<p>3.拓展课程：为帮助学员夯实金融基础，扩充财富管理知识储备，高级财富管理师证书培训项目开设丰富拓展课程，课程有效期1年，供学员考后持续学习。</p> src="https://zws-imgs-pub.ezijing.com/static/public/2de142939eab076e258c6c9debad1c92.png"
alt=""
class="img1"
/>
<p>
3.拓展课程：为帮助学员夯实金融基础，扩充财富管理知识储备，高级财富管理师证书培训项目开设丰富拓展课程，课程有效期1年，供学员考后持续学习。
</p>
</div> </div>
<div class="txt-cont" ref="catalog4" id="catalog4"> <div class="txt-cont" ref="catalog4" id="catalog4">
<div class="tits">我的考试</div> <div class="tits">我的考试</div>
<ul> <ul>
<li> <li>
<img src="../../assets/images/lear-tips-icon.png" alt=""> <img src="../../assets/images/lear-tips-icon.png" alt="" />
<div class="rtxt">考试时间：4月18日 16:30-17:30</div> <div class="rtxt">考试时间：4月18日 16:30-17:30</div>
</li> </li>
<li> <li>
<img src="../../assets/images/lear-tips-icon.png" alt=""> <img src="../../assets/images/lear-tips-icon.png" alt="" />
<div class="rtxt">考试形式：闭卷机考，仅限电脑登陆（手机/平板电脑无法进入考试系统）</div> <div class="rtxt">考试形式：闭卷机考，仅限电脑登陆（手机/平板电脑无法进入考试系统）</div>
</li> </li>
<li> <li>
<img src="../../assets/images/lear-tips-icon.png" alt=""> <img src="../../assets/images/lear-tips-icon.png" alt="" />
<div class="rtxt">考试时长：60分钟</div> <div class="rtxt">考试时长：60分钟</div>
</li> </li>
<li> <li>
<img src="../../assets/images/lear-tips-icon.png" alt=""> <img src="../../assets/images/lear-tips-icon.png" alt="" />
<div class="rtxt">考试题型：单选+多选+判断</div> <div class="rtxt">考试题型：单选+多选+判断</div>
</li> </li>
<li> <li>
<img src="../../assets/images/lear-tips-icon.png" alt=""> <img src="../../assets/images/lear-tips-icon.png" alt="" />
<div class="rtxt">通过标准：完成必修课程，考试成绩60分以上予以发放证书</div> <div class="rtxt">通过标准：完成必修课程，考试成绩60分以上符合认证标准予以发放证书</div>
</li> </li>
<li> <li>
<img src="../../assets/images/lear-tips-icon.png" alt=""> <img src="../../assets/images/lear-tips-icon.png" alt="" />
<div class="rtxt">证书发放：纸质证书邮寄发放</div> <div class="rtxt">证书发放：纸质证书邮寄发放</div>
</li> </li>
</ul> </ul>
...@@ -59,31 +77,86 @@ ...@@ -59,31 +77,86 @@
<div class="tits">证书查询</div> <div class="tits">证书查询</div>
<ul> <ul>
<li> <li>
<img src="../../assets/images/lear-tips-icon.png" alt=""> <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> <div class="rtxt">
查询地址：<a href="http://www.ccbp.org.cn/qitachaxun">http://www.ccbp.org.cn/qitachaxun</a>
</div>
</li> </li>
<li> <li>
<img src="../../assets/images/lear-tips-icon.png" alt=""> <img src="../../assets/images/lear-tips-icon.png" alt="" />
<div class="rtxt">查询方式:可通过输入姓名、证书编号或者身份证号任意两项进行查询。</div> <div class="rtxt">查询方式:可通过输入姓名、证书编号或者身份证号任意两项进行查询。</div>
</li> </li>
</ul> </ul>
<img src="../../assets/images/lear-tips-img2.png" alt="" class="img2"> <img src="../../assets/images/lear-tips-img2.png" alt="" class="img2" />
</div> </div>
<div class="txt-cont" ref="catalog6" id="catalog6"> <div class="txt-cont" ref="catalog6" id="catalog6">
<div class="tits">继续教育</div> <div class="tits">继续教育</div>
<p class="ind">根据中国银行业协会“高级财富管理师”证书继续教育要求，每年为一个继续教育周期，周期内需完成90学时继续教育学习，其中30个教育培训学时中，至少20学时在中国银行业专业人员在线教育系统上完成，其余10学时可通过中国银行业专业人员在线教育系统或参加银行业监管部门、中国银行业协会及各地银行业协（学、公）会、金融机构、大专院校以及其他合格教育培训机构组织的其他面授或网络培训完成。剩余的60自学实践学时可通过参加其他自学或工作实践等活动完成。</p> <p class="ind">
<p class="ind">请各位学员获取证书后，及时注册并在时限内完成学习，学习系统地址：<a href="http://ucollege.china-cbi.net/">http://ucollege.china-cbi.net/</a>；也可选择移动端学习，关注微信公众号：中银协在线教育。</p> 根据中国银行业协会“高级财富管理师”证书继续教育要求，自取得“高级财富管理师”证书的下一年起，每一个自然年为一个继续教育周期，每个周期累计学时数不少于90学时。
<img src="../../assets/images/lear-tips-img3.png" alt="" class="img2"> </p>
<p class="ind">
其中，至少20学时需在中国银行业专业人员在线教育系统上学习，其余10学时可通过中国银行业专业人员在线教育系统或参加银行业监管部门、中国银行业协会及各地银行业协（学、公）会、金融机构、大专院校以及其他合格教育培训机构组织的其他面授或网络培训完成。中国银行业专业人员在线教育系统网址：
<a href="http://ucollege.china-cbi.net" target="_blank">http://ucollege.china-cbi.net/</a>；
也可选择移动端学习，关注微信公众号：中银协在线教育。
</p>
<p class="ind">剩余至少60学时可通过参加其他自学或工作实践等活动完成。具体包括：</p>
<p class="ind">（1）平均每周阅读财经类报刊、书籍1小时（含）以上；</p>
<p class="ind">（2）平均每周收听/收看财经类资讯1小时（含）以上；</p>
<p class="ind">（3）参与至少1项金融类研究课题；</p>
<p class="ind">（4）参加金融类相关学术交流会议1天（含）以上；</p>
<p class="ind">（5）参加并通过全国金融类相关专业技术资格考试1门（含）以上；</p>
<p class="ind">（6）在国内统一刊号(CN)的经济、金融类期刊上发表论文1篇（含）以上；</p>
<p class="ind">（7）独立或与他人合作公开出版金融类书籍1本（含）以上；</p>
<p class="ind">（8）当年从事金融类相关工作。</p>
<p class="ind">以上完成3项即满足要求，予以认可。</p>
<img src="../../assets/images/lear-tips-img3.png" class="img2" />
<table border="1" class="table">
<tr>
<th>类型</th>
<th>截至2020年5月</th>
</tr>
<tr>
<td>专业基础课程</td>
<td>250门、561学时</td>
</tr>
<tr>
<td>政策法规与职业操守</td>
<td>14门、35.5课时</td>
</tr>
<tr>
<td>网络证书</td>
<td>5门、132学时</td>
</tr>
<tr>
<td>直播回放课程</td>
<td>5门、5学时</td>
</tr>
<tr>
<td>共计</td>
<td>274门、733.5学时</td>
</tr>
</table>
<p class="ind">
截至2020年5月，系统累计提供网络学习课程274门，733.5学时，为行业人员打造了高质量的网络学习平台。课程内容专业权威，主要围绕监管动向，银行业和金融业的行业发展热点展开，内容丰富。课程体系系统全面，包括9大核心模块，例如政策法规、个人金融、公司金融、创新业务、风险管理、通用技能和健康生活，还包括近年来行业热点私人银行与财富管理、客户服务与开发等。学员5星评价占比持续保持在90%以上，4星以上评价占比持续保持在97%以上。
</p>
</div>
<div class="txt-cont" ref="catalog7" id="catalog7">
<div class="tits">交流平台</div>
<p class="ind">
【高级财富管理师俱乐部】公众号是“高级财富管理师”持证学员交流学习的平台，公众号主要有培训项目动态更新、行业资讯信息发布、行业经验分享、大咖访谈论道、优秀学员介绍以及继续教育学习等内容。
</p>
<div style="text-align: center"><img src="../../assets/images/lear-tips-img4.png" /></div>
</div> </div>
</div> </div>
<div :class="showClass" ref="suspension"> <div :class="showClass" ref="suspension">
<div class="cont"> <div class="cont">
<div class="titl"> <div class="titl">
<img src="../../assets/images/lear-tips-micon.png" alt=""> <img src="../../assets/images/lear-tips-micon.png" />
<div class="txt">目录导航</div> <div class="txt">目录导航</div>
</div> </div>
<ul> <ul>
<template v-for="(item,index) in catalogList"> <template v-for="(item, index) in catalogList">
<li :key="index" :class="item.active" @click="clickScroll(item.id, index)"> <li :key="index" :class="item.active" @click="clickScroll(item.id, index)">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="prog"> <div class="prog">
...@@ -101,7 +174,7 @@ ...@@ -101,7 +174,7 @@
<script> <script>
export default { export default {
data () { data() {
return { return {
showClass: 'cont-right', showClass: 'cont-right',
catalogList: [ catalogList: [
...@@ -134,6 +207,11 @@ export default { ...@@ -134,6 +207,11 @@ export default {
name: '继续教育', name: '继续教育',
id: 'catalog6', id: 'catalog6',
active: '' active: ''
},
{
name: '交流平台',
id: 'catalog7',
active: ''
} }
] ]
} }
...@@ -142,9 +220,11 @@ export default { ...@@ -142,9 +220,11 @@ export default {
document.addEventListener('scroll', this.handleScrollx, true) document.addEventListener('scroll', this.handleScrollx, true)
}, },
methods: { methods: {
handleScrollx () { handleScrollx() {
this.catalogList.map((item, index) => { this.catalogList.map((item, index) => {
if (!this.$refs[item.id]) { return } if (!this.$refs[item.id]) {
return
}
const offH = this.$refs[item.id].getBoundingClientRect().top const offH = this.$refs[item.id].getBoundingClientRect().top
if (offH < 150 && offH > -150) { if (offH < 150 && offH > -150) {
for (let i = 0; i < this.catalogList.length; i++) { for (let i = 0; i < this.catalogList.length; i++) {
...@@ -153,9 +233,9 @@ export default { ...@@ -153,9 +233,9 @@ export default {
this.catalogList[index].active = 'active' this.catalogList[index].active = 'active'
} }
}) })
document.documentElement.scrollTop > 100 ? this.showClass = 'cont-right susp' : this.showClass = 'cont-right' document.documentElement.scrollTop > 100 ? (this.showClass = 'cont-right susp') : (this.showClass = 'cont-right')
}, },
clickScroll (id, index) { clickScroll(id, index) {
document.getElementById(id).scrollIntoView() document.getElementById(id).scrollIntoView()
this.catalogList.map((item, i) => { this.catalogList.map((item, i) => {
item.active = '' item.active = ''
...@@ -167,56 +247,56 @@ export default { ...@@ -167,56 +247,56 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mian{ .mian {
padding: 40px; padding: 40px;
.content{ .content {
position: relative; position: relative;
background:rgba(255,255,255,1); background: rgba(255, 255, 255, 1);
border-radius:6px; border-radius: 6px;
padding: 0 40px 30px 40px; padding: 0 40px 30px 40px;
.title{ .title {
color: #333333; color: #333333;
font-size: 18px; font-size: 18px;
line-height: 65px; line-height: 65px;
border-bottom: 1px solid rgba(204,204,204,1); border-bottom: 1px solid rgba(204, 204, 204, 1);
font-weight: bold; font-weight: bold;
} }
.cont-txt{ .cont-txt {
padding-bottom: 30px; padding-bottom: 30px;
p{ p {
font-size:18px; font-size: 18px;
color:#666666; color: #666666;
line-height:30px; line-height: 30px;
text-indent: 2em; text-indent: 2em;
} }
} }
.h2{ .h2 {
font-size: 35px; font-size: 35px;
color: #333333; color: #333333;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
font-weight: bold; font-weight: bold;
} }
.explain{ .explain {
.tits{ .tits {
font-size: 22px; font-size: 22px;
color: #333333; color: #333333;
font-weight: bold; font-weight: bold;
} }
.txt{ .txt {
font-size: 18px; font-size: 18px;
color:rgba(51,51,51,1); color: rgba(51, 51, 51, 1);
line-height:40px; line-height: 40px;
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
} }
} }
.cont-left{ .cont-left {
width: 75%; width: 75%;
} }
.txt-cont{ .txt-cont {
margin-top: 20px; margin-top: 20px;
.tits{ .tits {
font-size: 22px; font-size: 22px;
line-height: 40px; line-height: 40px;
width: 100%; width: 100%;
...@@ -224,132 +304,132 @@ export default { ...@@ -224,132 +304,132 @@ export default {
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
font-weight: bold; font-weight: bold;
} }
p{ p {
text-align:justify; text-align: justify;
color:rgba(51,51,51,1); color: rgba(51, 51, 51, 1);
font-size: 18px; font-size: 18px;
line-height: 40px; line-height: 40px;
margin-top: 10px; margin-top: 10px;
width: 90%; width: 90%;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;
} }
.qr-code{ .qr-code {
width: 35%; width: 35%;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
} }
.img1{ .img1 {
width: 80%; width: 80%;
display: block; display: block;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;
} }
.img2{ .img2 {
width: 65%; width: 90%;
margin: 10px auto; margin: 10px auto;
display:block; display: block;
} }
.ind{ .ind {
text-indent: 2em; text-indent: 2em;
} }
ul{ ul {
margin: 5px auto; margin: 5px auto;
li{ li {
margin-top: 15px; margin-top: 15px;
display: flex; display: flex;
img{ img {
width: 12px; width: 12px;
height: 12px; height: 12px;
margin-top: 8px; margin-top: 8px;
} }
.rtxt{ .rtxt {
color: #333333; color: #333333;
font-size: 18px; font-size: 18px;
margin-left: 5px; margin-left: 5px;
a{ a {
color: #3D7AD7; color: #3d7ad7;
} }
} }
} }
} }
} }
.cont-right.susp{ .cont-right.susp {
position: fixed; position: fixed;
right: -10px; right: -10px;
top: 80px; top: 80px;
} }
.cont-right{ .cont-right {
position: absolute; position: absolute;
top: 80px; top: 80px;
right: 0; right: 0;
width: 30%; width: 30%;
.cont{ .cont {
width: 200px; width: 200px;
margin: 0 auto; margin: 0 auto;
.titl{ .titl {
width: 100%; width: 100%;
height: 73px; height: 73px;
background: url('../../assets/images/lear-tips-mbg.png'); background: url('../../assets/images/lear-tips-mbg.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
.titl{ .titl {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img{ img {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
.txt{ .txt {
color:rgba(255,255,255,1); color: rgba(255, 255, 255, 1);
font-size: 22px; font-size: 22px;
margin-left: 8px; margin-left: 8px;
} }
} }
ul{ ul {
padding: 0; padding: 0;
li.active{ li.active {
.name{ .name {
color: #2994EA; color: #2994ea;
} }
.prog{ .prog {
.pr1{ .pr1 {
background: #2994EA; background: #2994ea;
} }
.pr2{ .pr2 {
background: #2994EA; background: #2994ea;
} }
} }
} }
li{ li {
display: flex; display: flex;
list-style: none; list-style: none;
width: 164px; width: 164px;
margin: 0 auto 20px auto; margin: 0 auto 20px auto;
cursor: pointer; cursor: pointer;
.name{ .name {
font-size: 18px; font-size: 18px;
color: #999999; color: #999999;
} }
.prog{ .prog {
width: 86px; width: 86px;
margin-left: auto; margin-left: auto;
position: relative; position: relative;
margin-top: 5px; margin-top: 5px;
.pr1{ .pr1 {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 0; right: 0;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: #D8D8D8; background: #d8d8d8;
} }
.pr2{ .pr2 {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
width:16px; width: 16px;
height:16px; height: 16px;
background:rgba(216,216,216,1); background: rgba(216, 216, 216, 1);
border-radius: 50%; border-radius: 50%;
} }
} }
...@@ -359,5 +439,14 @@ export default { ...@@ -359,5 +439,14 @@ export default {
} }
} }
} }
.table {
width: 90%;
margin: 20px auto;
border-collapse: collapse;
text-align: center;
td,
th {
padding: 12px;
}
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论