industrial-alliance-website/src/views/harvest/example.vue

<template>
    <div class="app-container">
        <div class="banner-box">
            <img class="banner-bg" :src="_getImage('联盟成果','top-banner.jpg')"/>
            <div class="banner-content">
                <p class="mytitle">{{noticeList.length>0? noticeList[0].title :''}}</p>
                <p class="description">{{noticeList.length>0? noticeList[0].description :''}}</p>
            </div>
        </div>
        <br><br><br>
        <span class="title">应用案例</span>
        <el-divider></el-divider>
        <div class="notice-list" v-for="(item,index) in noticeList" :key="index"  @click="showNoticeDetail(item)">
            <img :src="item.imgUrl ? item.imgUrl : require('../../assets/home/example-eg.png')" alt="" class="img-block">
            <div class="content-block">
                <p class="text-title"><span style="color:#01496E;"></span>{{item.title}}</p>
                <p class="text-content">{{item.description}}</p>
            </div>
            <span class="text-date">{{item.issueStartTime}}</span>
        </div>
        <el-pagination
            layout="prev, pager, next"
            :current-page.sync="currentPage"
            @current-change="handleCurrentChange"
            :page-size="10"
            :total="total">
        </el-pagination>
    </div>
</template>
<script>
import {getNoticeList} from "@/api/notice"
export default {
    name: "example",
    data() {
        return {
            noticeList:[],
            currentPage:1,
            total:0
        };
    },
    mounted() {
        this.initData()
    },
    methods:{
        initData(){
            let params = {
            "pageNum": this.currentPage,
            "pageSize": 10,
            "search": {
                "type": "YYAL"
            },
            "sort": ""
            }
            getNoticeList(params).then(res => {
                this.noticeList = res.data.list
                this.total = res.data.count
            })
        },
        showNoticeDetail(item){
            this.$router.push({name:'noticeShow',query:{'id':item.id,'title':item.topicTypeText}})
        },
        //当前页变化
        handleCurrentChange(val) {
            this.currentPage = val
            this.initData()
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.banner-box {
    position: relative;
    width: 100%;
    height: 300px;
    padding: 70px;
    .banner-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .banner-content {
        position: relative;
        margin: 10px;
        color: #000;
        text-align: center;
        .mytitle {
            font-size: 28px;
            font-weight: 600;
            line-height: 60px;
        }
        .description {
            font-size: 16px;
            line-height: 30px;
        }
    }
}
.title {
    position: relative;
    color: #1e50ae;
    font-size: 18px;
    padding: 0 10px;
    font-weight: bold;
    font-family: 微软雅黑;
    &::before {
        content: " ";
        position: absolute;
        left: 0;
        bottom: -25px;
        width: 100%;
        height: 4px;
        background: #1e50ae;
    }
}
.notice-list {
    position: relative;
    background-color: rgba(255,255,255,0);
    cursor: pointer;
    color: #999999;
    font-family:PingFang SC;
    border-bottom: 1px dotted #dcdcdc;
    margin: 0 30px;
    .img-block {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 120px;
        height: 100px;
        padding: 5px;
    }
    .content-block {
        position: relative;
        display: inline-block;
        width: calc(100% - 200px);
        height: 100px;
        padding: 0 15px;
    }
    .text-date {
        text-align: center;
        font-size: 14px;
        vertical-align: super;
    }
    .text-title {
        font-size: 16px;
        margin: 6px 0;
        font-weight:600;
        color: #666666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .text-content {
        font-size: 14px;
        overflow: hidden;
        display: -webkit-box; 
        -webkit-line-clamp:2; 
        -webkit-box-orient: vertical;
    }
    &:hover {
        .text-title {
            color: #3893c7;
        }
    }
}
</style>