学生目录tag切换bug修改

zhongshujie

2025-04-08 92cd3be8a166e9d7c67f88518111670be8b9ec98

 src/views/honors/index.vue

@@ -1,16 +1,224 @@
<template>
    <div class="honors">
        <div>荣誉</div>
        <div></div>
        <div class="honors-title">
            <p>王永炎院士荣誉奖项</p>
        </div>
        <div class="honors-main">
            <div class="honors-main-box">
                <div class="honors-main-title">荣<br>誉<br>奖<br>项</div>
                <div class="honors-text">
                    <ul>
                        <li v-for="(item, index) in honorList" :key="index">
                            <img class="main-img" :src="item.imgSrc ? item.imgSrc : defaultImg" alt="">
                            <div>
                                <p class="main-time">{{ item.time }}</p>
                                <p class="main-text" :title="item.txt">{{ item.txt }}</p>
                            </div>
                        </li>
                    </ul>
                    <img class="honor-Bg" src="../../assets/images/honors/honor-Bg.png" alt="">
                    <!-- 分页 -->
                    <div class="pagination">
                        <el-pagination class="msg-pagination-container" :background="isBackground"
                            layout="prev, pager, next" :total="200">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
export default {
    data() {
        return {
            defaultImg: require("@/assets/images/honors/honorImg.png"),
            isBackground: true,
            honorList: [
                {
                    imgSrc: "",
                    time: "1986年11月",
                    txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖"
                },
                {
                    imgSrc: "",
                    time: "1986年11月",
                    txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖"
                },
                {
                    imgSrc: "",
                    time: "1986年11月",
                    txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖"
                },
                {
                    imgSrc: "",
                    time: "1986年11月",
                    txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖"
                },
                {
                    imgSrc: "",
                    time: "1986年11月",
                    txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖"
                },
                {
                    imgSrc: "",
                    time: "1986年11月",
                    txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖"
                },
                {
                    imgSrc: "",
                    time: "1986年11月",
                    txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖"
                },
                {
                    imgSrc: "",
                    time: "1986年11月",
                    txt: "1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖,1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖,1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖,1991年11月'清开灵注射液治疗中风病痰热证的临床与实验研究'获1991年度国家科技进步奖三等奖"
                },

            ]
        }
    }
};
</script>

<style>
    .honors{
        
<style lang="less" scoped>
.honors {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.honors-title {
    height: 102px;
    width: 100%;
    text-align: left;
    margin-bottom: 41px;
    border-bottom: 2px solid #937950;
    p{
        padding: 35px 0 34px 0;
        font-family: Alimama DongFangDaKai;
        font-size: 30px;
        text-indent: 1em;
        border-bottom: 1px solid #937950;
    }
}

.honors-main {
    width: 1330px;
    margin: 0 auto;
}

.honors-main-box {
    display: flex;
    justify-content: center;
    padding: 32px 0px 135px 53px;
    border: 1px solid #E4DACE;
    background: rgba(255, 253, 248, 0.9);
}

.honors-main-title {
    padding: 0 30px 0 0;
    font-family: Alimama DongFangDaKai;
    font-size: 36px;
    border-right: 1px solid #B9A587;
}

.honors-text {
    position: relative;
    padding: 0 0 0 71px;

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    li {

        width: 502px;
        display: flex;
        margin-right: 47px;
        margin-bottom: 25px;

        img {
            margin: 9px 30px 9px 0;
            width: 120px;
            height: 90px;
        }


        .main-time {
            margin-top: 7px;
            font-size: 18px;
            color: #937950;
            margin-bottom: 5px;
            overflow: hidden;
        }

        .main-text {
            font-family: Alibaba PuHuiTi 3.0;
            font-size: 14px;
            line-height: 20px;
            overflow: hidden;
            cursor: pointer;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
    }

    .honor-Bg {
        position: absolute;
        height: 285px;
        width: auto;
        bottom: -152px;
        left: -295px;
    }

    .pagination {
        padding-right: 47px;
        padding-top: 30px;
        text-align: end;
    }
}

@font-face {
    font-family: 'Alimama DongFangDaKai';
    src: url('../../assets/font/阿里妈妈东方大楷.ttf');
}


:deep .msg-pagination-container.is-background .el-pager li {
    /*对页数的样式进行修改*/
    background-color: transparent;
    color: #333333;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
}

:deep.msg-pagination-container.is-background .btn-next {
    /*对下一页的按钮样式进行修改*/
    background-color: transparent;
    color: #333333;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
}

:deep.msg-pagination-container.is-background .btn-prev {
    /*对上一页的按钮样式进行修改*/
    background-color: transparent;
    color: #333333;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
}

:deep.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
    /*当前选中页数的样式进行修改*/
    background-color: #937950;
    color: #FFF;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
}
</style>