Skip to content

P
project-online-old
提交 cde555ca authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

改版3.0

上级 c061a04c
隐藏空白字符变更
内嵌 并排
正在显示 包含 2081 行增加 和 329 行删除
src/components/headBanner.vue 0 → 100644
浏览文件 @ cde555ca
<template>
<div>
<div class="home-head">
<img src="https://zws-imgs-pub.ezijing.com/static/public/097c7cf05ebd01ac34743c50fb0ed9f1.png" alt="">
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.home-head{
img{
width: 100%;
display: block;
}
}
</style>
src/components/layout/footer.vue
浏览文件 @ cde555ca
...@@ -68,7 +68,7 @@ export default { ...@@ -68,7 +68,7 @@ export default {
margin-top: 20px; margin-top: 20px;
h3 { h3 {
font-size: 16px; font-size: 16px;
color: #222; color: #fff;
line-height: 1; line-height: 1;
margin-bottom: 15px; margin-bottom: 15px;
} }
...@@ -76,8 +76,8 @@ export default { ...@@ -76,8 +76,8 @@ export default {
} }
.app-footer-main { .app-footer-main {
padding: 10px 0; padding: 10px 0;
color: #222; color: #fff;
background-color: #f9f9f9; background-color: #A81A42;
.inner { .inner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -88,7 +88,7 @@ export default { ...@@ -88,7 +88,7 @@ export default {
margin-top: 10px; margin-top: 10px;
line-height: 30px; line-height: 30px;
font-size: 12px; font-size: 12px;
color: #222; color: #fff;
} }
.right { .right {
display: flex; display: flex;
...@@ -96,20 +96,20 @@ export default { ...@@ -96,20 +96,20 @@ export default {
.contact { .contact {
h3 { h3 {
font-size: 16px; font-size: 16px;
color: #222; color: #fff;
line-height: 1; line-height: 1;
margin-bottom: 15px; margin-bottom: 15px;
} }
p { p {
font-size: 12px; font-size: 12px;
color: #222; color: #fff;
line-height: 24px; line-height: 24px;
} }
} }
.qrcode { .qrcode {
h3 { h3 {
font-size: 16px; font-size: 16px;
color: #222; color: #fff;
line-height: 1; line-height: 1;
margin-bottom: 15px; margin-bottom: 15px;
} }
......
src/components/layout/header.vue
浏览文件 @ cde555ca
<template> <template>
<header class="app-header"> <header class="app-header">
<section class="app-header-main"> <div class="nav-box">
<div class="poster"></div> <div class="colors"></div>
<div class="handle-btn"> <div class="header-mian">
<span @click="isLogin = true">用户登录</span> <div class="logo-box" @click="$router.push({ path: '/' })">
<span>\</span> <img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" alt="">
<span @click="$router.push({ path: '/register' })">注册</span> <div class="logo-text">
<p>金融产品数字化营销</p>
<p>职业技能等级证书</p>
</div>
</div>
<ul class="nav-box">
<template v-for="(item, index) in navList">
<router-link :to="item.path" :key="index">
<li :class="isClassShow(item)">{{ item.title }}</li>
</router-link>
</template>
</ul>
<div class="login" @click="isLogin = true">用户登陆/注册</div>
</div> </div>
</section> </div>
<section class="app-header-menu"> <login v-if="isLogin" @reg="reg" @closeMask="closeMask"></login>
<ul>
<template v-for="(item, index) in navList">
<router-link :to="item.path" :key="index">
<li
:class="isClassShow(item)"
>
{{ item.title }}
</li>
</router-link>
</template>
</ul>
</section>
<vue-passport ref="passport" @ready="onReady" :options="options"></vue-passport>
<login v-if="isLogin" @closeMask="closeMask"></login>
</header> </header>
</template> </template>
...@@ -37,11 +35,9 @@ export default { ...@@ -37,11 +35,9 @@ export default {
title: '索菲亚大学金融方向工商管理硕士项目', title: '索菲亚大学金融方向工商管理硕士项目',
navList: [ navList: [
{ title: '首页', path: '/index' }, { title: '首页', path: '/index' },
{ title: '工作动态', path: '/news', children: { path: ['/news/detail'] } }, { title: '通知公告', path: '/news', children: { path: ['/news/detail'] } },
{ title: '教材中心', path: '/textBook', children: { path: ['/textBook/detail', '/textBook/chapter'] }}, { title: '办事大厅', path: '/hall', children: { path: ['/textBook/detail', '/textBook/chapter'] }},
{ title: '师资培训', path: '/train', children: { path: ['/train/detail', '/train/form'] } }, { title: '教·学服务', path: '/service', children: { path: ['/train/detail', '/train/form'] } }
{ title: '考核站点', path: '/site' },
{ title: '证书成绩查询', path: '/query' }
], ],
isLogin: false, isLogin: false,
user: null, user: null,
...@@ -63,7 +59,6 @@ export default { ...@@ -63,7 +59,6 @@ export default {
}, },
isClassShow() { isClassShow() {
return (item) => { return (item) => {
return this.$route.path === item.path return this.$route.path === item.path
? 'active' ? 'active'
: item.children : item.children
...@@ -80,13 +75,12 @@ export default { ...@@ -80,13 +75,12 @@ export default {
mounted() { mounted() {
}, },
watch: { watch: {
// $route(route) {
// if (route.query.needLogin.path) {
// this.handleLogin()
// }
// }
}, },
methods: { methods: {
reg() {
this.isLogin = false
this.$router.push({ path: '/register' })
},
closeMask(blo) { closeMask(blo) {
this.isLogin = blo this.isLogin = blo
}, },
...@@ -119,52 +113,77 @@ export default { ...@@ -119,52 +113,77 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-header { .home-head{
background-color: #fff; img{
.inner { width: 100%;
max-width: 970px; display: block;
margin: 0 auto; // height: 240px;
} }
} }
.app-header-main { .nav-box{
position: relative; position: relative;
.poster{ height: 70px;
width: 100%; background: #A81A42;
height: 220px; }
background: url(https://zws-imgs-pub.ezijing.com/static/public/7f46acc2486aec78c8fd4bdf5afd9589.png) center; .app-header{
background-size: cover; // position: relative;
} // height: 70px;
.handle-btn{ // background: #A81A42;
.colors{
background: #fff;
width: 50%;
height: 100%;
position: absolute; position: absolute;
top: 16px; top: 0;
right: 24px; left: 0;
span{
font-size: 14px;
color: #FFFFFF;
line-height: 20px;
cursor: pointer;
}
} }
} .header-mian{
.app-header-menu{ width: 1200px;
width: 100%; margin: 0 auto;
height: 56px; height: 100%;
background: linear-gradient(47deg, #C01540 0%, #C01540 7%, #D43960 26%, #FF87A5 100%, #C01540 100%);
ul{
display: flex; display: flex;
justify-content: center; align-items: center;
li{ .login{
width: 200px; margin-left: auto;
height: 56px; color: #fff;
text-align: center; cursor: pointer;
line-height: 56px; }
font-size: 20px; .logo-box{
color: #FFFFFF;
cursor: pointer; cursor: pointer;
&.active{ position: relative;
font-size: 20px; z-index: 1;
color: #AF1B40; width: 530px;
background: #fff; display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: #fff;
img{
width: 119px;
height: 40px;
margin-right: 40px;
}
.logo-text{
text-align: center;
font-size: 18px;
color: #A91C43;
line-height: 25px;
}
}
.nav-box{
position: relative;
z-index: 1;
background: #A81A42;
padding-left: 60px;
display: flex;
align-items: center;
li{
font-size: 14px;
color: #FFFFFF;
margin-right: 36px;
&.active{
font-weight: bold;
}
} }
} }
} }
......
src/components/layout/login.vue
浏览文件 @ cde555ca
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</li> </li>
</ul> </ul>
<div class="login-btn">登录</div> <div class="login-btn">登录</div>
<div class="register-btn">注册</div> <div class="register-btn" @click="$emit('reg')">注册</div>
</div> </div>
<div class="mask" @click="closeMask"></div> <div class="mask" @click="closeMask"></div>
</div> </div>
......
src/components/tabs/btnTabs.vue
浏览文件 @ cde555ca
...@@ -33,19 +33,30 @@ export default { ...@@ -33,19 +33,30 @@ export default {
.btn-tabs-boxs{ .btn-tabs-boxs{
// padding: 24px 0 30px; // padding: 24px 0 30px;
display: flex; display: flex;
justify-content: center; // justify-content: center;
div{ div{
cursor: pointer; cursor: pointer;
// text-align: center;
// width: 200px;
// height: 56px;
// background: #F9F9F9;
// font-size: 18px;
// color: #666666;
// line-height: 56px;
// &.active{
// color: #fff;
// background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
// }
width: 88px;
height: 34px;
border-radius: 27px;
text-align: center; text-align: center;
width: 200px; line-height: 34px;
height: 56px; font-size: 14px;
background: #F9F9F9; color: #444444;
font-size: 18px;
color: #666666;
line-height: 56px;
&.active{ &.active{
background: #A81A41;
color: #fff; color: #fff;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
} }
} }
} }
......
src/pages/hall/components/schoolHelp.vue 0 → 100644
浏览文件 @ cde555ca
<template>
<div class="school-box">
<div class="module1 content-max-width">
<div class="title">试点申报</div>
<div class="p">试点申报请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn/csr-declaraPlatform）进行申请。</div>
<img src="https://zws-imgs-pub.ezijing.com/static/public/fef814a1209bab02367cfdf8ab4f51dc.png" alt="" class="img">
<div class="p1">
<span>试点申报入口：</span>
<div class="all-btn">看通知</div>
</div>
<div class="p1">
<span class="text-index-2em">通知关注：</span>
<div class="all-btn">看通知</div>
</div>
<div class="p1">
<span class="text-index-2em">通知关注：</span>
<div class="color-c">我司会联系您，请关注校方注册网站时联系人注册手机的通知。</div>
</div>
</div>
<div class="module2">
<div class="content-max-width">
<div class="title">组织老师培训</div>
<div class="p">有关单位意向申报成为1+X职业技能等级证书考核站点，请按要求登录政府网站申请试点院校业务平台（网址： https://vslc.ncb.edu.cn ）输入试点院校管理员的账号密码，在考试管理菜单中，打开申报考点栏目，即可自主申报考核站点</div>
<div class="all-btn con-btn">去申请</div>
<div class="title mar-t36">组织开班授课</div>
<div class="item">
<img src="https://zws-imgs-pub.ezijing.com/static/public/6a969be695f821530e26bda9cdd727fb.png" alt="">
<div class="content">
<div class="text">
学校可统一组织开班授课。线上课程可使用我司学习系统的辅助教学功能。<br/>
支持视频课程教学播放、PPT课程讲义播放。<br/>
管理班级学员和开班课，了解各班学习进度
</div>
<div class="all-btn">进入系统</div>
</div>
</div>
</div>
</div>
<div class="module3 content-max-width">
<div class="title">考试报名</div>
<div class="text-box">
<div class="text">成绩查询请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn/csr-scoreCertificate）进行查询。</div>
<div class="all-btn">进入系统</div>
</div>
<div class="img-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/182e9ee4459c70648ddd626075d666a8.png" alt="">
<img src="https://zws-imgs-pub.ezijing.com/static/public/94d7bf72697b2b6e452e93b555b50038.png" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.content-max-width{
width: 1200px;
margin: 0 auto;
}
.title{
font-size: 24px;
font-weight: bold;
color: #333333;
line-height: 33px;
}
.all-btn{
width: 104px;
height: 40px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 14px;
cursor: pointer;
}
.school-box{
background: #F8F8F9;
.module1{
padding: 36px 0;
.p{
font-size: 18px;
color: #666666;
line-height: 36px;
margin: 16px 0;
}
.img{
width: 600px;
margin: 0 auto;
display: block;
}
.p1{
margin: 16px 0;
display: flex;
align-items: center;
.color-c{
line-height: 30px;
color: #666666;
font-size: 18px;
}
span{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 30px;
&.text-index-2em{
text-indent: 2em;
}
}
}
}
.module2{
padding: 36px 0;
background: #fff;
.mar-t36{
margin-top: 36px;
}
.p{
font-size: 18px;
color: #666666;
line-height: 36px;
margin: 16px 0;
}
.con-btn{
margin: 0 auto;
}
.item{
display: flex;
margin-top: 16px;
img{
width: 326px;
height: 180px;
margin-left: 47px;
}
.content{
margin-left: 40px;
.text{
font-size: 18px;
color: #666666;
line-height: 36px;
}
.all-btn{
margin-top: 16px;
}
}
}
}
.module3{
padding: 46px 0 36px;
.text-box{
display: flex;
align-items: center;
margin: 24px 0 16px;
.text{
font-size: 18px;
color: #666666;
line-height: 36px;
}
.all-btn{
margin-left: 25px;
}
}
.img-box{
display: flex;
justify-content: center;
img{
&:nth-child(1){
margin-right: 74px;
}
&:nth-child(2){
margin-top: 16px;
}
}
}
}
}
</style>
src/pages/hall/components/studentHelp.vue 0 → 100644
浏览文件 @ cde555ca
<template>
<div class="candida-box">
<div class="module1 content-max-width">
<div class="title">考生报名</div>
<div class="dosc">1+X证书制度是国家职业教育改革方案实施的重要举措，为全面落实《国家职业教育改革实施方案》和教育部等四部印发的《关于在院校实施“学历证书”+若干职业技能等级证书制度试点方案》（简称1+X证书）文件精神，高效有序推进《金融产品数字化营销职业技能等级证书》考核工作，对已申报1+X证书试点的院校，现开启考试报名工作，有关事项安排如下：</div>
<div class="p">
<span>考试报名对象：</span>
已申报1+X证书试点并通过考核站点验收的学校
</div>
<div class="p2">
<span>考试计划：</span>
<img src="https://zws-imgs-pub.ezijing.com/static/public/6e74b2e552bc3a2bf00062e3af03fe7b.png" alt="">
</div>
<div class="p2">
<span>考试计划：</span>
<div>请各试点院校根据学生学习情况，灵活选择考试时间，组织考试。<br/>
2021年1月份的1+X考试需在12月20日完成报名，报名后不能做任何变更，请各试点院校提前做好相关计划。<br/>
请在每场考试报名截止日期之前完成报名，并于考试当天准时参加考试。因个人原因导致的缺考，不予重新免费安排考试。<br/>
请在每场考试缴费截止日期之前完成缴费，并确保缴费人数与报名人数一致，否则不予安排考试。</div>
</div>
<div class="bm-btn">去报名</div>
<div class="p2 padd-b-36">
<span>缴费流程：</span>
<div class="process">
<span class="order">①</span>
<div class="text">学生</div>
<div class="border"></div>
<span class="order">②</span>
<div class="text">试点学校</div>
<div class="border"></div>
<span class="order">③</span>
<div class="text">培训评价组织</div>
</div>
</div>
</div>
<div class="module2">
<div class="content-max-width">
<div class="title">学习课程</div>
<div class="item">
<img class="img" src="https://zws-imgs-pub.ezijing.com/static/public/dc31668fb1d44405ad8b52c94d9c5e3b.png" alt="">
<div class="content-text">
<div class="text">
学习系统以学习课程和做题练题为主要功能。学习课程以视频展示，清晰、流畅且稳定。视频播放支持倍速、全屏切换、课程讲义和视频双频同步播放；视频章节中插入试卷随学随考；支持视频课程及PDF、PPT等文本课程学习。做题练题区分模拟测试和错题、收藏功能。模拟测试模拟真考流程，熟悉考试做题方式并评估成绩给定参考答案；错题练习系统自动记录错题，针对薄弱环节使学员多次加强练习。收藏试题主动添加试题。学习系统以帮助所有学员取得最好的成绩为目标，可随时客服反馈意见，及时处理和改进。
</div>
<div class="run-btn">进入系统</div>
</div>
</div>
<div class="title">参加考试</div>
<div class="process">
<div class="item">
<div class="icon-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/a3ac60aa76afa4306d9d52e0693ad86f.png" alt="" class="icon">
</div>
<div class="name">打印准考证</div>
</div>
<div class="border"></div>
<div class="item">
<div class="icon-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/417180cc1fdf4078b26478923f1552de.png" alt="" class="icon">
</div>
<div class="name">关注考点通知</div>
</div>
<div class="border"></div>
<div class="item">
<div class="icon-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/df4fd1064d73a099666f3ba38fe106cd.png" alt="" class="icon">
</div>
<div class="name mar-10">身份验证按时入<br/>场熟悉机考系统</div>
</div>
<div class="border"></div>
<div class="item">
<div class="icon-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/3319cf892c2535c1963ec8daef711264.png" alt="" class="icon">
</div>
<div class="name">完成考试</div>
</div>
</div>
</div>
</div>
<div class="module3 content-max-width">
<div class="title mar-t36">成绩查询</div>
<div class="p">成绩查询请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn/csr-scoreCertificate）进行查询。</div>
<img src="https://zws-imgs-pub.ezijing.com/static/public/e2c0c840ca551e344ffff6c03775030c.png" class="img1" alt="">
<div class="btn">去查询</div>
<div class="title">证书查询</div>
<div class="p">证书查询请前往职业技能等级证书信息管理服务平台（网址： https://vslc.ncb.edu.cn/csr-verification）进行查询。</div>
<img src="https://zws-imgs-pub.ezijing.com/static/public/8176a5a1080aeb1e67240d85d12ef468.png" alt="" class="img2">
<div class="btn">去查询</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.content-max-width{
width: 1200px;
margin: 0 auto;
}
.candida-box{
.module1{
padding-top: 37px;
.title{
font-size: 24px;
font-weight: bold;
color: #333333;
line-height: 33px;
}
.dosc{
font-size: 18px;
color: #666666;
line-height: 36px;
margin-top: 16px;
}
.p{
font-size: 18px;
font-weight: bold;
color: #666666;
line-height: 30px;
margin-top: 16px;
span{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 30px;
}
}
.p2{
font-size: 18px;
font-weight: bold;
color: #666666;
line-height: 30px;
margin-top: 16px;
span{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 30px;
}
display: flex;
margin-top: 16px;
}
.bm-btn{
width: 104px;
height: 40px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
line-height: 40px;
text-align: center;
margin-left: 90px;
margin-top: 16px;
}
.process{
display: flex;
align-items: center;
.order{
color: #CCCCCC;
margin-right: 10px;
}
.text{
font-size: 18px;
color: #222222;
margin-right: 10px;
}
.border{
width: 100px;
height: 1px;
background: #ccc;
margin-right: 10px;
}
}
.padd-b-36{
padding-bottom: 36px;
}
}
.module2{
background: #fff;
padding: 24px 0 29px;
.title{
font-size: 24px;
font-weight: bold;
color: #333333;
line-height: 33px;
margin-bottom: 25px;
}
.process{
display: flex;
}
.item{
// display: flex;
.img{
width: 326px;
height: 180px;
}
.content-text{
margin-left: auto;
width: 793px;
.text{
color: #666666;
font-size: 18px;
line-height: 36px;
}
.run-btn{
width: 104px;
height: 40px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
margin-top: 16px;
cursor: pointer;
margin-bottom: 36px;
}
}
}
.process{
display: flex;
justify-content: center;
.item{
.icon-box{
display: flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
background: #FFFFFF;
box-shadow: 0px 1px 4px 0px rgba(153, 153, 153, 0.3);
border-radius: 50%;
margin: 0 auto;
img{
width: 40px;
display: block;
}
}
.name{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 25px;
margin-top: 20px;
&.mar-10{
margin-top: 10px;
}
}
}
.border{
width: 120px;
height: 2px;
background: #CCCCCC;
border-radius: 1px;
margin: 36px 30px 0;
}
}
}
.module3{
padding-bottom: 36px;
.title{
font-size: 24px;
font-weight: bold;
color: #333333;
line-height: 33px;
margin-bottom: 16px;
}
.p{
font-size: 18px;
color: #666666;
line-height: 36px;
}
.img1{
width: 600px;
display: block;
margin: 16px auto;
}
.img2{
width: 609px;
display: block;
margin: 16px auto;
}
.btn{
margin: 0 auto;
width: 104px;
height: 40px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
font-size: 14px;
text-align: center;
font-weight: bold;
color: #FFFFFF;
line-height: 40px;
}
}
}
.mar-t36{
margin-top: 36px;
}
</style>
src/pages/hall/components/teacherHelp.vue 0 → 100644
浏览文件 @ cde555ca
<template>
<div class="teacher-box">
<div class="module1 content-max-width">
<div class="title">师资培训报名</div>
<div class="p">网站师资培训页面选择项目课程点击在线报名，填写培训申请表后，关注审核结果和培训通知。</div>
<div class="p1">
<span>培训报名对象：</span>
<div class="color-c">
相关对口金融专业的老师
</div>
</div>
<div class="p1">
<span>报名入口：</span>
<div class="all-btn">去报名</div>
</div>
<div class="p1">
<span>通知关注：</span>
<div class="all-btn">看通知</div>
</div>
<div class="title mar-t36-b26">老师培训</div>
<div class="item">
<img src="https://zws-imgs-pub.ezijing.com/static/public/6a969be695f821530e26bda9cdd727fb.png" alt="">
<div class="content">
<div class="text">
学习系统以学习课程和辅助教学为主要功能。<br/>
老师学习课程以视频展示为主，清晰、流畅且稳定。视频播放支持倍速、全屏切换、课程讲义和视频双频同步播放；<br/>
辅助教学，使用学习系统，开班授课，可辅导所有学员班课讲解，以取得最好的成绩。
</div>
<div class="all-btn">进入系统</div>
</div>
</div>
</div>
<div class="module2">
<div class="content-max-width">
<div class="title">参加考试</div>
<div class="p">师资培训之后，会通知各位老师线下或者线上考试。</div>
<div class="p1">
<span>通知关注：</span>
<div class="all-btn">看通知</div>
</div>
<div class="title mar-t36-b16">培训证书</div>
<div class="cert-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/c10eedf619424f2881a214284818626c.png" alt="">
<div class="text">师资培训通过之后，会颁发师资培训证书。</div>
</div>
</div>
</div>
<div class="module3 content-max-width">
<div class="title">开班授课</div>
<div class="item">
<div class="item">
<img src="https://zws-imgs-pub.ezijing.com/static/public/6a969be695f821530e26bda9cdd727fb.png" alt="">
<div class="content">
<div class="text">
可使用学习系统的辅助教学功能。<br/>
支持视频课程教学播放、PPT课程讲义播放。<br/>
管理班级学员和开班课，了解进度
</div>
<div class="all-btn">进入系统</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.content-max-width{
width: 1200px;
margin: 0 auto;
}
.all-btn{
width: 104px;
height: 40px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 14px;
cursor: pointer;
}
.teacher-box{
.module1{
padding: 36px 0;
.title{
font-weight: bold;
color: #333333;
line-height: 33px;
font-size: 24px;
&.mar-t36-b26{
margin: 36px 0 26px;
}
}
.p{
font-size: 18px;
color: #666666;
line-height: 36px;
margin: 16px 0;
}
.p1{
margin: 16px 0;
display: flex;
align-items: center;
.color-c{
line-height: 30px;
color: #666666;
font-size: 18px;
}
span{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 30px;
}
}
.item{
display: flex;
img{
width: 326px;
height: 180px;
}
.content{
margin-left: auto;
width: 790px;
.text{
font-size: 18px;
color: #666666;
line-height: 36px;
}
.all-btn{
margin-top: 16px;
}
}
}
}
.module2{
background: #fff;
padding: 36px 0;
.title{
font-size: 24px;
font-weight: bold;
color: #333333;
line-height: 33px;
&.mar-t36-b16{
margin: 36px 0 16px;
}
}
.p{
font-size: 18px;
color: #666666;
line-height: 36px;
margin: 16px 0;
}
.p1{
margin: 16px 0;
display: flex;
align-items: center;
.color-c{
line-height: 30px;
color: #666666;
font-size: 18px;
}
span{
font-size: 18px;
font-weight: bold;
color: #222222;
line-height: 30px;
}
}
.cert-box{
display: flex;
align-items: center;
img{
width: 230px;
height: 145px;
}
.text{
font-size: 18px;
color: #666666;
margin-left: 80px;
}
}
}
.module3{
padding: 36px 0;
.title{
font-size: 24px;
font-weight: bold;
color: #333333;
line-height: 33px;
}
.item{
margin-top: 20px;
display: flex;
img{
width: 326px;
height: 180px;
}
.content{
margin-left: 76px;
.text{
font-size: 18px;
color: #666666;
line-height: 36px;
}
.all-btn{
margin-top: 16px;
}
}
}
}
}
</style>
src/pages/hall/index.vue 0 → 100644
浏览文件 @ cde555ca
<template>
<div class="hall-box">
<haedBanner></haedBanner>
<div class="home-office-hall content-max-width">
<div class="title">办事大厅</div>
<div class="office-mian">
<ul class="tab-btn-box">
<li
v-for="(item, index) in offsetBtn"
:class="offsetTabIndex == index && 'active'"
:key="index"
@click="offsetTab(index)"
>{{ item }}</li>
</ul>
<ul class="item-box">
<template v-if="offsetTabIndex == 0">
<template v-for="(item, index) in examineeNav">
<li :key="index" @click="goPage(item.path)">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">{{ item.text }}</div>
</li>
</template>
</template>
<template v-if="offsetTabIndex == 1">
<template v-for="(item, index) in teacherNav">
<li :key="index" @click="goPage(item.path)">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">{{ item.text }}</div>
</li>
</template>
</template>
<template v-if="offsetTabIndex == 2">
<template v-for="(item, index) in schoolNav">
<li :key="index" @click="goPage(item.path)">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">{{ item.text }}</div>
</li>
</template>
</template>
</ul>
</div>
</div>
<student-help v-if="offsetTabIndex == 0"></student-help>
<teacher-help v-if="offsetTabIndex == 1"></teacher-help>
<school-help v-if="offsetTabIndex == 2"></school-help>
</div>
</template>
<script>
import haedBanner from '@/components/headBanner'
import studentHelp from './components/studentHelp'
import teacherHelp from './components/teacherHelp'
import schoolHelp from './components/schoolHelp'
export default {
components: {
haedBanner,
studentHelp,
teacherHelp,
schoolHelp
},
data() {
return {
offsetTabIndex: 1,
offsetBtn: ['我是考生', '我是老师', '我是学校'],
examineeNav: [
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/8617726397bcc6fa81020934c57d92bd.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/ef0878be9e9fa6deab5b9dcfac9af12b.png',
text: '注册账号',
path: 'register'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/5c7db419e6af3214fa53b1d4920cf7b5.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/76256d877bd6787af42d2f6010108a8b.png',
text: '学生报名',
path: ''
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/b5a6b0bf40f24545fd10cbf315e5839c.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/556e2554d2545d3d3a726dbcbaf20494.png',
text: '学习课程',
path: ''
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/9c4d618281f12680a367d212545cf041.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/53dd24cbf9c4c1a6ed078ab3b6049e95.png',
text: '参加考试',
path: ''
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6bf9fedcbff1d13de413667b33787db3.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3639914b6dbe79d4b2e745159fd49230.png',
text: '成绩查询',
path: ''
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/1e6d8f785a106b17eb698d1d563ff479.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/e3088887b1e2fc9711c7ad692e2e53cd.png',
text: '证书查询',
path: ''
}
],
teacherNav: [
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/2da6e70cac93900bdb1867458c9b7449.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/c92aa5f2800a9a5bbedce54bfa0d499b.png',
text: '注册账号'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/284f07548eb240cc384a102f1b7efdda.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/0c9823481d85f209b4a498945f31ea83.png',
text: '师资培训报名'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/b278993ee5c29349ff83d1d9b4b596c9.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8d24a5c20a8ab87d26db73ccfacd2fba.png',
text: '老师培训'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6f9583c270a3302a352ae9bbba64099d.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8a16c6cd1dc986075a002fe314f21d0d.png',
text: '参加考试'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/06f7b0220ab6d8d9d34f6d68258f2669.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/130affba0b6cefd278c31ddfab74acfc.png',
text: '培训证书'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/70c3defef24fd1438ada43b3e1ccff87.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/fe6b2d4c31d7f6369468c675d5876671.png',
text: '开班授课'
}
],
schoolNav: [
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/00e366f3cc15ab30c1fd285d10989bed.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/66dd597f670a07584897d03a4c6bd9ab.png',
text: '注册账号'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/1dc324792168ee1e6a07b5975e6e3d8b.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/02e1e75b3aed4a92f3038589091be1f2.png',
text: '试点申报'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/17e3d75022ee88d4661bff4ca61f0966.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/073a7d9317d0ff8d8876c4ce53d15bc2.png',
text: '考点申报'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/ea6a2917391444208d9084c3205227b2.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/55065b21e5ba9bc735a3d3527f07af79.png',
text: '组织老师培训'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/cc4885f2f4b6f566954cdb15381916f8.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/901044f1465a5497fef8135f9e2ce4ff.png',
text: '组织开授课'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/1505fd4535d858b4939e46f2534bfcaf.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3c3d204e15a400a7f74b4a9dad44cd55.png',
text: '考试报名'
}
]
}
},
methods: {
offsetTab(n) {
this.offsetTabIndex = n
}
}
}
</script>
<style lang="scss" scoped>
.hall-box{
background: #F8F8F9;
}
.content-max-width{
width: 1200px;
margin: 0 auto;
}
.home-office-hall{
.title{
font-size: 24px;
font-weight: bold;
color: #444444;
line-height: 33px;
padding: 36px 0 16px;
}
.office-mian{
display: flex;
}
.tab-btn-box{
padding-top: 24px;
li{
width: 96px;
height: 40px;
background: none;
border-radius: 23px;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #444444;
cursor: pointer;
&.active{
color: #fff;
background: #A81A42;
border-radius: 23px;
}
}
}
.item-box{
display: flex;
margin-left: 7px;
li{
width: 168px;
height: 168px;
background: #FFFFFF;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09);
border-radius: 4px;
margin-left: 16px;
transition: all .5s;
&:hover{
background: #A81A42;
transform: translateY(-10px);
.img{
display: none;
}
.img-active{
display: block;
}
.text{
color: #fff;
}
}
img{
height: 50px;
display: block;
margin: 43px auto 20px auto;
}
.img-active{
display: none;
}
.text{
text-align: center;
font-size: 16px;
color: #444444;
line-height: 16px;
}
}
}
}
</style>
src/pages/home/index.vue
浏览文件 @ cde555ca
<template> <template>
<div> <div class="home-box">
<div class="home-module-news content-max-width"> <haedBanner></haedBanner>
<div class="slide-box" v-if="swiperList.length"> <div class="home-office-hall content-max-width">
<swiper ref="mySwiper" :options="swiperOptions" class="item-swiper"> <div class="title">办事大厅</div>
<swiper-slide v-for="(item, index) in swiperList" :key="index"> <div class="office-mian">
<router-link :to="`/news/detail?id=${item.id}&type=home`"> <ul class="tab-btn-box">
<img :src="item.url" alt="" /> <li
</router-link> v-for="(item, index) in offsetBtn"
</swiper-slide> :class="offsetTabIndex == index && 'active'"
</swiper> :key="index"
<div class="assist" v-if="swiperList.length"> @click="offsetTab(index)"
<div class="text">{{ swiperList[swiperIndex].content }}</div> >{{ item }}</li>
<div class="pagination"> </ul>
<span v-for="(item, index) in swiperList" :key="index" :class="index == swiperIndex && 'active'"></span> <ul class="item-box">
</div> <template v-if="offsetTabIndex == 0">
</div> <template v-for="(item, index) in examineeNav">
<li :key="index" @click="goPage(item.path)">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">{{ item.text }}</div>
</li>
</template>
</template>
<template v-if="offsetTabIndex == 1">
<template v-for="(item, index) in teacherNav">
<li :key="index" @click="goPage(item.path)">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">{{ item.text }}</div>
</li>
</template>
</template>
<template v-if="offsetTabIndex == 2">
<template v-for="(item, index) in schoolNav">
<li :key="index" @click="goPage(item.path)">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">{{ item.text }}</div>
</li>
</template>
</template>
</ul>
</div> </div>
<div class="news-box"> </div>
<div class="tabs-btn"> <div class="notice-box content-max-width">
<div :class="!tabsIndex ? 'btn active' : 'btn'" @click="tabs(0)">新闻动态</div> <div class="tab-btn">
<div :class="tabsIndex ? 'btn active' : 'btn'" @click="tabs(1)">活动公告</div> <div class="title">通知公告</div>
</div> <div :class="newsTabIndex == 0 ? 'btn active' : 'btn'" @click="newsTab(0)">公告通知</div>
<div class="news-content"> <div :class="newsTabIndex == 1 ? 'btn active' : 'btn'" @click="newsTab(1)">工作动态</div>
<div class="title" v-if="list[0]"><router-link :to="`/news/detail?id=${list[0].id}&type=home`">{{ list[0].title }}</router-link></div> </div>
<ul> <div class="notice-mian">
<template v-for="(item, index) in list"> <ul class="assist-list">
<template v-if="index >= 1 && index <= 4"> <template v-for="(item, index) in list">
<router-link :to="`/news/detail?id=${item.id}&type=home`" :key="index"> <template v-if="index >= 1 && index <= 4">
<li> <router-link :to="`/news/detail?id=${item.id}&type=home`" :key="index">
<span> <li>
{{ item.title }} <div class="text">{{ item.title }}</div>
</span> </li>
<template v-if="list.length >= 5"> </router-link>
<div class="more" v-if="index == 4">
<router-link to="/news">更多</router-link>
</div>
</template>
<template>
<div class="more" v-if="list.length == index">
<router-link to="/news">更多</router-link>
</div>
</template>
</li>
</router-link>
</template>
</template> </template>
</ul> </template>
<li class="border-none">
<router-link to="/news">
<div class="text">更多通知</div>
</router-link>
</li>
</ul>
<div class="slide-box" v-if="swiperList.length">
<swiper ref="mySwiper" :options="swiperOptions" class="item-swiper">
<swiper-slide v-for="(item, index) in swiperList" :key="index">
<router-link :to="`/news/detail?id=${item.id}&type=home`">
<img :src="item.url" alt="" />
</router-link>
</swiper-slide>
</swiper>
<div class="assist" v-if="swiperList.length">
<div class="text">{{ swiperList[swiperIndex].content }}</div>
<div class="pagination">
<span v-for="(item, index) in swiperList" :key="index" :class="index == swiperIndex && 'active'"></span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="home-module-poster content-max-width"> <div class="advert-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/e4abb49951a743fb6213ad4888a8bf28.png" alt=""> <img src="https://zws-imgs-pub.ezijing.com/static/public/3dceecce8df0a6dcb06d48c75ada807b.png" alt="">
</div> </div>
<div class="home-module-entrance content-max-width"> <div class="service-box content-max-width">
<div class="title">
教·学服务
</div>
<ul> <ul>
<li> <template v-for="(item, index) in serviceList">
<div class="entrance"> <li :key="index">
<div class="btn" @click="goPage('/train')"> <img :src="item.img" alt="">
<span>活动报名</span> <div class="mask">
<div class="icon">→</div> <div class="content-box">
</div> <span class="tit">{{ item.title }}</span>
<div class="btn" @click="goPage('https://vslc.ncb.edu.cn/ncb_admin/#/login?systemType=3', 1)"> <div class="desc">{{ item.desc }}</div>
<span>试点申报</span> <div class="more">查看更多 ></div>
<div class="icon">→</div> </div>
</div>
</div>
</li>
<li>
<div class="entrance one" @click="goPage('https://x-learning.ezijing.com/', 1)">
<div class="btn">
<span>学习平台入口</span>
</div>
<div class="btn">
<div class="icon">→</div>
</div>
</div>
</li>
<li>
<div class="entrance">
<div class="btn" @click="goPage('/query')">
<span>成绩查询</span>
<div class="icon">→</div>
</div> </div>
<div class="btn" @click="goPage('/query')"> </li>
<span>证书查询</span> </template>
<div class="icon">→</div>
</div>
</div>
</li>
<li>
<div class="entrance">
<div class="btn" @click="goPage('https://x-exam.ezijing.com/login/6747074947782279168', 1)">
<span>考试软件</span>
<div class="icon">→</div>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -103,12 +110,14 @@ ...@@ -103,12 +110,14 @@
<script> <script>
import action from '@action' import action from '@action'
import haedBanner from '@/components/headBanner'
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper' import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css' import 'swiper/swiper-bundle.css'
export default { export default {
components: { components: {
swiper, swiper,
swiperSlide swiperSlide,
haedBanner
}, },
directives: { directives: {
swiper: directive swiper: directive
...@@ -118,14 +127,136 @@ export default { ...@@ -118,14 +127,136 @@ export default {
return {//this.$store.state.classify return {//this.$store.state.classify
articleClassify: this.$store.state.classify, articleClassify: this.$store.state.classify,
tabsIndex: 0, tabsIndex: 0,
swiperList: [ newsTabIndex: 0,
serviceList: [
{ {
url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png', img: 'https://zws-imgs-pub.ezijing.com/static/public/8938cfd93f92e9616ab677a0da59727f.png',
content: '关于1+X金融数字化营销证书考核站点申报' title: '教材中心',
desc: '按照金融数字化营销技能等级标准，对典型工作任务，岗位操作技能，涵盖大中型企业服务，并系统解构了中小微企业的营销流程全部过程和规范……'
},
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/1e0843ec08a2ea4aa152125bd1c70867.png',
title: '教学资源（老师）',
desc: ''
},
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/cc0746c91d9d42ec9c016ef6835d90af.png',
title: '课程学习（学生）',
desc: ''
},
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/a5abcb75376ed28373abace5ed4e03bc.png',
title: '实操学习',
desc: ''
}
],
examineeNav: [
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/8617726397bcc6fa81020934c57d92bd.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/ef0878be9e9fa6deab5b9dcfac9af12b.png',
text: '注册账号',
path: '/register'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/5c7db419e6af3214fa53b1d4920cf7b5.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/76256d877bd6787af42d2f6010108a8b.png',
text: '学生报名',
path: '/train'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/b5a6b0bf40f24545fd10cbf315e5839c.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/556e2554d2545d3d3a726dbcbaf20494.png',
text: '学习课程',
path: ''
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/9c4d618281f12680a367d212545cf041.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/53dd24cbf9c4c1a6ed078ab3b6049e95.png',
text: '参加考试',
path: ''
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6bf9fedcbff1d13de413667b33787db3.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3639914b6dbe79d4b2e745159fd49230.png',
text: '成绩查询',
path: ''
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/1e6d8f785a106b17eb698d1d563ff479.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/e3088887b1e2fc9711c7ad692e2e53cd.png',
text: '证书查询',
path: ''
}
],
teacherNav: [
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/2da6e70cac93900bdb1867458c9b7449.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/c92aa5f2800a9a5bbedce54bfa0d499b.png',
text: '注册账号'
}, },
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/284f07548eb240cc384a102f1b7efdda.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/0c9823481d85f209b4a498945f31ea83.png',
text: '师资培训报名'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/b278993ee5c29349ff83d1d9b4b596c9.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8d24a5c20a8ab87d26db73ccfacd2fba.png',
text: '老师培训'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6f9583c270a3302a352ae9bbba64099d.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8a16c6cd1dc986075a002fe314f21d0d.png',
text: '参加考试'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/06f7b0220ab6d8d9d34f6d68258f2669.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/130affba0b6cefd278c31ddfab74acfc.png',
text: '培训证书'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/70c3defef24fd1438ada43b3e1ccff87.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/fe6b2d4c31d7f6369468c675d5876671.png',
text: '开班授课'
}
],
schoolNav: [
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/00e366f3cc15ab30c1fd285d10989bed.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/66dd597f670a07584897d03a4c6bd9ab.png',
text: '注册账号'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/1dc324792168ee1e6a07b5975e6e3d8b.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/02e1e75b3aed4a92f3038589091be1f2.png',
text: '试点申报'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/17e3d75022ee88d4661bff4ca61f0966.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/073a7d9317d0ff8d8876c4ce53d15bc2.png',
text: '考点申报'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/ea6a2917391444208d9084c3205227b2.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/55065b21e5ba9bc735a3d3527f07af79.png',
text: '组织老师培训'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/cc4885f2f4b6f566954cdb15381916f8.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/901044f1465a5497fef8135f9e2ce4ff.png',
text: '组织开授课'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/1505fd4535d858b4939e46f2534bfcaf.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3c3d204e15a400a7f74b4a9dad44cd55.png',
text: '考试报名'
}
],
offsetBtn: ['我是考生', '我是老师', '我是学校'],
swiperList: [
{ {
url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png', url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png',
content: '关于1+X金融数字化营销证书考核站点申报2' content: '关于1+X金融数字化营销证书考核站点申报'
} }
], ],
swiperOptions: { swiperOptions: {
...@@ -144,7 +275,8 @@ export default { ...@@ -144,7 +275,8 @@ export default {
}, },
swiperIndex: 0, swiperIndex: 0,
videoShow: false, videoShow: false,
list: [] list: [],
offsetTabIndex: 0
} }
}, },
computed: { computed: {
...@@ -156,6 +288,12 @@ export default { ...@@ -156,6 +288,12 @@ export default {
this.newsList() this.newsList()
}, },
methods: { methods: {
newsTab(n) {
this.newsTabIndex = n
},
offsetTab(n) {
this.offsetTabIndex = n
},
tabs(n) { tabs(n) {
this.tabsIndex = n this.tabsIndex = n
}, },
...@@ -209,178 +347,276 @@ export default { ...@@ -209,178 +347,276 @@ export default {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.home-box{
.home-module-news{ background: #F8F8F8;
padding: 24px 0; .home-head{
display: flex; img{
.slide-box{
cursor: pointer;
position: relative;
width: 630px;
height: 354px;
.item-swiper{
width: 100%; width: 100%;
height: 100%; display: block;
img{ // height: 240px;
display: block; }
width: 100%; }
height: 100%; .home-office-hall{
} .title{
font-size: 24px;
font-weight: bold;
color: #444444;
line-height: 33px;
padding: 36px 0 16px;
} }
.assist{ .office-mian{
display: flex; display: flex;
position: absolute; }
bottom: 0; .tab-btn-box{
left: 0; padding-top: 24px;
width: 100%; li{
height: 44px; width: 96px;
background: rgba(0, 0, 0, .3); height: 40px;
z-index: 99; background: none;
.text{ border-radius: 23px;
font-size: 14px; text-align: center;
color: #FFFFFF; line-height: 40px;
line-height: 44px; font-size: 16px;
margin-left: 24px; color: #444444;
cursor: pointer;
&.active{
color: #fff;
background: #A81A42;
border-radius: 23px;
}
} }
} }
.pagination{ .item-box{
display: flex; display: flex;
margin-left: auto; margin-left: 7px;
align-items: center; li{
padding-right: 40px; width: 168px;
span{ height: 168px;
width: 8px; background: #FFFFFF;
height: 8px; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09);
background: #000000; border-radius: 4px;
opacity: 0.2; margin-left: 16px;
border-radius: 50%; transition: all .5s;
margin-left: 8px; &:hover{
&.active{ background: #A81A42;
opacity: 1; transform: translateY(-10px);
background: #fff; .img{
display: none;
}
.img-active{
display: block;
}
.text{
color: #fff;
}
}
img{
height: 50px;
display: block;
margin: 43px auto 20px auto;
}
.img-active{
display: none;
}
.text{
text-align: center;
font-size: 16px;
color: #444444;
line-height: 16px;
} }
} }
} }
} }
.news-box{ .notice-box{
width: 546px; padding-top: 39px;
margin-left: auto; .tab-btn{
.tabs-btn{
display: flex; display: flex;
.title{
font-size: 24px;
font-weight: bold;
color: #444444;
line-height: 33px;
margin-right: 23px;
}
.btn{ .btn{
cursor: pointer; cursor: pointer;
width: 273px; width: 96px;
height: 74px; height: 40px;
background: #F9F9F9; background: none;
color: #666666; border-radius: 23px;
line-height: 74px; text-align: center;
line-height: 40px;
color: #444;
text-align: center; text-align: center;
font-size: 24px;
&.active{ &.active{
color: #fff; color: #fff;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%); background: #A81A42;
} }
} }
} }
.news-content{ .notice-mian{
.title{ display: flex;
cursor: pointer; margin-top: 16px;
width:510px; .assist-list{
overflow: hidden; width: 470px;
text-overflow:ellipsis; background: #FFFFFF;
white-space: nowrap; border-radius: 4px;
text-align: center; a{
font-size: 24px; &:nth-child(1){
font-weight: bold; li{
color: #C01540; background: #A81A42;
line-height: 33px; border-radius: 4px;
margin-top: 24px; .text{
} color: #fff;
ul{ }
margin-top: 10px; }
}
}
li{ li{
cursor: pointer; cursor: pointer;
&.border-none{
border: none;
}
.text{
width: 423px;
margin: 0 auto;
height: 55px;
border-bottom: 1px solid #eee;
line-height: 55px;
text-align: center;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 18px;
color: #444444;
}
}
}
.slide-box{
cursor: pointer;
position: relative;
width: 713px;
height: 280px;
margin-left: auto;
.item-swiper{
width: 100%;
height: 100%;
img{
display: block;
width: 100%;
height: 100%;
}
}
.assist{
display: flex; display: flex;
position: absolute;
bottom: 0;
left: 0;
width: 100%; width: 100%;
height: 49px; height: 44px;
border-bottom: 1px solid #eee; background: rgba(0, 0, 0, .3);
z-index: 99;
.text{
font-size: 14px;
color: #FFFFFF;
line-height: 44px;
margin-left: 24px;
}
}
.pagination{
display: flex;
margin-left: auto;
align-items: center; align-items: center;
padding-right: 40px;
span{ span{
font-size: 18px; width: 8px;
color: #666666; height: 8px;
width: 510px; background: #000000;
overflow:hidden; opacity: 0.2;
text-overflow:ellipsis; border-radius: 50%;
white-space:nowrap margin-left: 8px;
} &.active{
.more{ opacity: 1;
font-size: 18px; background: #fff;
color: #5788D4; }
margin-left: auto;
} }
} }
} }
} }
} }
} .advert-box{
.home-module-poster{ width: 1200px;
img{ margin: 36px auto;
width: 100%; img{
display: block; width: 1200px;
display: block;
}
} }
} .service-box{
.home-module-entrance{ margin-bottom: 36px;
padding: 24px 0; .title{
ul{ font-size: 24px;
display: flex; font-weight: bold;
justify-content: space-between; color: #444444;
li{ line-height: 33px;
width: 290px; }
height: 174px; ul{
background-size: 100% 100%; margin-top: 16px;
display: flex; display: flex;
align-items: center; li{
&:nth-child(1){ width: 300px;
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/aa5bf0eb195dbc6bb2c620516f98cd34.png); height: 400px;
} position: relative;
&:nth-child(2){ // transition: all .5s;
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/7d12c495871f8a91ed0c153b68c7fb5f.png); &:hover{
} .mask{
&:nth-child(3){ background: rgba(168,26,66,0.5);
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/26e5eee05d46a73d332c517eeb3c3b72.png); .content-box{
} bottom: 20px;
&:nth-child(4){ .desc{
background-image: url(https://zws-imgs-pub.ezijing.com/static/public/1f7235d8d4120b76ef051267f8feac0f.png); display: block;
} }
.entrance{ .more{
padding-left: 16px; display: block;
&.one{ }
.btn{ }
&:nth-child(1){
margin-bottom: 12px;
}
.icon{
margin-left: 0;
}
} }
} }
.btn{ .mask{
cursor: pointer; transition: all .5s;
display: flex; position: absolute;
&:nth-child(1){ top: 0;
margin-bottom: 24px; left: 0;
} width: 100%;
span{ height: 100%;
font-size: 24px; background: rgba(0,0,0,0.5);
font-weight: bold; .content-box{
color: #FFFFFF; position: absolute;
} left: 16px;
.icon{ bottom: 55px;
font-size: 20px; .tit{
font-weight: bold; width: auto;
color: #FFFFFF; font-size: 18px;
line-height: 33px; font-weight: bold;
margin-left: 10px; color: #FFFFFF;
line-height: 25px;
border-bottom: 1px solid #fff;
}
.desc{
width: 212px;
font-size: 14px;
color: #FFFFFF;
line-height: 20px;
margin-top: 12px;
display: none;
}
.more{
font-size: 14px;
color: #FFFFFF;
line-height: 20px;
margin-top: 20px;
display: none;
}
} }
} }
} }
......
src/pages/news/index.vue
浏览文件 @ cde555ca
<template> <template>
<div class="news-box"> <div class="news-box">
<breadcrumb class="content-max-width crumb" :data="crumbData"/> <haedBanner></haedBanner>
<btn-tabs class="tabs-box" :data="tabsData"></btn-tabs> <!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
<btn-tabs class="tabs-box content-max-width" :data="tabsData"></btn-tabs>
<ul class="content-max-width"> <ul class="content-max-width">
<template v-for="(item, index) in list"> <template v-for="(item, index) in list">
<li :key="index"> <li :key="index">
...@@ -19,6 +20,7 @@ ...@@ -19,6 +20,7 @@
</div> </div>
</template> </template>
<script> <script>
import haedBanner from '@/components/headBanner'
import item from './components/listItem' import item from './components/listItem'
import btnTabs from '@/components/tabs/btnTabs' import btnTabs from '@/components/tabs/btnTabs'
import breadcrumb from '@/components/breadcrumb' import breadcrumb from '@/components/breadcrumb'
...@@ -27,7 +29,8 @@ export default { ...@@ -27,7 +29,8 @@ export default {
components: { components: {
item, item,
btnTabs, btnTabs,
breadcrumb breadcrumb,
haedBanner
}, },
data() { data() {
return { return {
...@@ -82,6 +85,11 @@ export default { ...@@ -82,6 +85,11 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
img{
width: 100%;
display: block;
// height: 240px;
}
.crumb{ .crumb{
padding-top: 24px; padding-top: 24px;
} }
...@@ -91,7 +99,7 @@ export default { ...@@ -91,7 +99,7 @@ export default {
} }
.news-box{ .news-box{
.tabs-box{ .tabs-box{
padding: 24px 0 30px; padding: 60px 0 0;
} }
} }
.pagination{ .pagination{
......
src/pages/service/components/buy.vue 0 → 100644
浏览文件 @ cde555ca
<template>
<div class="book-detail-box content-max-width">
<!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
<div class="bool-det-top">
<div class="item-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/7c63bd40600a040f867fe4db9014fb7c.png" alt="">
<div class="right-content">
<div class="title">关于1+X金融数字化营销证书考核站点申报的通知</div>
<div class="des-box">
<p><span>教材简介：</span><i>往价计子断选社界他界四收半很导条回于问个地给资政色金美关做除当打目商马层消酸龙信样世手除制二美信很按划从专我。时先革自好利治条每部教最运则府完接上立什线为象律然对就率则适第变一需党事连识接月报专各口细信要指有飞应组必飞队知从好作用直矿里。已量少查市平料通题界期下干</i></p>
<p class="align-r"><span>定价：</span><i>199¥</i></p>
<p class="align-r cen"><span>数量：</span><input type="text"></p>
<div class="buy-btn">购买</div>
</div>
</div>
</div>
<div class="v-code-box">
<div class="block"></div>
<div class="text">手机扫码浏览</div>
</div>
</div>
<div class="book-det-bottom">
<div class="fix-left">
<div class="material">
<div class="title">教材介绍</div>
<div class="content">
往价计子断选社界他界四收半很导条回于问个地给资政色金美关做除当打目商马层消酸龙信样世手除制二美信很按划从专我。时先革自好利治条每部教最运则府完接上立什线为象律然对就率则适第变一需党事连识接月报专各口细信要指有飞应组必飞队知从好作用直矿里。已量少查市平料通题界期下干
</div>
<div class="info">
<p><span>作者：</span>赵瑾龙</p>
<p><span>出版时间：</span>2020.10.10</p>
<p><span>ISBN：</span>2020.10.19—2020.11.20</p>
<p><span>发行日期：</span>2020.20.20</p>
</div>
</div>
<div class="catalog">
<div class="title">目录</div>
<ul>
<li>
<div class="chapter">第一章</div>
<div class="node" @click="goChapter">第一节</div>
</li>
<li>
<div class="chapter">第一章</div>
<div class="node" @click="goChapter">第一节</div>
</li>
<li>
<div class="chapter">第一章</div>
<div class="node" @click="goChapter">第一节</div>
</li>
</ul>
</div>
</div>
<div class="author">
<div class="title">作者</div>
<div class="item">
<div class="info-box">
<img src="https://zws-imgs-pub.ezijing.com/static/public/f064b2cb83039e1d4754993167d73864.png" alt="">
<div class="info">
<div class="name">赵瑾龙</div>
<div class="xx">研究院</div>
</div>
</div>
<div class="intr">
<div class="name">简介：</div>
<div class="text">往价计子断选社界他界四收半很导条回于问个地给资政色金美关做除当打目商马层消酸龙信样世手除制二美信很按划从专我。</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import breadcrumb from '@/components/breadcrumb'
export default {
components: {
breadcrumb
},
data() {
return {
crumbData: [
{
path: '/',
name: '首页'
},
{
path: '/textBook',
name: '教材中心'
},
{
name: '金融数字化营销'
}
]
}
},
methods: {
goChapter() {
this.$router.push({
path: '/textBook/chapter'
})
}
}
}
</script>
<style lang="scss" scoped>
.content-max-width{
width: 1200px;
margin: 0 auto;
}
.buy-btn{
width: 150px;
height: 36px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
text-align: center;
font-size: 14px;
color: #FFFFFF;
line-height: 36px;
margin-top: 16px;
cursor: pointer;
}
.book-det-bottom{
display: flex;
.catalog{
.title{
font-size: 18px;
font-weight: bold;
color: #C80046;
line-height: 25px;
margin-bottom: 24px;
}
ul{
li{
width: 729px;
padding: 16px 0;
border-top: 1px solid #eee;
.chapter{
font-size: 18px;
font-weight: bofld;
color: #262626;
line-height: 25px;
}
.node{
font-size: 14px;
color: #7D7D7D;
line-height: 20px;
margin-top: 12px;
cursor: pointer;
}
}
}
}
.author{
margin-left: auto;
.title{
font-size: 18px;
font-weight: bold;
color: #C80046;
line-height: 25px;
margin-bottom: 24px;
}
.item{
width: 280px;
border-top: 1px solid #eee;
margin-top: 24px;
.info-box{
padding-top: 16px;
display: flex;
align-items: center;
img{
width: 80px;
height: 80px;
}
.info{
margin-left: 16px;
.name{
font-size: 18px;
font-weight: bold;
color: #2B2B2B;
line-height: 25px;
}
.xx{
font-size: 14px;
color: #888888;
line-height: 20px;
margin-top: 12px;
}
}
}
.intr{
margin-top: 16px;
display: flex;
.name{
font-size: 14px;
font-weight: bold;
color: #262626;
line-height: 20px;
white-space: nowrap;
}
.text{
font-size: 14px;
color: #7D7D7D;
line-height: 20px;
}
}
}
}
}
.bool-det-top{
display: flex;
padding-top: 24px;
}
.book-detail-box{
.v-code-box{
width: 136px;
margin-left: 24px;
// margin-top: 24px;
.block{
width: 136px;
height: 136px;
background: #D8D8D8;
border: 1px solid #979797;
}
.text{
font-size: 14px;
color: #222222;
line-height: 20px;
margin-top: 8px;
text-align: center;
}
}
.item-box{
// padding: 24px 0;
// border-bottom: 1px solid #eee;
display: flex;
img{
width: 258px;
height: 143px;
display: block;
}
.right-content{
margin-left: 24px;
.title{
font-size: 18px;
font-weight: bold;
color: #C01540;
line-height: 25px;
}
.des-box{
// width: 523px;
margin-top: 24px;
p{
input{
width: 70px;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
padding-left: 10px;
}
// text-align: right;
font-size: 14px;
color: #666666;
line-height: 20px;
margin-bottom: 8px;
display: flex;
&.cen{
align-items: center;
}
&.align-r{
text-align: right;
}
span{
width: 70px;
font-size: 14px;
font-weight: bold;
color: #222222;
line-height: 20px;
white-space: nowrap;
}
i{
width: 523px;
font-style: normal;
font-size: 14px;
color: #717171;
line-height: 20px;
text-align: left;
}
}
}
.detail-btn{
color: #fff;
text-align: center;
line-height: 36px;
width: 96px;
height: 36px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
margin-top: 16px;
}
}
}
}
.crumb{
padding-top: 24px;
}
.material{
width: 729px;
margin: 56px 0 30px;
.title{
line-height: 57px;
border-bottom: 1px solid #ddd;
font-size: 18px;
font-weight: bold;
color: #C80046;
}
.content{
font-size: 14px;
color: #717171;
line-height: 20px;
margin-top: 16px;
}
.info{
margin-top: 16px;
font-size: 14px;
color: #262626;
line-height: 20px;
p{
margin-bottom: 14px;
}
span{
font-weight: bold;
}
}
}
</style>
src/pages/service/index.vue 0 → 100644
浏览文件 @ cde555ca
<template>
<div>
<haedBanner></haedBanner>
<ul class="service-tab content-max-width">
<template v-for="(item, index) in tabData">
<li @click="tabChange(index)" :key="index" :class="index == tabIndex && 'active'">{{ item }}</li>
</template>
</ul>
<div class="moudel1 content-max-width" v-if="tabIndex == 0 && !isBuyShow">
<div class="title">“1+X”教材简介</div>
<div class="con-text">
经过对中职、高职和应用型本科财税类专业教学标准的深入研究，通过与具有代表性的院校进行现场访谈，专家研讨等方式的走访调研工作，充分分析了解在书证融通方面各大院校遇到的问题，并就普遍典型问题进行梳理，对比分析2019年教育部职成司发布财经商贸大类的高等职业专业教学标准，并以中职、高职和本科三个层次对标会计专业教学标准的衔接融通方案，一共三套范例参考方案，智能财税职业技能等级标准分为初中高级，以高职为例，适用主要专业财务管理、会计、会计信息管理、审计、税务等专业。暂按16学时计为1学分，智能财税职业技能等级标准（初级）的总学时为136，其中上册40学时、中册56学时、下册40学时，完成初级阶段学习，需要完成其中两门共计96个学时，其中2册为必修，1册和3册选修。总学分为8.5。具体为：
从形式上，我们按照智能财税职业技能等级标准中的工作领域为单位模块进行划分，经过梳理，从高职的最新会计专业教学标准分析，对应课程：财务会计基础、企业财务会计、纳税实务、会计信息系统应用、创新创业教育。对应的课程名称具体
</div>
<div class="buy-box">
<div class="name">立即购买：</div>
<span @click="isBuyShow = true">《金融产品数字化营销初级》</span>
<span @click="isBuyShow = true">《金融产品数字化营销中级》</span>
<span @click="isBuyShow = true">《金融产品数字化营销高级》</span>
</div>
</div>
<div class="moudel2 content-max-width" v-if="tabIndex == 1 && !isBuyShow">
<div class="con-text">
经过对中职、高职和应用型本科财税类专业教学标准的深入研究，通过与具有代表性的院校进行现场访谈，专家研讨等方式的走访调研工作，充分分析了解在书证融通方面各大院校遇到的问题，并就普遍典型问题进行梳理，对比分析2019年教育部职成司发布财经商贸大类的高等职业专业教学标准，并以中职、高职和本科三个层次对标会计专业教学标准的衔接融通方案，一共三套范例参考方案，智能财税职业技能等级标准分为初中高级，以高职为例，适用主要专业财务管理、会计、会计信息管理、审计、税务等专业。暂按16学时计为1学分，智能财税职业技能等级标准（初级）的总学时为136，其中上册40学时、中册56学时、下册40学时，完成初级阶段学习，需要完成其中两门共计96个学时，其中2册为必修，1册和3册选修。总学分为8.5。具体为：
从形式上，我们按照智能财税职业技能等级标准中的工作领域为单位模块进行划分，经过梳理，从高职的最新会计专业教学标准分析，对应课程：财务会计基础、企业财务会计、纳税实务、会计信息系统应用、创新创业教育。对应的课程名称具体
</div>
<div class="down-btn-box">
<div class="all-btn">下载文件1</div>
<div class="all-btn">下载文件2</div>
</div>
<div class="pdf">教学资源.pdf</div>
</div>
<buy v-if="isBuyShow"/>
</div>
</template>
<script>
import haedBanner from '@/components/headBanner'
import buy from './components/buy'
export default {
components: {
haedBanner,
buy
},
data() {
return{
isBuyShow: false,
tabIndex: 0,
tabData: ['教材中心', '教学资源(老师)', '课程学习(学生)', '实操学习']
}
},
methods: {
tabChange(n) {
this.isBuyShow = false
if (n === 2) {
window.location.href = 'https://x-learning.ezijing.com/'
}
this.tabIndex = n
}
}
}
</script>
<style lang="scss" scoped>
.content-max-width{
width: 1200px;
margin: 0 auto;
}
.service-tab{
display: flex;
padding: 36px 0 24px;
li{
cursor: pointer;
padding: 0 16px;
height: 34px;
border-radius: 27px;
line-height: 34px;
font-size: 14px;
color: #444444;
text-align: center;
&.active{
background: #A81A41;
color: #fff;
}
}
}
.all-btn{
width: 104px;
height: 40px;
background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
border-radius: 4px;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 14px;
cursor: pointer;
}
.moudel1{
.title{
font-size: 24px;
color: #C01540;
line-height: 33px;
margin-bottom: 16px;
text-align: center;
}
.con-text{
font-size: 14px;
color: #717171;
line-height: 36px;
}
.buy-box{
padding-bottom: 36px;
display: flex;
align-items: center;
margin-top: 16px;
.name{
font-size: 18px;
font-weight: bold;
color: #222222;
}
span{
font-size: 14px;
color: #0053C6;
cursor: pointer;
}
.con-text{
font-size: 14px;
color: #717171;
line-height: 36px;
}
}
}
.moudel2{
.con-text{
font-size: 14px;
color: #717171;
line-height: 36px;
}
.down-btn-box{
display: flex;
.all-btn{
margin: 24px 0;
&:nth-child(1){
margin-right: 16px;
}
}
}
.pdf{
font-size: 14px;
color: #0053C6;
line-height: 20px;
padding-bottom: 36px;
cursor: pointer;
}
}
</style>
src/pages/train/components/item.vue
浏览文件 @ cde555ca
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<p>书籍简介：基础数据维护及档案管理</p> <p>书籍简介：基础数据维护及档案管理</p>
</div> </div>
<router-link :to="`/train/detail?id=${data.id}`"> <router-link :to="`/train/detail?id=${data.id}`">
<div class="detail-btn">查看详情</div> <div class="detail-btn">在线报名</div>
</router-link> </router-link>
</div> </div>
<div class="right-time"> <div class="right-time">
......
src/pages/train/index.vue
浏览文件 @ cde555ca
<template> <template>
<div class="content-max-width"> <div class="content-max-width">
<breadcrumb class="content-max-width crumb" :data="crumbData"/> <!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
<btn-tabs class="btn-tabs-box" @tabsChange="tabsChange" :data="btnTabsData"></btn-tabs> <!-- <btn-tabs class="btn-tabs-box" @tabsChange="tabsChange" :data="btnTabsData"></btn-tabs> -->
<template v-if="!tabsIndex"> <template v-if="!tabsIndex">
<div class="new-tits">办事大厅</div>
<screen-tabs class="screen-tabs-box" :data="screenTabsData"></screen-tabs> <screen-tabs class="screen-tabs-box" :data="screenTabsData"></screen-tabs>
<div class="train-mian"> <div class="train-mian">
<ul> <ul>
...@@ -123,6 +124,7 @@ export default { ...@@ -123,6 +124,7 @@ export default {
} }
.btn-tabs-box{ .btn-tabs-box{
padding: 24px 0; padding: 24px 0;
justify-content: left;
} }
.train-mian{ .train-mian{
display: flex; display: flex;
...@@ -189,4 +191,12 @@ export default { ...@@ -189,4 +191,12 @@ export default {
background-size: 100% 100% !important; background-size: 100% 100% !important;
} }
} }
.new-tits{
font-size: 24px;
font-weight: bold;
color: #444444;
line-height: 33px;
margin-bottom: 16px;
margin-top: 36px;
}
</style> </style>
src/router/routes.js
浏览文件 @ cde555ca
...@@ -29,7 +29,11 @@ export default [ ...@@ -29,7 +29,11 @@ export default [
// 证书成绩查询 // 证书成绩查询
{ path: '/query', component: () => import('@/pages/query/index.vue') }, { path: '/query', component: () => import('@/pages/query/index.vue') },
// 证书成绩查询 // 证书成绩查询
{ path: '/register', component: () => import('@/pages/account/register.vue') } { path: '/register', component: () => import('@/pages/account/register.vue') },
// 办事大厅
{ path: '/hall', component: () => import('@/pages/hall/index.vue') },
// 教学服务
{ path: '/service', component: () => import('@/pages/service/index.vue') }
] ]
}, },
// 考核站点详情 // 考核站点详情
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论