From cb9cd5f77b5d6ace463f46ab2f0e8aafa82f9dcb Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期二, 15 四月 2025 09:44:54 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase --- src/views/honors/index.vue | 289 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 281 insertions(+), 8 deletions(-) diff --git a/src/views/honors/index.vue b/src/views/honors/index.vue index cb3efc7..b3e4ee0 100644 --- a/src/views/honors/index.vue +++ b/src/views/honors/index.vue @@ -1,16 +1,289 @@ <template> - <div class="honors"> - <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 {}; +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; + background-color: #e9e1d4; + position: relative; + overflow: hidden; +} + +.honors-title { + 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: 77.3%; + height: auto; + margin: 0 auto; + margin-top: 2%; +} + +.honors-main-box { + 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; +} + +.honors-text { + width: 100%; + position: relative; + padding: 0 0 0 5.8%; + + 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%; } -</style> \ No newline at end of file + + .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; + } + + .honors-title p { + font-size: 44px; + } + + .honors-main-title { + font-size: 54px; + } + + .honors-text { + li { + .main-time { + font-size: 24px; + } + + .main-text { + font-size: 20px; + line-height: 28px; + } + } + } + + .honor-Bg { + position: absolute; + width: 70.5%; + height: auto; + bottom: -39%; + left: -295px; + } + +} + +@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> -- Gitblit v1.9.1