Mrbcoin_pc/src/views/college/list.vue

<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" v-if="0">
                    <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" v-if="0">{{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">
                        <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-if="0" 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>