From 2d410989d32380d31ae3fe6d42aa3b3ba9e09d00 Mon Sep 17 00:00:00 2001
From: lrj <owen.stl@gmail.com>
Date: 星期五, 03 十月 2025 22:13:29 +0800
Subject: [PATCH] UI优化和bug修复: 1.调整小程序消息列表图标样式 2.优化web端比赛晋级页面布局 3.修复小程序消息列表日期显示问题
---
web/src/views/carousel/index.vue | 85 ++++++++++++++++++++++++++++++------------
1 files changed, 61 insertions(+), 24 deletions(-)
diff --git a/web/src/views/carousel/index.vue b/web/src/views/carousel/index.vue
index 89c5deb..648baf0 100644
--- a/web/src/views/carousel/index.vue
+++ b/web/src/views/carousel/index.vue
@@ -7,26 +7,26 @@
<!-- 鎼滅储鍖哄煙 -->
<div class="search-section">
- <el-form :model="searchForm" inline>
- <el-form-item label="鏍囬">
- <el-input
- v-model="searchForm.title"
- placeholder="璇疯緭鍏ユ爣棰樺叧閿瘝"
- clearable
- @keyup.enter="handleSearch"
- />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="handleSearch">鎼滅储</el-button>
- </el-form-item>
- <el-form-item>
- <el-button type="success" @click="handleAdd">
- <el-icon><Plus /></el-icon>
- 鏂板杞挱鍥�
- </el-button>
- <el-button @click="updateSortOrders">璁剧疆椤哄簭</el-button>
- </el-form-item>
- </el-form>
+ <div class="search-toolbar">
+ <el-input
+ v-model="searchForm.title"
+ placeholder="璇疯緭鍏ユ爣棰樺叧閿瘝"
+ style="width: 200px"
+ clearable
+ />
+ <el-button type="primary" @click="handleSearch">
+ <el-icon><Search /></el-icon>
+ 鏌ヨ
+ </el-button>
+ <el-button type="primary" @click="handleSetOrder">
+ <el-icon><Sort /></el-icon>
+ 璁剧疆椤哄簭
+ </el-button>
+ <el-button type="primary" @click="handleAdd">
+ <el-icon><Plus /></el-icon>
+ 鏂板杞挱鍥�
+ </el-button>
+ </div>
</div>
<!-- 鏁版嵁琛ㄦ牸 -->
@@ -58,10 +58,10 @@
</template>
</el-table-column>
<el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="180" />
- <el-table-column label="鎿嶄綔" width="200" fixed="right">
+ <el-table-column label="鎿嶄綔" width="120" fixed="right">
<template #default="{ row }">
- <el-button type="primary" size="small" @click="handleEdit(row)">缂栬緫</el-button>
- <el-button type="danger" size="small" @click="handleDelete(row)">鍒犻櫎</el-button>
+ <el-button text size="small" @click="handleEdit(row)" :icon="Edit" class="action-btn edit-btn" title="缂栬緫"></el-button>
+ <el-button text size="small" @click="handleDelete(row)" :icon="Delete" class="action-btn delete-btn" title="鍒犻櫎"></el-button>
</template>
</el-table-column>
</el-table>
@@ -204,7 +204,7 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { Plus, Sort, Edit, Delete } from '@element-plus/icons-vue'
import { CarouselApi } from '@/api/carousel'
import { uploadFile, getMediasByTarget, saveMedia, deleteMedia } from '@/api/media'
import { MediaTargetType } from '@/constants/mediaTargetType'
@@ -661,6 +661,13 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
+ .search-toolbar {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ justify-content: flex-end;
+ }
+
.table-section {
background: #fff;
padding: 20px;
@@ -674,6 +681,36 @@
}
}
+/* 鎿嶄綔鎸夐挳鏍峰紡 */
+.action-btn {
+ padding: 8px !important;
+ margin: 0 6px;
+ border-radius: 6px;
+ transition: all 0.2s ease;
+ background: transparent !important;
+ border: none !important;
+}
+
+.edit-btn {
+ color: #409eff !important;
+}
+
+.edit-btn:hover {
+ color: #337ecc !important;
+ background: rgba(64, 158, 255, 0.1) !important;
+ transform: scale(1.2);
+}
+
+.delete-btn {
+ color: #f56c6c !important;
+}
+
+.delete-btn:hover {
+ color: #dd6161 !important;
+ background: rgba(245, 108, 108, 0.1) !important;
+ transform: scale(1.2);
+}
+
.header-actions {
display: flex;
gap: 10px;
--
Gitblit v1.8.0