提交 6d60f62d authored 作者: lihuihui's avatar lihuihui

修改样式

上级 3c1665b5
......@@ -5675,7 +5675,7 @@
},
"html-tags": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
"integrity": "sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos="
},
"html-webpack-plugin": {
......@@ -6638,7 +6638,7 @@
},
"lodash.kebabcase": {
"version": "4.1.1",
"resolved": "https://registry.npm.taobao.org/lodash.kebabcase/download/lodash.kebabcase-4.1.1.tgz",
"resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
"integrity": "sha1-hImxyw0p/4gZXM7KRI/21swpXDY="
},
"loglevel": {
......@@ -9935,7 +9935,7 @@
},
"svg-tags": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
},
"swiper": {
......
import BaseAPI from './base_api'
export default class ScoreAPI extends BaseAPI {
//zws/v1/cms/news
/**
* zws项目内容获取
*/
getContent = name =>
this.get(
`zws/v1/cms/projects/1000/contents/${encodeURIComponent(decodeURIComponent(name))}?sites=sofia.ezijing.com`,
{}
)
/**
* zws新闻/消息获取
*/
getNews = (obj = {}) => this.get('/zws/v1/cms/news', obj, {})
/**
* 获取当前状态值
* project_id [int] 项目id
*/
getStatus = (obj = {}) => this.get('zws/v1/enrollment/submissions', obj, {})
/**
* 获取测评系统测试地址
*/
getexamTestUrl = () => this.get('usercenter/v1/evaluation/get-address', {}, {})
}
......@@ -25,7 +25,7 @@ export default {
data() {
const _this = this
return {
swiperList: ['https://zws-imgs-pub.ezijing.com/static/public/097c7cf05ebd01ac34743c50fb0ed9f1.png'],
swiperList: ['https://zws-imgs-pub.ezijing.com/static/public/c3df881e988a4faed2a92fa9c5e358ad.jpg'],
swiperOptions: {
on: {
slideChangeTransitionStart: function() {
......
......@@ -6,6 +6,9 @@
<img src="https://zws-imgs-pub.ezijing.com/static/public/a2b3f14fbc0bdbba1d9d227c990575ab.png" alt="">
<div class="cursor" @click="goPage('https://vslc.ncb.edu.cn/child-orgInfo?orgCode=330220946', 1)"></div>
<div class="cursor2" @click="goPage('https://vslc.ncb.edu.cn/child-orgInfo?orgCode=330220946', 1)"></div>
<div class="btn1" @click="goPage('https://zws-imgs-pub.ezijing.com/static/public/c1c74b9c5bf6b2f51d7b5545a9a963ef.docx', 1)"></div>
<div class="btn2" @click="goPage('https://zws-imgs-pub.ezijing.com/static/public/3a959d34c5af16299d64841bf5ca542c.docx', 1)"></div>
<div class="btn3" @click="goPage('https://zws-imgs-pub.ezijing.com/static/public/7585d6fd4f13ce6551820ae272c12ca1.docx', 1)"></div>
</div>
<!-- <div class="p">
<span>考试报名对象:</span>
......@@ -170,6 +173,7 @@ export default {
.candida-box{
.module1{
padding-top: 37px;
position: relative;
.title{
font-size: 24px;
font-weight: bold;
......@@ -202,6 +206,33 @@ export default {
// background: rgba(0,0,0,0.3);
cursor: pointer;
}
.btn1{
position: absolute;
top: 250px;
left: 170px;
width: 70px;
height: 30px;
// background: rgba(0,0,0,0.3);
cursor: pointer;
}
.btn2{
position: absolute;
top: 285px;
left: 170px;
width: 70px;
height: 30px;
// background: rgba(0,0,0,0.3);
cursor: pointer;
}
.btn3{
position: absolute;
top: 325px;
left: 170px;
width: 70px;
height: 30px;
// background: rgba(0,0,0,0.3);
cursor: pointer;
}
}
.p{
font-size: 18px;
......
......@@ -100,7 +100,10 @@
<template v-if="index >= 0 && index <= 3">
<router-link :to="`/news/detail?id=${item.id}&type=home&tabs=${newsTabIndex}`" :key="index">
<li>
<div class="text">{{ item.title }}</div>
<div class="text">
<div class="p">{{ item.title }}</div>
<div class="time">{{ item.created_at.substring(item.created_at.indexOf(' '), 0) }}</div>
</div>
</li>
</router-link>
</template>
......@@ -116,7 +119,7 @@
<div class="text cen" @click="goNewsPage">更多通知</div>
</li>
</ul>
<div class="slide-box" v-if="swiperList.length">
<!-- <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`">
......@@ -130,11 +133,11 @@
<span v-for="(item, index) in swiperList" :key="index" :class="index == swiperIndex && 'active'"></span>
</div>
</div>
</div>
</div> -->
</div>
</div>
<div class="advert-box">
<poster/>
<poster v-if="false"/>
<!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/3dceecce8df0a6dcb06d48c75ada807b.png" alt=""> -->
</div>
<div class="service-box content-max-width">
......@@ -144,8 +147,9 @@
<ul>
<template v-for="(item, index) in serviceList">
<li :key="index" @click="goPage(item.path, item.pathType)">
<img :src="item.img" alt="">
<img :src="item.img" alt="" class="bg">
<div class="mask">
<img :src="item.icon" alt="" class="icon">
<div class="content-box">
<span class="tit">{{ item.title }}</span>
<div class="desc">{{ item.desc }}</div>
......@@ -183,31 +187,35 @@ export default {
newsTabIndex: 0,
serviceList: [
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/5ee4fac97e8f2620d41eaed01900cca5.png',
img: 'https://zws-imgs-pub.ezijing.com/static/public/6b24bc351bcc28b48e2d86bc92f81eab.jpg',
title: '教材中心',
desc: '本系列教材紧跟金融各行业数字化转型和职业教育的人才培养发展的需求,随行业的数字化转型、数字化营销工具和专业升级等情况及时动态更新。......',
path: '/service?id=0'
path: '/service?id=0',
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6f65b37439085217a8ff5f67038821a1.png'
},
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/353c19e26fc2eb0e83c72a7b85ad1475.png',
img: 'https://zws-imgs-pub.ezijing.com/static/public/90cf23d58250bc4959d3e5be66b7c5d1.jpg',
title: '教学资源(老师)',
desc: '',
path: 'https://login.ezijing.com/xlearn/register',
pathType: 1
pathType: 1,
icon: 'https://zws-imgs-pub.ezijing.com/static/public/88a2da98b62ff7426cd0b6a383091f15.png'
},
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/4d5d5ae6f7dd6ffe43c36651e479f4e1.png',
img: 'https://zws-imgs-pub.ezijing.com/static/public/2855f686addf67862a67fc8e4171a5d3.jpg',
title: '课程学习(学生)',
desc: '',
path: 'https://login.ezijing.com/xlearn/register',
pathType: 1
pathType: 1,
icon: 'https://zws-imgs-pub.ezijing.com/static/public/c1c08807bb48275835778286b6482d04.png'
},
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/4ca147e0e490b3c6ada62a831c11e375.png',
img: 'https://zws-imgs-pub.ezijing.com/static/public/c178ccc3e41728ef24037b69e64a892a.jpg',
title: '实操学习',
desc: '',
path: 'http://xtraining.ezijing.com/',
pathType: 1
pathType: 1,
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6d6772401687fe44c41bc5832b34ec9e.png'
}
],
examineeNav: [
......@@ -588,7 +596,7 @@ export default {
display: flex;
margin-top: 16px;
.assist-list{
width: 470px;
width: 100%;
background: #FFFFFF;
border-radius: 4px;
a{
......@@ -603,6 +611,7 @@ export default {
// }
}
li{
padding: 0 20px;
&:hover{
background: #A81A42;
border-radius: 4px;
......@@ -615,14 +624,21 @@ export default {
border: none;
}
.text{
width: 423px;
margin: 0 auto;
display: flex;
.p{
width: 800px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.time{
margin-left: auto;
}
// width: 423px;
// margin: 0 auto;
height: 55px;
border-bottom: 1px solid #eee;
line-height: 55px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 18px;
color: #444444;
&.cen{
......@@ -706,12 +722,27 @@ export default {
width: 300px;
height: 400px;
position: relative;
.icon{
position: absolute;
top: 66px;
left: 50%;
-webkit-transform: translateX(-50%);
}
.bg{
width: 100%;
height: 100%;
display: block;
}
// transition: all .5s;
&:hover{
.mask{
background: rgba(168,26,66,0.5);
.content-box{
bottom: 20px;
.tit{
color: #fff;
border-bottom: 1px solid #fff;
}
.desc{
display: block;
}
......@@ -729,7 +760,7 @@ export default {
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
// background: rgba(0,0,0,0.5);
.content-box{
position: absolute;
left: 16px;
......@@ -738,9 +769,9 @@ export default {
width: auto;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
color: rgba(175, 28, 64, 1);
line-height: 25px;
border-bottom: 1px solid #fff;
border-bottom: 1px solid rgba(175, 28, 64, 1);
}
.desc{
width: 212px;
......
<template>
<div class="home-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">
<template v-if="item.pathType === 3">
<li :key="index" @click="register">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">
<span class="span1">{{ item.text }}</span>
<span class="span2">{{ item.textActive }}</span>
</div>
</li>
</template>
<template v-else>
<li :key="index" @click="goPage(item.path, item.pathType)">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">
<span class="span1">{{ item.text }}</span>
<span class="span2">{{ item.textActive }}</span>
</div>
</li>
</template>
</template>
</template>
<template v-if="offsetTabIndex == 1">
<template v-for="(item, index) in teacherNav">
<template v-if="item.pathType === 3">
<li :key="index" @click="register">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">
<span class="span1">{{ item.text }}</span>
<span class="span2">{{ item.textActive }}</span>
</div>
</li>
</template>
<template v-else>
<li :key="index" @click="goPage(item.path, item.pathType)">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">
<span class="span1">{{ item.text }}</span>
<span class="span2">{{ item.textActive }}</span>
</div>
</li>
</template>
</template>
</template>
<template v-if="offsetTabIndex == 2">
<template v-for="(item, index) in schoolNav">
<template v-if="item.pathType === 3">
<li :key="index" @click="register">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">
<span class="span1">{{ item.text }}</span>
<span class="span2">{{ item.textActive }}</span>
</div>
</li>
</template>
<template v-else>
<li :key="index" @click="goPage(item.path, item.pathType)">
<img :src="item.icon" alt="" class="img">
<img :src="item.iconActive" alt="" class="img-active">
<div class="text">
<span class="span1">{{ item.text }}</span>
<span class="span2">{{ item.textActive }}</span>
</div>
</li>
</template>
</template>
</template>
</ul>
</div>
</div>
<div class="notice-box content-max-width">
<div class="tab-btn">
<div class="title">通知公告</div>
<div :class="newsTabIndex == 0 ? 'btn active' : 'btn'" @click="newsTab(0)">通知公告</div>
<div :class="newsTabIndex == 1 ? 'btn active' : 'btn'" @click="newsTab(1)">工作动态</div>
</div>
<div class="notice-mian">
<ul class="assist-list">
<template v-for="(item, index) in list">
<template v-if="index >= 0 && index <= 3">
<router-link :to="`/news/detail?id=${item.id}&type=home&tabs=${newsTabIndex}`" :key="index">
<li>
<div class="text">{{ item.title }}</div>
</li>
</router-link>
</template>
<!-- <template v-if="list > 4">
<router-link :to="`/news/detail?id=${item.id}&type=home&tabs=${newsTabIndex}`" :key="index">
<li>
<div class="text">{{ item.title }}</div>
</li>
</router-link>
</template> -->
</template>
<li class="border-none">
<div class="text cen" @click="goNewsPage">更多通知</div>
</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 class="advert-box">
<poster v-if="false"/>
<!-- <img src="https://zws-imgs-pub.ezijing.com/static/public/3dceecce8df0a6dcb06d48c75ada807b.png" alt=""> -->
</div>
<div class="service-box content-max-width">
<div class="title">
教·学服务
</div>
<ul>
<template v-for="(item, index) in serviceList">
<li :key="index" @click="goPage(item.path, item.pathType)">
<img :src="item.img" alt="" class="bg">
<div class="mask">
<img :src="item.icon" alt="" class="icon">
<div class="content-box">
<span class="tit">{{ item.title }}</span>
<div class="desc">{{ item.desc }}</div>
<div class="more">查看更多 ></div>
</div>
</div>
</li>
</template>
</ul>
</div>
</div>
</template>
<script>
import action from '@action'
import haedBanner from '@/components/headBanner'
import poster from '@/components/poster'
import { swiper, swiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
components: {
swiper,
swiperSlide,
haedBanner,
poster
},
directives: {
swiper: directive
},
data() {
const _this = this
return {
articleClassify: this.$store.state.classify,
tabsIndex: 0,
newsTabIndex: 0,
serviceList: [
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/6b24bc351bcc28b48e2d86bc92f81eab.jpg',
title: '教材中心',
desc: '本系列教材紧跟金融各行业数字化转型和职业教育的人才培养发展的需求,随行业的数字化转型、数字化营销工具和专业升级等情况及时动态更新。......',
path: '/service?id=0',
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6f65b37439085217a8ff5f67038821a1.png'
},
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/90cf23d58250bc4959d3e5be66b7c5d1.jpg',
title: '教学资源(老师)',
desc: '',
path: 'https://login.ezijing.com/xlearn/register',
pathType: 1,
icon: 'https://zws-imgs-pub.ezijing.com/static/public/88a2da98b62ff7426cd0b6a383091f15.png'
},
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/2855f686addf67862a67fc8e4171a5d3.jpg',
title: '课程学习(学生)',
desc: '',
path: 'https://login.ezijing.com/xlearn/register',
pathType: 1,
icon: 'https://zws-imgs-pub.ezijing.com/static/public/c1c08807bb48275835778286b6482d04.png'
},
{
img: 'https://zws-imgs-pub.ezijing.com/static/public/c178ccc3e41728ef24037b69e64a892a.jpg',
title: '实操学习',
desc: '',
path: 'http://xtraining.ezijing.com/',
pathType: 1,
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6d6772401687fe44c41bc5832b34ec9e.png'
}
],
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',
pathType: 3,
textActive: '注册后方可报名'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/5c7db419e6af3214fa53b1d4920cf7b5.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/76256d877bd6787af42d2f6010108a8b.png',
text: '考生报名',
path: '/hall?role=0',
textActive: '可选择学校统一报名或在对应的考点报名'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/b5a6b0bf40f24545fd10cbf315e5839c.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/556e2554d2545d3d3a726dbcbaf20494.png',
text: '学习课程',
path: '/hall?role=0&point=1',
textActive: '进入学习系统学习'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/9c4d618281f12680a367d212545cf041.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/53dd24cbf9c4c1a6ed078ab3b6049e95.png',
text: '参加考试',
path: '/hall?role=0&point=2',
textActive: '考点和考场安排,准考证打印领取时间'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/6bf9fedcbff1d13de413667b33787db3.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3639914b6dbe79d4b2e745159fd49230.png',
text: '成绩查询',
path: '/hall?role=0&point=3',
textActive: '进入成绩查询系统'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/1e6d8f785a106b17eb698d1d563ff479.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/e3088887b1e2fc9711c7ad692e2e53cd.png',
text: '证书查询',
path: '/hall?role=0&point=4',
textActive: '进入证书查询系统'
}
],
teacherNav: [
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/2da6e70cac93900bdb1867458c9b7449.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/c92aa5f2800a9a5bbedce54bfa0d499b.png',
text: '注册账号',
path: '/register',
pathType: 3,
textActive: '注册后方可报名'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/284f07548eb240cc384a102f1b7efdda.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/0c9823481d85f209b4a498945f31ea83.png',
text: '师资培训报名',
path: '/hall?role=1',
textActive: '提交报名资料,等待审核通知和培训通知'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/b278993ee5c29349ff83d1d9b4b596c9.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8d24a5c20a8ab87d26db73ccfacd2fba.png',
text: '辅助老师学习',
path: '/hall?role=1&point=t1',
textActive: '提供师资培训资料,辅助老师学习'
},
// {
// icon: 'https://zws-imgs-pub.ezijing.com/static/public/6f9583c270a3302a352ae9bbba64099d.png',
// iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/8a16c6cd1dc986075a002fe314f21d0d.png',
// text: '参加考试',
// path: '/hall?role=1&point=t1',
// textActive: '培训后参加统一考试'
// },
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/06f7b0220ab6d8d9d34f6d68258f2669.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/130affba0b6cefd278c31ddfab74acfc.png',
text: '查看证书授予',
path: '/hall?role=1&point=t2',
textActive: '授予培训资格证书老师名单'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/70c3defef24fd1438ada43b3e1ccff87.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/fe6b2d4c31d7f6369468c675d5876671.png',
text: '开班授课',
path: '/hall?role=1&point=t3',
textActive: '进入学习平台'
}
],
schoolNav: [
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/00e366f3cc15ab30c1fd285d10989bed.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/66dd597f670a07584897d03a4c6bd9ab.png',
text: '注册账号',
path: '/register',
pathType: 3,
textActive: '注册后方可申报'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/1dc324792168ee1e6a07b5975e6e3d8b.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/02e1e75b3aed4a92f3038589091be1f2.png',
text: '试点申报',
path: '/hall?role=2',
textActive: '提交报名资料,等待审核通知'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/17e3d75022ee88d4661bff4ca61f0966.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/073a7d9317d0ff8d8876c4ce53d15bc2.png',
text: '考点申报',
path: '/hall?role=2&point=s1',
textActive: '提交资料,等待审核通知'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/ea6a2917391444208d9084c3205227b2.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/55065b21e5ba9bc735a3d3527f07af79.png',
text: '集中报名师训',
path: '/hall?role=2&point=s2',
textActive: '给老师分配帐号进入学习系统学习和线下统一培训'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/cc4885f2f4b6f566954cdb15381916f8.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/901044f1465a5497fef8135f9e2ce4ff.png',
text: '统一实施教学',
path: '/hall?role=2&point=s3',
textActive: '发通知组织统一上课'
},
{
icon: 'https://zws-imgs-pub.ezijing.com/static/public/1505fd4535d858b4939e46f2534bfcaf.png',
iconActive: 'https://zws-imgs-pub.ezijing.com/static/public/3c3d204e15a400a7f74b4a9dad44cd55.png',
text: '批量报名考试',
path: '/hall?role=2&point=s4',
textActive: '统计学员后统一报名'
}
],
offsetBtn: ['我是考生', '我是老师', '我是学校'],
swiperList: [
{
url: 'https://zws-imgs-pub.ezijing.com/static/public/5436086a25645f903303b4b9013a6a2d.png',
content: '关于1+X金融数字化营销证书考核站点申报'
}
],
swiperOptions: {
on: {
slideChangeTransitionStart: function() {
_this.swiperIndex = this.activeIndex
}
},
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
// loop:true,
autoplay: {
delay: 2000,
disableOnInteraction: false
}
},
swiperIndex: 0,
videoShow: false,
list: [],
offsetTabIndex: 0
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
},
passport() {
return this.$refs.passport
}
},
mounted() {
if (this.$route.query.type) {
this.offsetTabIndex = this.$route.query.type
}
this.newsList()
},
methods: {
register() {
this.$router.push({
path: '/index',
query: {
register: this.$route.query.register ? this.$route.query.register++ : 1
}
})
},
goNewsPage() {
this.passport.register()
},
newsTab(n) {
this.newsTabIndex = n
this.newsList()
},
offsetTab(n) {
this.$router.push({
path: '/index',
query: {
type: n
}
})
this.offsetTabIndex = n
},
tabs(n) {
this.tabsIndex = n
},
goPage(path, n) {
if (n) {
window.open(path)
} else {
this.$router.push({
path: path
})
}
},
newsList() {
// const loading = this.$loading({
// lock: true,
// text: 'Loading',
// spinner: 'el-icon-loading',
// background: 'rgba(0, 0, 0, 0.7)'//
// })
if (!Object.keys(this.$store.state.classify).length) {
setTimeout(() => {
this.articleClassify = this.$store.state.classify
this.newsList()
}, 2000)
} else {
const findId = this.articleClassify[0].children.find(item => {
return item.display_name === (this.newsTabIndex ? '工作动态' : '新闻动态')
})
action.articleAction.getArticle({ category_id: findId ? findId.id : 23 }).then(res => {
this.list = res.data.list
this.swiperList = []
res.data.list.map((item, index) => {
if (index <= 4) {
this.swiperList.push({
url: item.cover_pc_url,
content: item.title,
id: item.id
})
console.log(this.swiperList)
}
})
// loading.close()
})
}
}
}
}
</script>
<style lang="scss" scoped>
.content-max-width{
width: 1200px;
margin: 0 auto;
}
.home-box{
background: #F8F8F8;
.home-head{
img{
width: 100%;
display: block;
// height: 240px;
}
}
.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;
margin: 43px auto 15px auto;
}
.img-active{
display: block;
}
.text{
color: #fff;
.span1{
display: none;
}
.span2{
display: block;
}
}
}
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: 18px;
.span2{
display: none;
}
.span1{
display: block;
}
}
}
}
}
.notice-box{
padding-top: 39px;
.tab-btn{
display: flex;
.title{
font-size: 24px;
font-weight: bold;
color: #444444;
line-height: 33px;
margin-right: 23px;
}
.btn{
cursor: pointer;
width: 96px;
height: 40px;
background: none;
border-radius: 23px;
text-align: center;
line-height: 40px;
color: #444;
text-align: center;
&.active{
color: #fff;
background: #A81A42;
}
}
}
.notice-mian{
display: flex;
margin-top: 16px;
.assist-list{
width: 470px;
background: #FFFFFF;
border-radius: 4px;
a{
// &:nth-child(1){
// li{
// background: #A81A42;
// border-radius: 4px;
// .text{
// color: #fff;
// }
// }
// }
}
li{
&:hover{
background: #A81A42;
border-radius: 4px;
.text{
color: #fff;
}
}
cursor: pointer;
&.border-none{
border: none;
}
.text{
width: 423px;
margin: 0 auto;
height: 55px;
border-bottom: 1px solid #eee;
line-height: 55px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
font-size: 18px;
color: #444444;
&.cen{
text-align: center;
}
}
}
}
.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;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 44px;
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;
padding-right: 40px;
span{
width: 8px;
height: 8px;
background: #000000;
opacity: 0.2;
border-radius: 50%;
margin-left: 8px;
&.active{
opacity: 1;
background: #fff;
}
}
}
}
}
}
.advert-box{
width: 1200px;
margin: 36px auto;
img{
width: 1200px;
display: block;
}
}
.service-box{
margin-bottom: 36px;
.title{
font-size: 24px;
font-weight: bold;
color: #444444;
line-height: 33px;
}
ul{
margin-top: 16px;
display: flex;
li{
width: 300px;
height: 400px;
position: relative;
.icon{
position: absolute;
top: 66px;
left: 50%;
-webkit-transform: translateX(-50%);
}
.bg{
width: 100%;
height: 100%;
display: block;
}
// transition: all .5s;
&:hover{
.mask{
background: rgba(168,26,66,0.5);
.content-box{
bottom: 20px;
.tit{
color: #fff;
border-bottom: 1px solid #fff;
}
.desc{
display: block;
}
.more{
display: block;
cursor: pointer;
}
}
}
}
.mask{
transition: all .5s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// background: rgba(0,0,0,0.5);
.content-box{
position: absolute;
left: 16px;
bottom: 55px;
.tit{
width: auto;
font-size: 18px;
font-weight: bold;
color: rgba(175, 28, 64, 1);
line-height: 25px;
border-bottom: 1px solid rgba(175, 28, 64, 1);
}
.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;
}
}
}
}
}
}
}
</style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论