Skip to content

L
learn-online-pc
提交 1a6e0f0a authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

修改导航，修改学习须知

上级 2ce321a4
隐藏空白字符变更
内嵌 并排
正在显示 包含 339 行增加 和 18 行删除
client/src/components/learnSysLayout/navigation.vue
浏览文件 @ 1a6e0f0a
......@@ -57,7 +57,9 @@ export default {
color: #ffffff;
display: flex;
align-items: center;
position: relative;
.nav-left {
width: 30%;
display: flex;
position: relative;
height: 100%;
......@@ -78,7 +80,14 @@ export default {
}
}
.bank-title{
font-size:24px;
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%);
font-size:.24rem;
color:rgba(102,102,102,1);
margin-left: 80px;
}
......@@ -86,10 +95,9 @@ export default {
display: flex;
color:#333333;
margin-left: auto;
font-size:18px;
margin-right: 35px;
font-size:.18rem;
.logo-name{
margin-right: 40px;
font-size: .18rem;
line-height: 60px;
}
}
......@@ -97,7 +105,7 @@ export default {
position: relative;
padding: 0 20px;
line-height: 60px;
font-size: 16px;
font-size: .18rem;
color: #000;
cursor: pointer;
.num {
......@@ -114,11 +122,12 @@ export default {
}
}
.logo-box{
display: flex;
.bank-logor{
margin-left: 3px;
margin-left: 20px;
}
img{
height: 26px;
width: 50%;
}
}
......
client/src/pages/mainsite.vue
浏览文件 @ 1a6e0f0a
<template>
<!-- // 整体网站结构 -->
<el-container :style="{height: containerStyle.height}">
<el-header height="80px"><navigation /></el-header>
<el-header style="height:auto"><navigation /></el-header>
<el-container>
<sidebar :obj="sidebar" />
<el-main><router-view></router-view></el-main>
......@@ -58,7 +58,7 @@ export default {
z-index: 1;
background: #fff;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
padding: 0 5px;
padding: 10px 5px;
}
.el-main {
padding: 0;
......
client/src/pages/tips/learningTips.vue
浏览文件 @ 1a6e0f0a
<template>
<div class="mian">
<div class="content">
<div class="content fl">
<div class="title">学习须知</div>
<div class="cont-txt">
<p>党和国家机关通用公文的种类国务院办公厅曾发布的《国家行政机关公文处理办法》，经过多年的实践，修订后的《办法》从1994年1月1日起施行。把公文种类调整为十二类十三种，删去“指令”、“决议”、“布告”三个文种，将“议案”作为一个新文种列入主要公文种类。即：命令（令），议案，决定，指示，公告，通告，通知，通报，报告，请示，批复，函，会议纪要。此外，中共中央办公厅于1989年4月25日发布的《中国共产党各级领导机关文件处理条例（试行）》中，正式文件的种类里还列有公报、条例、规定三个文种。这样，现在常用的公文种类总共有十六种。</p>
<p>在选择词语的过程中应注意： 认真辨析词语的确切含义，使词语的意义符合客观实际；注意分辨词语的感情色彩，以正确表达作者的立场观点；注意词语声音和语调对语义的影响，以提高表达效果；注意词语间的正确搭配，遵循语言法则；注意公文具体使用场合对词语风格的要求，维护公文的严肃性及强制执行性；注意针对公文具体收受对象的特点选词，以“有的放矢”便于理解和执行；注意根据公文中所涉及的人和事物的特殊性质选词，以获得更加鲜明直接的表达效果；注意根据上下文的需要选词，以维护公文的完整有效性；注意根据文种的不同特点选词，以保证语言得体而有力；注意词语的规范性，以提高公文沟通的效果，扩展沟通的范围。</p>
<p>由于表意和表现特殊色彩的需要，公文中有一些出现频率较高的词语。这些词语词形确定，词义精确特定，用途稳定专门，并为从事公文工作的人们所熟悉，它们就是公文专用词语。正确地使用公文专用词语可使写者顺手，读者便当，保证表意精当得体，理解精确周严，可提高制发和处理公文的质量与效率。</p>
<p>由于表意和表现特殊色彩的需要，公文中有一些出现频率较高的词语。这些词语词形确定，词义精确特定，用途稳定专门，并为从事公文工作的人们所熟悉，它们就是公文专用词语。正确地使用公文专用词语可使写者顺手，读者便当，保证表意精当得体，理解精确周严，可提高制发和处理公文的质量与效率。</p>
<p>由于表意和表现特殊色彩的需要，公文中有一些出现频率较高的词语。这些词语词形确定，词义精确特定，用途稳定专门，并为从事公文工作的人们所熟悉，它们就是公文专用词语。正确地使用公文专用词语可使写者顺手，读者便当，保证表意精当得体，理解精确周严，可提高制发和处理公文的质量与效率。</p>
<p>由于表意和表现特殊色彩的需要，公文中有一些出现频率较高的词语。这些词语词形确定，词义精确特定，用途稳定专门，并为从事公文工作的人们所熟悉，它们就是公文专用词语。正确地使用公文专用词语可使写者顺手，读者便当，保证表意精当得体，理解精确周严，可提高制发和处理公文的质量与效率。</p>
<div class="cont-left">
<div class="h2">学习须知</div>
<div class="explain" ref="catalog1" id="catalog1">
<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.必修课程直播期间，请按时进入课堂，不迟到、不早退；因故不能出席者，需提前向班主任申请；必修课学习为获取证书的必要条件，缺课学员请通过课程回放完成学习，课程回放周期为15天。出于内部资料保护的考虑，必修课电子课件资料与授课演示版内容会有细微差异，请大家理解。</p>
<p>5.本项目采取线上考试，远程监考。请认真阅读【考试须知】，考前做好设备测试，严格遵守考试纪律。如有违纪现象，立即取消考试资格。</p>
<p>6.为尊重授课专家及其所在机构的知识产权，全部课程内容禁止任何形式的翻录行为。且项目下全部课程及资料仅供高级财富管理师证书学员学习使用，严禁其他任何形式的使用行为，无论该使用是否为商业用途。</p>
</div>
<div class="txt-cont" ref="catalog3" id="catalog3">
<div class="tits">我的学习</div>
<p>高级财富管理师证书学习内容包括：【教材学习】、【必修课程】、【拓展课程】，请按如下安排完成学习任务。</p>
<p>1.高级财富管理师证书学习内容包括：【教材学习】、【必修课程】、【拓展课程】，请按如下安排完成学习任务。</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>
<p>高级财富管理师证书学习内容包括：【教材学习】、【必修课程】、【拓展课程】，请按如下安排完成学习任务。</p>
<ul>
<li>
<img src="../../assets/images/lear-tips-icon.png" alt="">
<div class="rtxt">考试时间：6月14日 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>
......@@ -16,6 +102,67 @@
<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() {
window.addEventListener('scroll', this.handleScrollx, true)
},
methods: {
handleScrollx () {
this.catalogList.map((item, index) => {
const offH = this.$refs[item.id].getBoundingClientRect().top
if (offH < 200 && offH > -200) {
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>
......@@ -23,9 +170,10 @@ export default {
.mian{
padding: 40px;
.content{
position: relative;
background:rgba(255,255,255,1);
border-radius:6px;
padding: 0 40px;
padding: 0 40px 30px 40px;
.title{
color: #333333;
font-size: 18px;
......@@ -41,6 +189,170 @@ export default {
text-indent: 2em;
}
}
.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;
}
}
.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;
}
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: 100px;
}
.cont-right{
position: absolute;
top: 100px;
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%;
}
}
}
}
}
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论