13 changed files with 219 additions and 14 deletions
@ -0,0 +1,174 @@ |
|||
<template> |
|||
<div style="background-color: #121212;"> |
|||
<!-- <secondary-nav /> --> |
|||
<!-- 二级导航公用的，样式不要乱改 --> |
|||
<!-- 列表 --> |
|||
<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' }" 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" style="margin-top: 20px;"> |
|||
<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"> |
|||
<div class="banner"> |
|||
<!-- <img src="http://iph.href.lu/260x150" alt /> --> |
|||
<img :src="item.full_cover" alt /> |
|||
</div> |
|||
<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> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import College from "@/api/college"; |
|||
|
|||
export default { |
|||
data() { |
|||
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') |
|||
case 'strategy': |
|||
return this.$t('college.TradingStrategy') |
|||
case 'research': |
|||
return this.$t('college.industryResearch') |
|||
case 'dictionary': |
|||
return this.$t('college.dictionary') |
|||
case 'report': |
|||
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') |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
getArticleList() { |
|||
College.getArticleList(this.cid).then(data => { |
|||
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() { |
|||
this.cid = this.$route.params.cid; |
|||
this.getArticleList(); |
|||
} |
|||
}, |
|||
created() { |
|||
this.getCollegeLinks(); |
|||
this.getArticleList(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<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> |
|||
Loading…
Reference in new issue