修改套餐管理页面操作图标设置

This commit is contained in:
2025-12-05 16:50:37 +08:00
parent e0a768de2e
commit 46c9787216

View File

@@ -114,9 +114,9 @@
<td>{{ item.operator }}</td> <td>{{ item.operator }}</td>
<td> <td>
<div class="action-icons"> <div class="action-icons">
<button class="icon-btn edit-btn" @click="handleEdit(item)"><i class="fas fa-edit"></i></button> <el-button type="text" @click="handleEdit(item)"><el-icon><Edit /></el-icon></el-button>
<button class="icon-btn view-btn" @click="handleView(item)"><i class="fas fa-eye"></i></button> <el-button type="text" @click="handleView(item)"><el-icon><View /></el-icon></el-button>
<button class="icon-btn delete-btn" @click="handleDelete(item)"><i class="fas fa-trash"></i></button> <el-button type="text" @click="handleDelete(item)"><el-icon><Delete /></el-icon></el-button>
</div> </div>
</td> </td>
</tr> </tr>
@@ -142,6 +142,7 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { Edit, View, Delete } from '@element-plus/icons-vue';
// 创建路由实例 // 创建路由实例
const router = useRouter(); const router = useRouter();
@@ -550,21 +551,19 @@ tr:hover {
gap: 8px; gap: 8px;
} }
.icon-btn { .action-icons .el-button {
color: var(--danger);
padding: 0;
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-secondary);
cursor: pointer;
background: transparent;
border: none;
} }
.icon-btn:hover { .action-icons .el-button:hover {
background-color: #f0f0f0; background-color: #fff2f0;
color: var(--danger);
} }
/* 分页样式 */ /* 分页样式 */