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