From 0523065a9277e0d11b82cd19e0684b86361b1f06 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期四, 03 四月 2025 18:20:13 +0800 Subject: [PATCH] 学术目录,荣誉奖项 --- src/views/honors/index.vue | 220 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 214 insertions(+), 6 deletions(-) diff --git a/src/views/honors/index.vue b/src/views/honors/index.vue index a2f9c44..7c82d4f 100644 --- a/src/views/honors/index.vue +++ b/src/views/honors/index.vue @@ -1,16 +1,224 @@ <template> <div class="honors"> - <div>鑽h獕</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: "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骞村害鍥藉绉戞妧杩涙濂栦笁绛夊" + }, + + ] + } + } +}; </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: 4; + } + } + + .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> \ No newline at end of file -- Gitblit v1.9.1