From 3eba8102f54dba44758865df0cccf4aae8aea2da Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 21 四月 2025 18:28:25 +0800
Subject: [PATCH] 年谱接口
---
src/views/honors/index.vue | 318 +++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 310 insertions(+), 8 deletions(-)
diff --git a/src/views/honors/index.vue b/src/views/honors/index.vue
index a2f9c44..26111e0 100644
--- a/src/views/honors/index.vue
+++ b/src/views/honors/index.vue
@@ -1,16 +1,318 @@
<template>
- <div class="honors">
- <div>鑽ｈ獕</div>
- <div></div>
+ <div class="honors">
+ <div class="honors-title">
+ <p>
+ <span>鐜嬫案鐐庨櫌澹崳瑾夊椤�</span>
+ </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 v-loading="loading">
+ <li v-for="(item, index) in honorList" :key="index">
+ <img class="main-img" :src="item.icon ? item.icon : defaultImg" alt="" />
+ <div>
+ <p class="main-time">{{ item.year }}</p>
+ <p class="main-text" :title="item.txt">{{ item.honor }}</p>
+ </div>
+ </li>
+ </ul>
+ <div>
+ <!-- 鍒嗛〉 -->
+ <div class="pagination">
+ <el-pagination @current-change="handleCurrentChange" class="msg-pagination-container"
+ :background="isBackground" layout="prev, pager, next" :total="total">
+ </el-pagination>
+ </div>
+ <!-- 鈥滃北鈥濆浘鐗� -->
+ <img class="honor-Bg" src="../../assets/images/honors/honor-Bg.png" alt="" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-export default {};
+import MG from '@/assets/js/middleGround/WebMiddleGroundApi.js'
+export default {
+ data() {
+ return {
+ defaultImg: require("@/assets/images/honors/honorImg.png"),
+ isBackground: true,
+ honorList: [],
+ total: 0,
+ currentPage: 1,
+ loading: false,
+ };
+ },
+ mounted() {
+ this.initChart();
+ },
+ methods: {
+ // 鑾峰彇鏁版嵁
+ initChart() {
+ this.loading = true;
+ MG.resource.getItem({
+ path: "WYY_honor",
+ fields: {
+ Link: "",
+ honor: "",
+ 'year': '',
+ },
+ paging: {
+ start: (this.currentPage - 1) * 10,
+ size: 10,
+ },
+ // coverSize: {
+ // height: 70
+ // }
+ }).then((res) => {
+ console.log(res, "res");
+ if (res.datas && res.datas.length) {
+ this.honorList = res.datas.map(item => {
+ // 灏� year 瀛楁鏍煎紡鍖栦负 "2017骞�9鏈�" 杩欑鏍煎紡
+ const date = new Date(item.year);
+ const year = date.getFullYear();
+ const month = date.getMonth() + 1; // 鏈堜唤浠�0寮�濮嬶紝闇�瑕佸姞1
+ return {
+ ...item,
+ year: `${year}骞�${month}鏈坄
+ };
+ });
+ this.total = res.total;
+ this.loading = false;
+ }
+ }).catch((error) => {
+ console.error('鑾峰彇鑽ｈ獕澶辫触:', error);
+ });
+ },
+ // 澶勭悊椤电爜鍙樺寲
+ handleCurrentChange(newPage) {
+ this.currentPage = newPage;
+ this.initChart(); // 閲嶆柊鑾峰彇鏁版嵁
+ },
+ },
+
+};
</script>
-<style>
- .honors{
-
+<style lang="less" scoped>
+.honors {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ background-color: #e9e1d4;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+.honors-title {
+ padding: 8px 0;
+ height: 9.4%;
+ width: 100%;
+ text-align: left;
+ border-bottom: 2px solid #937950;
+ background-color: #e9e1d4;
+ position: sticky;
+ top: 0;
+ z-index: 100;
+
+ p {
+ height: 100%;
+ font-family: Alimama DongFangDaKai;
+ font-size: 30px;
+ text-indent: 1em;
+ border-bottom: 1px solid #937950;
+ display: flex;
+ align-items: center;
+ }
+}
+
+.page-main-father {
+ flex: 1;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ padding-top: 2%;
+ padding-bottom: 2%;
+}
+
+.honors-main {
+ width: 77.3%;
+ height: 100%;
+ margin: 0 auto;
+
+}
+
+.honors-main-box {
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ padding: 3.2% 6% 0% 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 {
+ height: 100%;
+ width: 100%;
+ position: relative;
+ padding: 0 0 0 5.8%;
+ display: flex;
+ flex-direction: column;
+
+ ul {
+ flex: 1;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ }
+
+ li {
+ height: calc(20% - 20px);
+ 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 {
+ width: 70.5%;
+ height: auto;
+ margin-left: -33%;
+ }
+
+ .pagination {
+ // position: absolute;
+ // bottom: 0;
+ // right: 0;
+ padding-right: 47px;
+ padding-top: 30px;
+ text-align: end;
+ }
+}
+
+@font-face {
+ font-family: "Alimama DongFangDaKai";
+ src: url("../../assets/font/闃块噷濡堝涓滄柟澶фシ.ttf");
+}
+
+// @media screen and (min-width: 1920px) {
+// .honors-main-box {
+// display: flex;
+// justify-content: center;
+// padding: 3.2% 6% 11% 4%;
+// border: 1px solid #e4dace;
+// background: rgba(255, 253, 248, 0.9);
+// }
+// .honor-Bg {
+// position: absolute;
+// width: 70.5%;
+// height: auto;
+// bottom: -20%;
+// left: -26.5%;
+// }
+// }
+
+@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;
+ }
+ }
+ }
+}
+
+
+
+: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