提交 05eb4791 authored 作者: pengxiaohui's avatar pengxiaohui

修改

上级 90eec3ae
<template>
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import appLink from '@/components/Link'
export default {
props: {
type: {
type: String,
default: 'article_news'
}
},
components: { appLink },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.type,
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
.pages-box{
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
}
</style>
...@@ -113,7 +113,7 @@ export default { ...@@ -113,7 +113,7 @@ export default {
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
height:600px; height:500px;
display: block; display: block;
} }
.pop-txt-box { .pop-txt-box {
......
...@@ -148,7 +148,7 @@ export default { ...@@ -148,7 +148,7 @@ export default {
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
color: #ffffff; color: #ffffff;
width: 281px; width: 260px;
background: #a9a9a9; background: #a9a9a9;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
...@@ -157,6 +157,7 @@ export default { ...@@ -157,6 +157,7 @@ export default {
.tips{ .tips{
color:#a9a9a9; color:#a9a9a9;
line-height:30px; line-height:30px;
text-align:center;
} }
} }
} }
......
<template> <template>
<div class="news-content"> <div class="news-content">
<tab /> <tab />
<div class="news-content-box"> <new-list :type="type"/>
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import appLink from '@/components/Link'
import tab from '@/components/about/tabNav' import tab from '@/components/about/tabNav'
import newList from '@/components/about/newList'
export default { export default {
components: { tab, appLink }, components: { tab, newList },
data() { data() {
return { return {
listData: [], listData: [],
...@@ -46,38 +17,12 @@ export default { ...@@ -46,38 +17,12 @@ export default {
limit: 10 limit: 10
} }
}, },
async fetch() { computed: {
const params = { type() {
project_id: process.env.projectId, return this.$route.query.type
type_tag: this.$route.query.type || 'article_news',
page: this.currentPaeg,
limit: 10
} }
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
}, },
methods: { methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
} }
} }
</script> </script>
...@@ -95,78 +40,4 @@ export default { ...@@ -95,78 +40,4 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
</style> </style>
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/about/tabNav'
export default {
components: { tab, appLink },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.pages-box{
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
</style>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="college-content"> <div class="college-content">
<div class="mian-title">{{ $t('menu.servicesChild.college') }}</div> <div class="mian-title">{{ $t('menu.servicesChild.college') }}</div>
<div class="mian"> <div class="mian">
<tab :data="tabList" @tabChangeIndex="tabChangeIndex" /> <tab :data="tabList" :defaultActive="defaultActive" @tabChangeIndex="tabChangeIndex" />
<div class="college-content-mian"> <div class="college-content-mian">
<template v-if="showModule === 0"> <template v-if="showModule === 0">
<div class="module-1 module-content-box"> <div class="module-1 module-content-box">
...@@ -36,10 +36,6 @@ ...@@ -36,10 +36,6 @@
数字经济产业学院共建目标 数字经济产业学院共建目标
</p> </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/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" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image44.png" alt="" v-if="tabActive === 3" />
<ul> <ul>
<li <li
v-for="(item, index) in navList" v-for="(item, index) in navList"
...@@ -51,6 +47,12 @@ ...@@ -51,6 +47,12 @@
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
</li> </li>
</ul> </ul>
<div class="img-content">
<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" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image44.png" alt="" v-if="tabActive === 3" />
</div>
<div v-if="tabActive === 0" class="part"> <div v-if="tabActive === 0" class="part">
<ul> <ul>
<li>数字经济人才国家战略</li> <li>数字经济人才国家战略</li>
...@@ -129,23 +131,25 @@ ...@@ -129,23 +131,25 @@
:key="index" :key="index"
class="li" class="li"
@click="tabsClick(item, index)" @click="tabsClick(item, index)"
:class="{ active: index === tabsActive }" @mouseenter="handleMsEnter(index)"
@mouseleave="handleMsLeave"
:class="{ active: index === tabsActive, isHover: index === hoverIndex }"
> >
<img :src="index === tabsActive ? item.activeImg : item.img" alt="" style="width:43px;height:43px" /> <img :src="index === tabsActive || index === hoverIndex ? item.activeImg : item.img" alt="" style="width:43px;height:43px" />
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<p >{{ item.dec }}</p> <p >{{ item.dec }}</p>
</li> </li>
</ul> </ul>
<div class="content-mian"> <div class="content-mian" style="padding-top:10px;">
<div class="con-img-box" v-if="tabsActive === 0"> <div class="con-img-box" v-if="tabsActive === 0">
<img <!-- <img
:src=" :src="
$cookies.get('lang') == 'en-US' $cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png' ? 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png' : 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png'
" "
alt="" alt=""
/> /> -->
<div style="position:relative;width:900px;height:262px;margin-bottom:60px"> <div style="position:relative;width:900px;height:262px;margin-bottom:60px">
<img <img
:src=" :src="
...@@ -356,15 +360,20 @@ ...@@ -356,15 +360,20 @@
</div> </div>
</div> </div>
</template> </template>
<template v-if="showModule === 2">
<new-list type="service_case" />
</template>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import tab from '../../components/services/tab' import tab from '../../components/services/tab'
import newList from '../../components/about/newList'
export default { export default {
components: { components: {
tab tab,
newList
}, },
data() { data() {
return { return {
...@@ -444,13 +453,19 @@ export default { ...@@ -444,13 +453,19 @@ export default {
], ],
tabActive: 0, tabActive: 0,
tabsActive: 0, tabsActive: 0,
defaultActive: 0,
showModule: 0, showModule: 0,
count: 0 count: 0,
hoverIndex: -1
} }
}, },
created() { created() {
this.tabActive = 0 this.tabActive = 0
this.tabsActive = 0 this.tabsActive = 0
if (this.$route.query.type) {
this.defaultActive = parseInt(this.$route.query.type)
this.showModule = parseInt(this.$route.query.type)
}
// const type = this.$route.query.type // const type = this.$route.query.type
// this.showModule = type ? parseInt(type) : 0 // this.showModule = type ? parseInt(type) : 0
const timer = setInterval(() => { const timer = setInterval(() => {
...@@ -469,10 +484,16 @@ export default { ...@@ -469,10 +484,16 @@ export default {
this.tabsActive = index this.tabsActive = index
}, },
tabChangeIndex(n) { tabChangeIndex(n) {
if (n === 2) { // if (n === 2) {
this.$router.push({ path: '/about/news', query: { type: 'service_case' } }) // this.$router.push({ path: '/about/news', query: { type: 'service_case' } })
} // }
this.showModule = n this.showModule = n
},
handleMsEnter(index) {
this.hoverIndex = index
},
handleMsLeave() {
this.hoverIndex = -1
} }
}, },
computed: { computed: {
...@@ -517,7 +538,7 @@ export default { ...@@ -517,7 +538,7 @@ export default {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
line-height: 28px; line-height: 28px;
color: #777777; color: #444;
opacity: 1; opacity: 1;
} }
...@@ -637,7 +658,7 @@ export default { ...@@ -637,7 +658,7 @@ export default {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin-bottom: 62px; margin-bottom: 32px;
// li { // li {
// // padding: 15px; // // padding: 15px;
// margin-left: 25px; // margin-left: 25px;
...@@ -669,7 +690,19 @@ export default { ...@@ -669,7 +690,19 @@ export default {
} }
} }
} }
.img-content{
height:280px;
position:relative;
overflow: hidden;
margin-bottom:30px;
img{
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:100%;
}
}
.part { .part {
li { li {
list-style-type: disc; list-style-type: disc;
...@@ -684,24 +717,28 @@ export default { ...@@ -684,24 +717,28 @@ export default {
.module-2 { .module-2 {
ul { ul {
display: flex; display: flex;
justify-content: center; justify-content: space-around;
align-items: center; align-items: center;
width:900px;
margin:0 auto;
.li { .li {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 151px; width: 130px;
height: 156px; height: 132px;
background: #f4f4f4; background: #f4f4f4;
cursor:pointer; cursor:pointer;
border-radius:4px;
transition:0.3s;
.name{ .name{
font-size: 16px; font-size: 16px;
color: #424242; color: #424242;
font-weight: 400; font-weight: 400;
} }
} }
.active { .active, .isHover {
background: #a81840; background: #a81840;
border-top: 6px solid #a81840; border-top: 6px solid #a81840;
.name{ .name{
...@@ -711,6 +748,9 @@ export default { ...@@ -711,6 +748,9 @@ export default {
color:#fff; color:#fff;
} }
} }
.isHover{
transform: translateY(-10px);
}
} }
.content-mian { .content-mian {
......
...@@ -162,8 +162,10 @@ ...@@ -162,8 +162,10 @@
? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png' ? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png'
: 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png' : 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png'
" "
style="margin-bottom:35px;" style="margin-bottom:20px;"
/> />
<div class="module-title" style="margin-bottom:15px;">{{isEn ? '注册报名' : '注册报名'}}</div>
<presence />
</div> </div>
</div> </div>
</template> </template>
......
...@@ -502,25 +502,9 @@ ...@@ -502,25 +502,9 @@
/> />
<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 === index, isHover: module6TabHoverIndex === index}" v-for="(item, index) in module6TabList" :key="index" @click="module6TabActive = index" @mouseenter="module6TabHoverIndex = index" @mouseleave="module6TabHoverIndex = -1">
<img v-show="module6TabActive !== 0" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1.png"> <img :src="module6TabActive === index || module6TabHoverIndex === index ? item.active_icon : item.icon">
<img v-show="module6TabActive === 0" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1_on.png"> <p>{{item.text}}</p>
<p>人工智能方向</p>
</div>
<div :class="{item: true, active: module6TabActive === 1}" @click="module6TabActive = 1">
<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 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 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>
</div> </div>
<div v-show="module6TabActive === 0"> <div v-show="module6TabActive === 0">
...@@ -1005,7 +989,30 @@ export default { ...@@ -1005,7 +989,30 @@ export default {
prevEl: '.swiper-button-prev', prevEl: '.swiper-button-prev',
} }
}, },
module6TabActive: 0 module6TabActive: 0,
module6TabHoverIndex: -1,
module6TabList: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1.png',
active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1_on.png',
text: '人工智能方向'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2.png',
active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2_on.png',
text: '数据技术方向'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3.png',
active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3_on.png',
text: '云计算方向'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4.png',
active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4_on.png',
text: '网络安全方向'
}
]
} }
}, },
created() { created() {
...@@ -1231,13 +1238,16 @@ export default { ...@@ -1231,13 +1238,16 @@ export default {
.tabs{ .tabs{
display:flex; display:flex;
.item{ .item{
width:150px; width:130px;
height:150px; height:130px;
background: #F4F4F4; background: #F4F4F4;
text-align:center; text-align:center;
box-sizing:border-box; box-sizing:border-box;
padding-top:30px; padding-top:30px;
border-top:6px solid #f4f4f4; border-top:6px solid #f4f4f4;
border-radius: 4px;
margin-right:20px;
transition:0.3s;
cursor:pointer; cursor:pointer;
img{ img{
width:42px; width:42px;
...@@ -1246,11 +1256,14 @@ export default { ...@@ -1246,11 +1256,14 @@ export default {
margin-bottom:16px; margin-bottom:16px;
} }
} }
.item.active{ .item.active, .item.isHover{
border-color:#aa1941; border-color:#aa1941;
background:#aa1941; background:#aa1941;
color:#fff; color:#fff;
} }
.item.isHover{
transform: translateY(-10px);
}
} }
.img-text{ .img-text{
position:relative; position:relative;
......
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论