From dc161b8ff89d1a2791ba0c08e30aa278ea5ace47 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期二, 08 四月 2025 18:35:25 +0800
Subject: [PATCH] bug修改
---
src/views/honors/index.vue | 416 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 241 insertions(+), 175 deletions(-)
diff --git a/src/views/honors/index.vue b/src/views/honors/index.vue
index 7c82d4f..d928ddb 100644
--- a/src/views/honors/index.vue
+++ b/src/views/honors/index.vue
@@ -1,224 +1,290 @@
<template>
- <div class="honors">
- <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 class="honors">
+ <div class="honors-title">
+ <p>鐜嬫案鐐庨櫌澹崳瑾夊椤�</p>
</div>
+ <div class="page-main-father">
+ <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>
+ </div>
</template>
<script>
export default {
- data() {
- return {
- defaultImg: require("@/assets/images/honors/honorImg.png"),
- isBackground: true,
- honorList: [
- {
- imgSrc: "https://jsek.bnuic.com/file/GetPreViewImage?md5=86407c483dcc3c57cc8209cc11e07c58&height=150",
- time: "1986骞�11鏈�",
- txt: "1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊"
- },
- {
- imgSrc: "",
- time: "1986骞�11鏈�",
- txt: "1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊"
- },
- {
- imgSrc: "https://jsek.bnuic.com/file/GetPreViewImage?md5=86407c483dcc3c57cc8209cc11e07c58&height=150",
- time: "1986骞�11鏈�",
- txt: "1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊"
- },
- {
- imgSrc: "https://jsek.bnuic.com/file/GetPreViewImage?md5=86407c483dcc3c57cc8209cc11e07c58&height=150",
- time: "1986骞�11鏈�",
- txt: "1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊"
- },
- {
- imgSrc: "https://jsek.bnuic.com/file/GetPreViewImage?md5=86407c483dcc3c57cc8209cc11e07c58&height=150",
- time: "1986骞�11鏈�",
- txt: "1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊"
- },
- {
- imgSrc: "https://jsek.bnuic.com/file/GetPreViewImage?md5=86407c483dcc3c57cc8209cc11e07c58&height=150",
- time: "1986骞�11鏈�",
- txt: "1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊"
- },
- {
- imgSrc: "https://jsek.bnuic.com/file/GetPreViewImage?md5=86407c483dcc3c57cc8209cc11e07c58&height=150",
- time: "1986骞�11鏈�",
- txt: "1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊"
- },
- {
- imgSrc: "https://jsek.bnuic.com/file/GetPreViewImage?md5=86407c483dcc3c57cc8209cc11e07c58&height=150",
- time: "1986骞�11鏈�",
- txt: "1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊,1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊,1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊,1991骞�11鏈�'娓呭紑鐏垫敞灏勬恫娌荤枟涓鐥呯棸鐑瘉鐨勪复搴婁笌瀹為獙鐮旂┒'鑾�1991骞村害鍥藉绉戞妧杩涙濂栦笁绛夊"
- },
-
- ]
- }
- }
+ 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 lang="less" scoped>
.honors {
- width: 100%;
- height: 100%;
- box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background-color: #e9e1d4;
+ position: relative;
+ overflow: hidden;
}
.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;
- }
+ height: 9.4%;
+ width: 100%;
+ text-align: left;
+ border-bottom: 2px solid #937950;
+ background-color: #e9e1d4;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ p {
+ padding: 1.6% 0 1.55% 0;
+ font-family: Alimama DongFangDaKai;
+ font-size: 30px;
+ text-indent: 1em;
+ border-bottom: 1px solid #937950;
+ }
+}
+
+.page-main-father {
+ height: calc(100% - 9.4%);
+ width: 100%;
+ overflow: auto;
}
.honors-main {
- width: 1330px;
- margin: 0 auto;
+ width: 77.3%;
+ height: auto;
+ margin: 0 auto;
+ margin-top: 2%;
}
.honors-main-box {
- display: flex;
- justify-content: center;
- padding: 32px 0px 135px 53px;
- border: 1px solid #E4DACE;
- background: rgba(255, 253, 248, 0.9);
+ display: flex;
+ justify-content: center;
+ padding: 3.2% 6% 14% 4%;
+ 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;
+ 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;
+ width: 100%;
+ position: relative;
+ padding: 0 0 0 5.8%;
- ul {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between
+ ul {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ }
+
+ li {
+ height: 25%;
+ width: 45%;
+ display: flex;
+ margin-right: 0.9%;
+ margin-bottom: 25px;
+
+ img {
+ margin: 9px 30px 9px 0;
+ width: 24%;
+ height: 100%;
}
+ .main-time {
+ margin-top: 7px;
+ font-size: 18px;
+ color: #937950;
+ margin-bottom: 5px;
+ overflow: hidden;
+ }
+
+ .main-text {
+ font-family: Alibaba PuHuiTi 3;
+ 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;
+ width: 70.5%;
+ height: auto;
+ bottom: -36%;
+ left: -295px;
+ }
+
+ .pagination {
+ padding-right: 47px;
+ padding-top: 30px;
+ text-align: end;
+ }
+}
+
+@media screen and (min-width: 2560px) {
+ .honors-main {
+ width: 77.3%;
+ min-width: 1600px;
+ transform: scale(1);
+ }
+
+ .honors-title p {
+ font-size: 44px;
+ }
+
+ .honors-main-title {
+ font-size: 54px;
+ }
+
+ .honors-text {
li {
+ .main-time {
+ font-size: 24px;
+ }
- 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: 4;
- }
+ .main-text {
+ font-size: 20px;
+ line-height: 28px;
+ }
}
+ }
- .honor-Bg {
- position: absolute;
- height: 285px;
- width: auto;
- bottom: -152px;
- left: -295px;
- }
+ .honor-Bg {
+ position: absolute;
+ width: 70.5%;
+ height: auto;
+ bottom: -39%;
+ left: -295px;
+ }
- .pagination {
- padding-right: 47px;
- padding-top: 30px;
- text-align: end;
- }
}
@font-face {
- font-family: 'Alimama DongFangDaKai';
- src: url('../../assets/font/闃块噷濡堝涓滄柟澶фシ.ttf');
+ 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;
+ /*瀵归〉鏁扮殑鏍峰紡杩涜淇敼*/
+ 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;
+ /*瀵逛笅涓�椤电殑鎸夐挳鏍峰紡杩涜淇敼*/
+ 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;
+ /*瀵逛笂涓�椤电殑鎸夐挳鏍峰紡杩涜淇敼*/
+ 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;
+: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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1