jiaoyi_xtzcoins_web/src/views/college/list.vue

<template>
<div class="list-page">
    <div class="banner">
        <div class="content">
            <div style="flex:1;margin-right: 40px;">
                <h2>{{ $t("ybgcoins3.a58") }}</h2>
                <div class="mt-3 mb-4">{{ $t("ybgcoins3.a59") }}</div>
                <!-- <div style="display: inline-block;
                    padding: 10px 20px;
                    color: #000;
                    background: #F7D558;
                    border-radius: 6px;"
                >活动规则</div> -->
            </div>
            <div>
                <img src="../../../static/images/binance-earn.png" alt="" width="420">
                <div style="text-align: right;margin-top: 10px;">{{ $t("ybgcoins3.a60") }}</div>
            </div>
        </div>
    </div>
    <!-- <secondary-nav /> -->
    <div class="main-box">
        <div class="nav-line">
            <div class="nav-block">
                <el-select v-model="value" placeholder="请选择" @change="routerLink">
                    <el-option
                    v-for="item in itemList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <!-- 列表 -->
        <div class="container course-list">
            <div class="row mb-5" v-for="(item,index) in articleList" :key="index">
                <div class="col-12 d-flex">
                    <div class="">
                        <router-link :to="`/college/detail/${cid}/${item.id}`" class="item">
                            <img :src="item.full_cover" alt width="360" />
                        </router-link>
                    </div>
                    <div style="flex:1;">
                        <router-link :to="`/college/detail/${cid}/${item.id}`" class="item">
                            <div class="title mb-3">
                                {{item.title}}
                            </div>
                            <p class="excerpt">{{ item.excerpt }}</p>
                            <div class="start-btn mt-1">开始学习</div>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import College from "@/api/college";

export default {
    data() {
        return {
            cid: this.$route.params.cid,
            articleList: [],
            itemList: [],
            value: this.$t("ybgcoins3.a61")
        }
    },
    computed: {
        title() {
            let key = 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'
            }
        }
    },
    methods: {
        getArticleList() {
            College.getArticleList(this.cid).then(data => {
                this.articleList = data;
                console.log(this.articleList)
            }).catch();
        },
        getCollegeLinks() {
            College.getCategoryList().then(list => {
                list.forEach(item => {
                    this.itemList.push({
                        url : `/college/list/${item.id}`,
                        label : item.name,
                        value : item.name
                    })
                })
            }).catch(err => {});
           
        },
        routerLink(e){
            console.log(e);
            for(let i=0;i<this.itemList.length;i++){
                if(this.itemList[i].label==e){
                    this.$router.push(this.itemList[i].url);
                }
            }
            
        }
    },
    watch: {
        $route() {
            this.cid = this.$route.params.cid;
            this.getArticleList();
        }
    },
    created() {
        this.getArticleList();
        this.getCollegeLinks();
    },
};
</script>

<style lang="scss" scoped>
.list-page{
    background-color: #fff;
}
.banner{
    width: 100%;
    height: 500px;
    background-color: #2C3138;
    padding: 30px 0px;

    .content{
        width: 960px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
.main-box{
    width: 960px;
    margin: -120px auto 0;
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
}
.nav-line{
    padding: 25px;
    .nav-block{
        width: 200px;
        float: right;
    }
}
.course-list{
    padding: 50px 20px;
    .item{
        img{
            border-radius: 10px;
            overflow: hidden;
            margin-right: 30px;
        }
    }
    .title{
        font-size: 26px;
        font-weight: bold;
        color: #000;
    }
    .excerpt{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;//设置显示多少行
        overflow: hidden;
    }
    .start-btn{
        display: inline-block;
        padding: 10px 20px;
        color: #000;
        background: #F7D558;
        border-radius: 6px;
    }
}
/deep/ .el-input__inner{
    color: #000;
    background-color: #fff;
    border-color: #d3d3d3;
}
</style>