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

官网修改

上级 8ee8f26f
......@@ -9,7 +9,7 @@
{{ $t('viewMore') }}
</div>
</div>
<div class="swiper-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
<div class="swiper-content">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index">
......@@ -21,6 +21,21 @@
<div class="swiper-pagination swiper-pagination-bullets"></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>
</template>
<script>
......@@ -34,16 +49,31 @@ export default {
listData: [],
swiperOption: {
speed: 400,
autoplay: true,
autoplay: false,
delay: 3000,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
direction: 'vertical',
loop: false,
// pagination: {
// el: '.swiper-pagination',
// clickable: true
// },
// direction: 'vertical',
height: 500
// 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 {
type_tag: 'img_text_school'
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
// console.log(res.data.data)
return res.data.data
})
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
// swiper() {
// return this.$refs.mySwiper.swiper;
// }
},
mounted() {
},
methods: {
swiperStop() {
this.swiper.autoplay.stop()
},
swiperStart() {
this.swiper.autoplay.start()
handleClick() {
const index = this.$refs.mySwiper1.swiper.clickedSlide.dataset.swiperSlideIndex
this.$refs.mySwiper.swiper.slideTo(index)
}
// swiperStop() {
// this.swiper.autoplay.stop()
// },
// swiperStart() {
// this.swiper.autoplay.start()
// }
}
}
</script>
......@@ -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>
\ No newline at end of file
......@@ -5,7 +5,7 @@
<div class="line"></div>
<div class="text">{{ $t('home.case.title') }}</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') }}
</div>
</div>
......@@ -113,6 +113,7 @@ export default {
position: relative;
img {
width: 100%;
height:600px;
display: block;
}
.pop-txt-box {
......
......@@ -26,6 +26,7 @@
<el-input v-model="form.phone" placeholder="输入您的手机号"></el-input>
</div>
<div class="btn">立即提交</div>
<div class="tips">报名注册即将开通</div>
</div>
</div>
</div>
......@@ -148,11 +149,15 @@ export default {
line-height: 32px;
color: #ffffff;
width: 281px;
background: #aa1941;
background: #a9a9a9;
border-radius: 4px;
text-align: center;
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 {
},
college: {
tit1: '核心能力',
tit2: '服务项目'
// tit3: '国际品牌管理<br />与数字运营'
tit2: '服务项目',
tit3: '服务案例'
}
},
home: {
......@@ -137,7 +137,7 @@ export default {
college: '产业学院',
high: '实习就业',
online: '在线教育<br />解决方案',
career: '新职业',
career: '职业证书',
more: '更多'
},
bulletin: {
......
......@@ -21,14 +21,21 @@
<img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image3.png'
: ' 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/services/college/power_02.png'
"
/>
<div>
<p style="font-size: 18px;font-weight: 400;color: #000000;margin-bottom:20px">
紫荆数字经济产业学院有以下主要特点
</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/image42.png" alt="" v-if="tabActive === 1" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image43.png" alt="" v-if="tabActive === 2" />
......@@ -38,10 +45,9 @@
v-for="(item, index) in navList"
:key="index"
class="li"
@click="navActive(item, index)"
: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>
</li>
</ul>
......@@ -125,9 +131,9 @@
@click="tabsClick(item, index)"
: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 style="color: #666666;font-size:14px;font-weight: 300">{{ item.dec }}</div>
<p >{{ item.dec }}</p>
</li>
</ul>
<div class="content-mian">
......@@ -370,66 +376,90 @@ export default {
{
name: this.$t('menu.college.tit2')
// name: '数字金融'
},
{
name: this.$t('menu.college.tit3')
// name: '服务案例'
}
],
navList: [
{
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: '瞄准痛点',
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: '闭环服务',
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: '长期共赢',
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: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/industry/image81.png',
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',
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',
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',
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',
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',
name: '培训证书',
dec: '专业补充'
dec: '专业补充',
activeImg: 'https://webapp-pub.ezijing.com/www/pc/services/college/project_icon_06.png'
}
],
tabActive: 0,
tabsActive: 0,
showModule: 0
showModule: 0,
count: 0
}
},
created() {
this.tabActive = 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: {
navActive(item, index) {
......@@ -439,6 +469,9 @@ export default {
this.tabsActive = index
},
tabChangeIndex(n) {
if (n === 2) {
this.$router.push({ path: '/about/news', query: { type: 'service_case' } })
}
this.showModule = n
}
},
......@@ -622,7 +655,6 @@ export default {
height: 146px;
opacity: 1;
background: #f4f4f4;
cursor:pointer;
.name{
font-size: 16px;
color: #424242;
......@@ -630,10 +662,10 @@ export default {
}
}
.active {
background-color: #fff;
background-color: #a81840;
border-bottom: 6px solid #a81840;
.name{
color:#a81840;
color:#fff;
}
}
}
......@@ -670,10 +702,13 @@ export default {
}
}
.active {
background: #ffffff;
background: #a81840;
border-top: 6px solid #a81840;
.name{
color:#a81840;
color:#fff;
}
p{
color:#fff;
}
}
}
......
差异被折叠。
......@@ -503,19 +503,23 @@
<div class="module-title">{{isEn ? '专业分类' : '专业分类'}}</div>
<div class="tabs">
<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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
</div>
......@@ -1072,7 +1076,7 @@ export default {
margin-bottom:20px;
}
.swiper-content{
padding: 0 25px;
// padding: 0 25px;
margin-top:37px;
position:relative;
// overflow: auto;
......@@ -1244,8 +1248,8 @@ export default {
}
.item.active{
border-color:#aa1941;
background:#fff;
color:#aa1941;
background:#aa1941;
color:#fff;
}
}
.img-text{
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论