From 8bffcbb7f5fca4e1e7a308f6f786b63d0773704c Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 28 四月 2025 19:28:29 +0800
Subject: [PATCH] 页面优化
---
src/views/honors/index.vue | 65 +++++++++++++++++++++++---------
1 files changed, 46 insertions(+), 19 deletions(-)
diff --git a/src/views/honors/index.vue b/src/views/honors/index.vue
index 26111e0..cae8214 100644
--- a/src/views/honors/index.vue
+++ b/src/views/honors/index.vue
@@ -11,26 +11,30 @@
<!-- 宸﹁竟鏍囬 -->
<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="honors-text" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)"
+ element-loading-text="瀛︾敓鍒楄〃鍔犺浇涓�" element-loading-spinner="el-icon-loading">
+ <div style="min-height: 646px;">
+ <ul>
+ <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="honor-main-bottom">
+ <!-- 鈥滃北鈥濆浘鐗� -->
+ <img class="honor-Bg" src="../../assets/images/honors/honor-Bg.png" alt="" />
<!-- 鍒嗛〉 -->
<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>
+ <el-empty v-if="!loading && !honorList.length"></el-empty>
</div>
</div>
</div>
@@ -48,7 +52,7 @@
honorList: [],
total: 0,
currentPage: 1,
- loading: false,
+ loading: true,
};
},
mounted() {
@@ -69,9 +73,6 @@
start: (this.currentPage - 1) * 10,
size: 10,
},
- // coverSize: {
- // height: 70
- // }
}).then((res) => {
console.log(res, "res");
if (res.datas && res.datas.length) {
@@ -140,6 +141,7 @@
flex: 1;
width: 100%;
height: 100%;
+ min-width: 1200px;
overflow: auto;
padding-top: 2%;
padding-bottom: 2%;
@@ -147,7 +149,6 @@
.honors-main {
width: 77.3%;
- height: 100%;
margin: 0 auto;
}
@@ -175,6 +176,7 @@
padding: 0 0 0 5.8%;
display: flex;
flex-direction: column;
+ min-height: 646px;
ul {
flex: 1;
@@ -220,15 +222,35 @@
width: 70.5%;
height: auto;
margin-left: -33%;
+ margin-bottom: -1%;
+
}
.pagination {
// position: absolute;
// bottom: 0;
// right: 0;
+ height: 10%;
padding-right: 47px;
padding-top: 30px;
text-align: end;
+ }
+}
+
+.honor-main-bottom {
+ display: flex;
+ justify-content: space-between
+}
+
+::v-deep .el-loading-spinner {
+ .el-loading-text {
+ font-size: 14px;
+ color: #937950;
+ }
+
+ .el-icon-loading {
+ font-size: 14px;
+ color: #937950;
}
}
@@ -313,6 +335,11 @@
background-color: #937950;
color: #fff;
border-radius: 5px;
- border: 1px solid #cccccc;
+ border: 1px solid#cccccc;
+}
+
+//淇敼榧犳爣婊戣繃鐨勯鑹�
+:deep.el-pagination.is-background .el-pager li:not(.disabled):hover {
+ color: #937950
}
</style>
--
Gitblit v1.9.1