|
|
|
@ -1,15 +1,23 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<secondary-nav /> |
|
|
|
<!-- 导航的公用的，样式不要乱改 --> |
|
|
|
<div style="background-color: #121212;"> |
|
|
|
<!-- <secondary-nav /> --> |
|
|
|
<!-- 二级导航公用的，样式不要乱改 --> |
|
|
|
<!-- 列表 --> |
|
|
|
<div class="container course-list"> |
|
|
|
<div class="row mt-3"> |
|
|
|
<div class="container course-list" style="width: 1320px !important;max-width:none;padding: 10px 0px;"> |
|
|
|
<div class="row"> |
|
|
|
<div class="col-12"> |
|
|
|
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|
|
|
<el-breadcrumb-item :to="{ path: '/college' }">{{$t('college.college')}}</el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item :to="{ path: `/college/list/${cid}`}">{{title}}</el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item :to="{ path: '/college' }" class="fn-18">{{$t('college.college')}}</el-breadcrumb-item> |
|
|
|
<el-breadcrumb-item :to="{ path: `/college/list/${cid}`}" class="fn-18" style="color: #fff;">{{title}}</el-breadcrumb-item> |
|
|
|
</el-breadcrumb> |
|
|
|
|
|
|
|
<!-- 新二级导航 --> |
|
|
|
<ul class="SecondaryNavUl"> |
|
|
|
<li class="SecondaryNavList" v-for="(item,index) in itemList" :key="index"> |
|
|
|
<router-link :to="item.url" active-class="SecondaryNavActive">{{item.label}}</router-link> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<div class="title h3 my-4">{{title}}</div> |
|
|
|
<div class="row justify-content-between"> |
|
|
|
<router-link :to="`/college/detail/${cid}/${item.id}`" class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="(item,index) in articleList" :key="index"> |
|
|
|
@ -20,6 +28,8 @@ |
|
|
|
<div class="txt"> |
|
|
|
{{item.title}} |
|
|
|
</div> |
|
|
|
<div class="txt2" v-html="item.body"></div> |
|
|
|
<div class="txt2">{{item.updated_at}}</div> |
|
|
|
</router-link> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -36,11 +46,13 @@ export default { |
|
|
|
return { |
|
|
|
cid: this.$route.params.cid, |
|
|
|
articleList: [], |
|
|
|
itemList: [],// 二级导航 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
title() { |
|
|
|
let key = this.cid; |
|
|
|
console.log(this.cid, 'this.cid') |
|
|
|
switch (key) { |
|
|
|
case 'novice': |
|
|
|
return this.$t('college.noviceTutorial') |
|
|
|
@ -54,6 +66,14 @@ export default { |
|
|
|
return this.$t('college.media') |
|
|
|
case 'OkChain': |
|
|
|
return 'OkChain' |
|
|
|
case '18': |
|
|
|
return this.$t('common.noviceTutorial') |
|
|
|
case '21': |
|
|
|
return this.$t('college.TradingStrategy') |
|
|
|
case '22': |
|
|
|
return this.$t('college.industryResearch') |
|
|
|
case '32': |
|
|
|
return this.$t('home.news') |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -63,7 +83,18 @@ export default { |
|
|
|
this.articleList = data; |
|
|
|
|
|
|
|
}).catch(); |
|
|
|
} |
|
|
|
}, |
|
|
|
getCollegeLinks() { |
|
|
|
College.getCategoryList().then(list => { |
|
|
|
list.forEach(item => { |
|
|
|
this.itemList.push({ |
|
|
|
url : `/college/list/${item.id}`, |
|
|
|
label : item.name |
|
|
|
}) |
|
|
|
}) |
|
|
|
}).catch(err => {}); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
$route() { |
|
|
|
@ -72,10 +103,72 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getCollegeLinks(); |
|
|
|
this.getArticleList(); |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
<style scoped> |
|
|
|
.course-list .item .banner{ |
|
|
|
width: 310px; |
|
|
|
height: 164px; |
|
|
|
border-radius: 10px; |
|
|
|
margin-bottom: 35px; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.course-list .item .banner img{ |
|
|
|
width: 310px; |
|
|
|
height: 164px; |
|
|
|
} |
|
|
|
.course-list .item .txt{ |
|
|
|
padding: 0px 45px 0px 25px; |
|
|
|
font-size: 22px; |
|
|
|
color: #fff; |
|
|
|
margin-bottom: 18px; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
overflow: hidden; |
|
|
|
height: 66px; |
|
|
|
} |
|
|
|
.course-list .item .txt2{ |
|
|
|
padding: 0px 45px 0px 25px; |
|
|
|
font-size: 16px; |
|
|
|
color: #929292; |
|
|
|
margin-bottom: 18px; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.SecondaryNavUl{ |
|
|
|
display: flex; |
|
|
|
height: 72px; |
|
|
|
} |
|
|
|
.SecondaryNavUl .SecondaryNavList{ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-right: 60px; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.SecondaryNavUl .SecondaryNavList a{ |
|
|
|
color: #929292; |
|
|
|
font-size: 24px; |
|
|
|
} |
|
|
|
.SecondaryNavUl .SecondaryNavList .SecondaryNavActive { |
|
|
|
color: #fff !important; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.el-breadcrumb__item:last-child::v-deep .el-breadcrumb__inner::v-deep{ |
|
|
|
color: #fff !important; |
|
|
|
/* 写不进去，无效代码 */ |
|
|
|
} |
|
|
|
/deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner{ |
|
|
|
color: #fff !important; |
|
|
|
/* 写进去，有效代码 */ |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
