提交 fb2665ec authored 作者: pengxiaohui's avatar pengxiaohui

官网修改

上级 8ee8f26f
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
{{ $t('viewMore') }} {{ $t('viewMore') }}
</div> </div>
</div> </div>
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart"> <div class="swiper-content">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
...@@ -21,6 +21,21 @@ ...@@ -21,6 +21,21 @@
<div class="swiper-pagination swiper-pagination-bullets"></div> <div class="swiper-pagination swiper-pagination-bullets"></div>
</div> </div>
</div> </div>
<div class="title-swiper">
<div v-swiper:secondSwiper="swiperOption1" ref="mySwiper1" @click="handleClick">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
{{item.title}}
</div>
</div>
</div>
<div class="swiper-btn swiper-button-prev">
<img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png">
</div>
<div class="swiper-btn swiper-button-next">
<img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png">
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -34,16 +49,31 @@ export default { ...@@ -34,16 +49,31 @@ export default {
listData: [], listData: [],
swiperOption: { swiperOption: {
speed: 400, speed: 400,
autoplay: true, autoplay: false,
delay: 3000, delay: 3000,
loop: true, loop: false,
pagination: { // pagination: {
el: '.swiper-pagination', // el: '.swiper-pagination',
clickable: true // clickable: true
}, // },
direction: 'vertical', // direction: 'vertical',
height: 500 height: 500
// autoHeight: true // autoHeight: true
},
swiperOption1: {
observer: true,
observeParents: true,
speed: 400,
autoplay: false,
delay: 3000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 20,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
} }
} }
}, },
...@@ -53,23 +83,28 @@ export default { ...@@ -53,23 +83,28 @@ export default {
type_tag: 'img_text_school' type_tag: 'img_text_school'
} }
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => { this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
// console.log(res.data.data)
return res.data.data return res.data.data
}) })
}, },
computed: { computed: {
swiper() { // swiper() {
return this.$refs.mySwiper.swiper; // return this.$refs.mySwiper.swiper;
} // }
}, },
mounted() { mounted() {
}, },
methods: { methods: {
swiperStop() { handleClick() {
this.swiper.autoplay.stop() const index = this.$refs.mySwiper1.swiper.clickedSlide.dataset.swiperSlideIndex
}, this.$refs.mySwiper.swiper.slideTo(index)
swiperStart() {
this.swiper.autoplay.start()
} }
// swiperStop() {
// this.swiper.autoplay.stop()
// },
// swiperStart() {
// this.swiper.autoplay.start()
// }
} }
} }
</script> </script>
...@@ -136,5 +171,40 @@ export default { ...@@ -136,5 +171,40 @@ export default {
} }
} }
} }
.title-swiper{
padding: 0 25px;
margin-top:5px;
position:relative;
// overflow: auto;
// width: 100%;
.swiper-slide{
position: relative;
width: 250px;
height: 58px;
margin-right:10px;
padding:7px 10px;
line-height:22px;
font-size:16px;
cursor: pointer;
}
.swiper-btn{
width:20px;
height:35px;
position:absolute;
left:-5px;
top:50%;
transform:translateY(-50%);
z-index:2;
img{
width:100%;
height:100%;
display:block;
}
}
.swiper-button-next{
left:unset;
right: -5px;
}
}
} }
</style> </style>
\ No newline at end of file
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div class="line"></div> <div class="line"></div>
<div class="text">{{ $t('home.case.title') }}</div> <div class="text">{{ $t('home.case.title') }}</div>
</div> </div>
<div class="right-text" @click="$router.push({ path: '/about/news', query: { type: 'service_case' } })"> <div class="right-text" @click="$router.push({ path: '/services/college', query: { type: '2' } })">
{{ $t('viewMore') }} {{ $t('viewMore') }}
</div> </div>
</div> </div>
...@@ -113,6 +113,7 @@ export default { ...@@ -113,6 +113,7 @@ export default {
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
height:600px;
display: block; display: block;
} }
.pop-txt-box { .pop-txt-box {
......
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
<el-input v-model="form.phone" placeholder="输入您的手机号"></el-input> <el-input v-model="form.phone" placeholder="输入您的手机号"></el-input>
</div> </div>
<div class="btn">立即提交</div> <div class="btn">立即提交</div>
<div class="tips">报名注册即将开通</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -148,11 +149,15 @@ export default { ...@@ -148,11 +149,15 @@ export default {
line-height: 32px; line-height: 32px;
color: #ffffff; color: #ffffff;
width: 281px; width: 281px;
background: #aa1941; background: #a9a9a9;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.tips{
color:#a9a9a9;
line-height:30px;
}
} }
} }
} }
......
<template>
<div class="swiper-content">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_01.png">
<p>
<span>{{isEn ? '金融财经类' : '金融财经类'}}</span>
</p>
</div>
<div class="swiper-slide">
<img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_02.png">
<p>
<span>{{isEn ? '数字化营销类' : '数字化营销类'}}</span>
</p>
</div>
<div class="swiper-slide">
<img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_03.png">
<p>
<span>{{isEn ? '新媒体运营类' : '新媒体运营类'}}</span>
</p>
</div>
<div class="swiper-slide">
<img src="https://webapp-pub.ezijing.com/www/pc/services/job/occupation_swipe_04.png">
<p>
<span>{{isEn ? '品牌运营类' : '品牌运营类'}}</span>
</p>
</div>
</div>
</div>
<div class="swiper-btn swiper-button-prev">
<img src="https://webapp-pub.ezijing.com/www/pc/swipe-prev-btn.png">
</div>
<div class="swiper-btn swiper-button-next">
<img src="https://webapp-pub.ezijing.com/www/pc/swipe-next-btn.png">
</div>
</div>
</template>
<script>
export default {
data() {
return {
swiperOption: {
// observer: true,
observeParents: true,
speed: 400,
autoplay: true,
delay: 3000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 20,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
}
}
}
}
</script>
<style lang="scss" scoped>
.swiper-content{
// padding: 0 25px;
margin-top:37px;
position:relative;
// overflow: auto;
// width: 100%;
.swiper-slide{
position: relative;
width: 176px;
height: 224px;
// margin-top: 10px;
p{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
background: rgba(51, 51, 51, 0.65);
box-sizing: border-box;
padding-top:92px;
font-size: 20px;
color: #FEFEFE;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
span{
display:block;
line-height: 40px;
font-size:16px;
}
}
img{
width: 100%;
}
}
.swiper-slide-active {
width: 176px;
height: 224px;
margin-top: 0;
img{
width: 100%;
height: 100%;
display: block;
}
}
.swiper-btn{
width:20px;
height:35px;
position:absolute;
left:-5px;
top:50%;
transform:translateY(-50%);
z-index:2;
display:none;
img{
width:100%;
height:100%;
display:block;
}
}
.swiper-button-next{
left:unset;
right: -5px;
}
}
</style>
\ No newline at end of file
...@@ -92,8 +92,8 @@ export default { ...@@ -92,8 +92,8 @@ export default {
}, },
college: { college: {
tit1: '核心能力', tit1: '核心能力',
tit2: '服务项目' tit2: '服务项目',
// tit3: '国际品牌管理<br />与数字运营' tit3: '服务案例'
} }
}, },
home: { home: {
...@@ -137,7 +137,7 @@ export default { ...@@ -137,7 +137,7 @@ export default {
college: '产业学院', college: '产业学院',
high: '实习就业', high: '实习就业',
online: '在线教育<br />解决方案', online: '在线教育<br />解决方案',
career: '新职业', career: '职业证书',
more: '更多' more: '更多'
}, },
bulletin: { bulletin: {
......
...@@ -21,14 +21,21 @@ ...@@ -21,14 +21,21 @@
<img <img
:src=" :src="
$cookies.get('lang') == 'en-US' $cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image3.png' ? 'https://webapp-pub.ezijing.com/www/pc/services/college/power_02.png'
: ' https://webapp-pub.ezijing.com/www/pc/industry/image3.png' : ' https://webapp-pub.ezijing.com/www/pc/services/college/power_02.png'
" "
/> />
<div> <div>
<p style="font-size: 18px;font-weight: 400;color: #000000;margin-bottom:20px"> <p style="font-size: 18px;font-weight: 400;color: #000000;margin-bottom:20px">
紫荆数字经济产业学院有以下主要特点 紫荆数字经济产业学院有以下主要特点
</p> </p>
<p style="font-size: 16px;font-weight: 400;color: #555;margin-bottom:20px">
依托清控紫荆教育长期所积累的专业化研发能力,科技研发能力以及国际化能力,我们对共建数字经济产业学院提出了“五个一流”的建设目标,力争和全国各类院校一起,从实际情况出发培养产业所急需的初、中、高等各级别专业化岗位人才。
</p>
<p style="font-size: 18px;font-weight: 400;color: #000000;margin-bottom:20px">
数字经济产业学院共建目标
</p>
<img src="https://webapp-pub.ezijing.com/www/pc/services/college/power_01.png" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image41.png" alt="" v-if="tabActive === 0" /> <img src="https://webapp-pub.ezijing.com/www/pc/industry/image41.png" alt="" v-if="tabActive === 0" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image42.png" alt="" v-if="tabActive === 1" /> <img src="https://webapp-pub.ezijing.com/www/pc/industry/image42.png" alt="" v-if="tabActive === 1" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image43.png" alt="" v-if="tabActive === 2" /> <img src="https://webapp-pub.ezijing.com/www/pc/industry/image43.png" alt="" v-if="tabActive === 2" />
...@@ -38,10 +45,9 @@ ...@@ -38,10 +45,9 @@
v-for="(item, index) in navList" v-for="(item, index) in navList"
:key="index" :key="index"
class="li" class="li"
@click="navActive(item, index)"
:class="{ active: index === tabActive }" :class="{ active: index === tabActive }"
> >
<img :src="item.img" alt="" style="width:43px;height:43px" /> <img :src="index === tabActive ? item.activeImg : item.img" alt="" style="width:43px;height:43px" />
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
</li> </li>
</ul> </ul>
...@@ -125,9 +131,9 @@ ...@@ -125,9 +131,9 @@
@click="tabsClick(item, index)" @click="tabsClick(item, index)"
:class="{ active: index === tabsActive }" :class="{ active: index === tabsActive }"
> >
<img :src="item.img" alt="" style="width:43px;height:43px" /> <img :src="index === tabsActive ? item.activeImg : item.img" alt="" style="width:43px;height:43px" />
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div style="color: #666666;font-size:14px;font-weight: 300">{{ item.dec }}</div> <p >{{ item.dec }}</p>
</li> </li>
</ul> </ul>
<div class="content-mian"> <div class="content-mian">
...@@ -370,66 +376,90 @@ export default { ...@@ -370,66 +376,90 @@ export default {
{ {
name: this.$t('menu.college.tit2') name: this.$t('menu.college.tit2')
// name: '数字金融' // name: '数字金融'
},
{
name: this.$t('menu.college.tit3')
// name: '服务案例'
} }
], ],
navList: [ navList: [
{ {
name: '需求强劲', name: '需求强劲',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image51.png' img: 'https://webapp-pub.ezijing.com/www/pc/industry/image51.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_01.png'
}, },
{ {
name: '瞄准痛点', name: '瞄准痛点',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image52.png' img: 'https://webapp-pub.ezijing.com/www/pc/industry/image52.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_02.png'
}, },
{ {
name: '闭环服务', name: '闭环服务',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image53.png' img: 'https://webapp-pub.ezijing.com/www/pc/industry/image53.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_03.png'
}, },
{ {
name: '长期共赢', name: '长期共赢',
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image54.png' img: 'https://webapp-pub.ezijing.com/www/pc/industry/image54.png',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/power_icon_04.png'
} }
], ],
tabsList: [ tabsList: [
{ {
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image81.png', img: 'https://webapp-pub.ezijing.com/www/pc/industry/image81.png',
name: '专业共建', name: '专业共建',
dec: '专业提升' dec: '专业提升',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_01.png'
}, },
{ {
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image82.png', img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image82.png',
name: 'SAAS软件平台', name: 'SAAS软件平台',
dec: '教学管理' dec: '教学管理',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_02.png'
}, },
{ {
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image83.png', img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image83.png',
name: '引产入校', name: '引产入校',
dec: '实训基地' dec: '实训基地',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_03.png'
}, },
{ {
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image84.png', img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/industry/image84.png',
name: '实习就业', name: '实习就业',
dec: '企业人力资源服务' dec: '企业人力资源服务',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_04.png'
}, },
{ {
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image85.png', img: 'https://webapp-pub.ezijing.com/www/pc/industry/image85.png',
name: '数字经济实验室', name: '数字经济实验室',
dec: '前沿案例' dec: '前沿案例',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_05.png'
}, },
{ {
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image86.png', img: 'https://webapp-pub.ezijing.com/www/pc/industry/image86.png',
name: '培训证书', name: '培训证书',
dec: '专业补充' dec: '专业补充',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_06.png'
} }
], ],
tabActive: 0, tabActive: 0,
tabsActive: 0, tabsActive: 0,
showModule: 0 showModule: 0,
count: 0
} }
}, },
created() { created() {
this.tabActive = 0 this.tabActive = 0
this.tabsActive = 0 this.tabsActive = 0
// const type = this.$route.query.type
// this.showModule = type ? parseInt(type) : 0
const timer = setInterval(() => {
this.count++
this.tabActive = this.count % 4
}, 3000)
this.$once('hook:beforeDestroy', () => {
clearInterval(timer)
})
}, },
methods: { methods: {
navActive(item, index) { navActive(item, index) {
...@@ -439,6 +469,9 @@ export default { ...@@ -439,6 +469,9 @@ export default {
this.tabsActive = index this.tabsActive = index
}, },
tabChangeIndex(n) { tabChangeIndex(n) {
if (n === 2) {
this.$router.push({ path: '/about/news', query: { type: 'service_case' } })
}
this.showModule = n this.showModule = n
} }
}, },
...@@ -622,7 +655,6 @@ export default { ...@@ -622,7 +655,6 @@ export default {
height: 146px; height: 146px;
opacity: 1; opacity: 1;
background: #f4f4f4; background: #f4f4f4;
cursor:pointer;
.name{ .name{
font-size: 16px; font-size: 16px;
color: #424242; color: #424242;
...@@ -630,10 +662,10 @@ export default { ...@@ -630,10 +662,10 @@ export default {
} }
} }
.active { .active {
background-color: #fff; background-color: #a81840;
border-bottom: 6px solid #a81840; border-bottom: 6px solid #a81840;
.name{ .name{
color:#a81840; color:#fff;
} }
} }
} }
...@@ -670,10 +702,13 @@ export default { ...@@ -670,10 +702,13 @@ export default {
} }
} }
.active { .active {
background: #ffffff; background: #a81840;
border-top: 6px solid #a81840; border-top: 6px solid #a81840;
.name{ .name{
color:#a81840; color:#fff;
}
p{
color:#fff;
} }
} }
} }
......
差异被折叠。
...@@ -503,19 +503,23 @@ ...@@ -503,19 +503,23 @@
<div class="module-title">{{isEn ? '专业分类' : '专业分类'}}</div> <div class="module-title">{{isEn ? '专业分类' : '专业分类'}}</div>
<div class="tabs"> <div class="tabs">
<div :class="{item: true, active: module6TabActive === 0}" @click="module6TabActive = 0"> <div :class="{item: true, active: module6TabActive === 0}" @click="module6TabActive = 0">
<img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1.png"> <img v-show="module6TabActive !== 0" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1.png">
<img v-show="module6TabActive === 0" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1_on.png">
<p>人工智能方向</p> <p>人工智能方向</p>
</div> </div>
<div :class="{item: true, active: module6TabActive === 1}" @click="module6TabActive = 1"> <div :class="{item: true, active: module6TabActive === 1}" @click="module6TabActive = 1">
<img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2.png"> <img v-show="module6TabActive !== 1" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2.png">
<img v-show="module6TabActive === 1" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2_on.png">
<p>数据技术方向</p> <p>数据技术方向</p>
</div> </div>
<div :class="{item: true, active: module6TabActive === 2}" @click="module6TabActive = 2"> <div :class="{item: true, active: module6TabActive === 2}" @click="module6TabActive = 2">
<img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3.png"> <img v-show="module6TabActive !== 2" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3.png">
<img v-show="module6TabActive === 2" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3_on.png">
<p>云计算方向</p> <p>云计算方向</p>
</div> </div>
<div :class="{item: true, active: module6TabActive === 3}" @click="module6TabActive = 3"> <div :class="{item: true, active: module6TabActive === 3}" @click="module6TabActive = 3">
<img src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4.png"> <img v-show="module6TabActive !== 3" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4.png">
<img v-show="module6TabActive === 3" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4_on.png">
<p>网络安全方向</p> <p>网络安全方向</p>
</div> </div>
</div> </div>
...@@ -1072,7 +1076,7 @@ export default { ...@@ -1072,7 +1076,7 @@ export default {
margin-bottom:20px; margin-bottom:20px;
} }
.swiper-content{ .swiper-content{
padding: 0 25px; // padding: 0 25px;
margin-top:37px; margin-top:37px;
position:relative; position:relative;
// overflow: auto; // overflow: auto;
...@@ -1244,8 +1248,8 @@ export default { ...@@ -1244,8 +1248,8 @@ export default {
} }
.item.active{ .item.active{
border-color:#aa1941; border-color:#aa1941;
background:#fff; background:#aa1941;
color:#aa1941; color:#fff;
} }
} }
.img-text{ .img-text{
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论