feat(menu): 优化菜单路径唯一性校验并更新前端界面
- 在SysLoginController中添加optionMap数据返回 - 添加JSQLParser依赖支持MyBatis Plus功能 - 实现selectMenuByPathExcludeId方法用于排除当前菜单的路径唯一性校验 - 在SysMenuServiceImpl中添加日志记录并优化路径唯一性判断逻辑 - 在SysMenuMapper.xml中添加LIMIT 1限制并实现排除ID查询 - 在前端路由中注释患者管理相关路由配置 - 在用户store中添加optionMap配置项并优先从optionMap获取医院名称 - 重构检查项目设置页面的操作按钮样式为统一的圆形按钮设计 - 更新检查项目设置页面的导航栏样式和交互体验 - 优化门诊记录页面的搜索条件和表格展示功能 - 添加性别和状态筛选条件并改进数据加载逻辑
This commit is contained in:
@@ -143,30 +143,35 @@
|
||||
<el-table-column prop="creator" label="操作人" width="100" align="center" />
|
||||
<el-table-column label="操作" width="180" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Edit"
|
||||
circle
|
||||
@click="handleEdit(row)"
|
||||
title="编辑"
|
||||
/>
|
||||
<el-button
|
||||
type="info"
|
||||
size="small"
|
||||
icon="View"
|
||||
circle
|
||||
@click="handleView(row)"
|
||||
title="查看"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="Delete"
|
||||
circle
|
||||
@click="handleDelete(row)"
|
||||
title="删除"
|
||||
/>
|
||||
<div class="actions">
|
||||
<el-button
|
||||
class="btn btn-edit"
|
||||
size="small"
|
||||
circle
|
||||
@click="handleEdit(row)"
|
||||
title="编辑"
|
||||
>
|
||||
✏️
|
||||
</el-button>
|
||||
<el-button
|
||||
class="btn btn-view"
|
||||
size="small"
|
||||
circle
|
||||
@click="handleView(row)"
|
||||
title="查看"
|
||||
>
|
||||
👁️
|
||||
</el-button>
|
||||
<el-button
|
||||
class="btn btn-delete"
|
||||
size="small"
|
||||
circle
|
||||
@click="handleDelete(row)"
|
||||
title="删除"
|
||||
>
|
||||
✕
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -612,10 +617,84 @@ function handleDelete(row) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
margin-top: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
/* 统一的操作按钮样式 */
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
color: white;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px) scale(1.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0) scale(0.95);
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #52C41A 0%, #73d13d 100%);
|
||||
}
|
||||
|
||||
.btn-confirm:hover {
|
||||
background: linear-gradient(135deg, #389E0D 0%, #52C41A 100%);
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: linear-gradient(135deg, #1890FF 0%, #40a9ff 100%);
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: linear-gradient(135deg, #1890FF 0%, #40a9ff 100%);
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
background: linear-gradient(135deg, #722ED1 0%, #9254DE 100%);
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
background: linear-gradient(135deg, #531DAE 0%, #722ED1 100%);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: linear-gradient(135deg, #FF4D4F 0%, #ff7875 100%);
|
||||
z-index: 20;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: linear-gradient(135deg, #CF1322 0%, #FF4D4F 100%);
|
||||
}
|
||||
|
||||
/* 优化滚动条样式 - 支持水平和垂直滚动 */
|
||||
|
||||
@@ -337,36 +337,46 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" align="center" fixed="right">
|
||||
<template #default="{ row, $index }">
|
||||
<el-button
|
||||
v-if="!row.editing"
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Edit"
|
||||
circle
|
||||
@click="handleEditRow(row)"
|
||||
/>
|
||||
<el-button
|
||||
v-if="row.editing"
|
||||
type="success"
|
||||
size="small"
|
||||
icon="Check"
|
||||
circle
|
||||
@click="handleConfirmRow(row)"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Plus"
|
||||
circle
|
||||
@click="handleAddRow"
|
||||
/>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
icon="Delete"
|
||||
circle
|
||||
@click="handleDeleteRow($index)"
|
||||
/>
|
||||
<div class="actions">
|
||||
<el-button
|
||||
v-if="!row.editing"
|
||||
class="btn btn-edit"
|
||||
size="small"
|
||||
circle
|
||||
@click="handleEditRow(row)"
|
||||
title="编辑"
|
||||
>
|
||||
✏️
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.editing"
|
||||
class="btn btn-confirm"
|
||||
size="small"
|
||||
circle
|
||||
@click="handleConfirmRow(row)"
|
||||
title="保存"
|
||||
>
|
||||
✓
|
||||
</el-button>
|
||||
<el-button
|
||||
class="btn btn-add"
|
||||
size="small"
|
||||
circle
|
||||
@click="handleAddRow"
|
||||
title="添加"
|
||||
>
|
||||
+
|
||||
</el-button>
|
||||
<el-button
|
||||
class="btn btn-delete"
|
||||
size="small"
|
||||
circle
|
||||
@click="handleDeleteRow($index)"
|
||||
title="删除"
|
||||
>
|
||||
✕
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -1229,6 +1239,76 @@ async function handleSave() {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 统一的操作按钮样式 */
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
color: white;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px) scale(1.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0) scale(0.95);
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #52C41A 0%, #73d13d 100%);
|
||||
}
|
||||
|
||||
.btn-confirm:hover {
|
||||
background: linear-gradient(135deg, #389E0D 0%, #52C41A 100%);
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: linear-gradient(135deg, #1890FF 0%, #40a9ff 100%);
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: linear-gradient(135deg, #1890FF 0%, #40a9ff 100%);
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background: linear-gradient(135deg, #FF4D4F 0%, #ff7875 100%);
|
||||
z-index: 20;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: linear-gradient(135deg, #CF1322 0%, #FF4D4F 100%);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.package-settings {
|
||||
@@ -1249,4 +1329,3 @@ async function handleSave() {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,36 +1,41 @@
|
||||
<template>
|
||||
<div class="check-project-settings">
|
||||
<!-- 左侧导航栏 -->
|
||||
<div class="sidebar" style="margin-top: 100px;">
|
||||
<!-- 明确列出所有导航项 -->
|
||||
<button
|
||||
class="menu-item active"
|
||||
@click="handleMenuClick('检查类型')"
|
||||
style="display: block; width: 100%; height: 40px; padding: 8px; text-align: center;"
|
||||
>
|
||||
检查类型
|
||||
</button>
|
||||
<button
|
||||
class="menu-item"
|
||||
@click="handleMenuClick('检查方法')"
|
||||
style="display: block; width: 100%; height: 40px; padding: 8px; text-align: center;"
|
||||
>
|
||||
检查方法
|
||||
</button>
|
||||
<button
|
||||
class="menu-item"
|
||||
@click="handleMenuClick('检查部位')"
|
||||
style="display: block; width: 100%; height: 40px; padding: 8px; text-align: center;"
|
||||
>
|
||||
检查部位
|
||||
</button>
|
||||
<button
|
||||
class="menu-item"
|
||||
@click="handleMenuClick('套餐设置')"
|
||||
style="display: block; width: 100%; height: 40px; padding: 8px; text-align: center;"
|
||||
>
|
||||
套餐设置
|
||||
</button>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h3>检查项目管理</h3>
|
||||
</div>
|
||||
<div class="sidebar-menu">
|
||||
<!-- 明确列出所有导航项 -->
|
||||
<button
|
||||
class="menu-item active"
|
||||
@click="handleMenuClick('检查类型')"
|
||||
>
|
||||
<span class="menu-icon">📋</span>
|
||||
<span class="menu-text">检查类型</span>
|
||||
</button>
|
||||
<button
|
||||
class="menu-item"
|
||||
@click="handleMenuClick('检查方法')"
|
||||
>
|
||||
<span class="menu-icon">🔬</span>
|
||||
<span class="menu-text">检查方法</span>
|
||||
</button>
|
||||
<button
|
||||
class="menu-item"
|
||||
@click="handleMenuClick('检查部位')"
|
||||
>
|
||||
<span class="menu-icon">🎯</span>
|
||||
<span class="menu-text">检查部位</span>
|
||||
</button>
|
||||
<button
|
||||
class="menu-item"
|
||||
@click="handleMenuClick('套餐设置')"
|
||||
>
|
||||
<span class="menu-icon">📦</span>
|
||||
<span class="menu-text">套餐设置</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
@@ -165,26 +170,27 @@
|
||||
</td>
|
||||
<td class="actions">
|
||||
<template v-if="item.actions">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)" title="保存">
|
||||
✓
|
||||
</button>
|
||||
<button
|
||||
v-if="!item.row.includes('.')"
|
||||
class="btn btn-add"
|
||||
<button
|
||||
v-if="!item.row.includes('.')"
|
||||
class="btn btn-add"
|
||||
@click.stop="handleAdd(index)"
|
||||
title="添加子项"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)">
|
||||
🗑
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)" title="删除">
|
||||
✕
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)" title="保存">
|
||||
✓
|
||||
</button>
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)">
|
||||
🗑
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)" title="删除">
|
||||
✕
|
||||
</button>
|
||||
</template>
|
||||
</td>
|
||||
@@ -329,22 +335,22 @@
|
||||
</td>
|
||||
<td class="actions">
|
||||
<template v-if="item.editing">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)" title="保存">
|
||||
✓
|
||||
</button>
|
||||
<button class="btn btn-cancel" @click.stop="handleCancelEdit(index)">
|
||||
<button class="btn btn-cancel" @click.stop="handleCancelEdit(index)" title="取消">
|
||||
✕
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn btn-edit" @click.stop="handleEdit(index)">
|
||||
<button class="btn btn-edit" @click.stop="handleEdit(index)" title="编辑">
|
||||
✏️
|
||||
</button>
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)" title="保存">
|
||||
✓
|
||||
</button>
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)">
|
||||
🗑
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)" title="删除">
|
||||
✕
|
||||
</button>
|
||||
</template>
|
||||
</td>
|
||||
@@ -515,22 +521,22 @@
|
||||
</td>
|
||||
<td class="actions">
|
||||
<template v-if="item.editing">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)" title="保存">
|
||||
✓
|
||||
</button>
|
||||
<button class="btn btn-cancel" @click.stop="handleCancelEdit(index)">
|
||||
<button class="btn btn-cancel" @click.stop="handleCancelEdit(index)" title="取消">
|
||||
✕
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn btn-edit" @click.stop="handleEdit(index)">
|
||||
<button class="btn btn-edit" @click.stop="handleEdit(index)" title="编辑">
|
||||
✏️
|
||||
</button>
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)">
|
||||
<button class="btn btn-confirm" @click.stop="handleConfirm(index)" title="保存">
|
||||
✓
|
||||
</button>
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)">
|
||||
🗑
|
||||
<button class="btn btn-delete" @click.stop="handleDelete(index)" title="删除">
|
||||
✕
|
||||
</button>
|
||||
</template>
|
||||
</td>
|
||||
@@ -1441,79 +1447,150 @@ select {
|
||||
|
||||
/* 左侧导航栏样式 */
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
background-color: #FFFFFF;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 16px 8px;
|
||||
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
|
||||
z-index: 10;
|
||||
width: 200px;
|
||||
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding: 24px 0;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 0 20px 20px 20px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 2px solid #1890FF;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1890FF;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 8px;
|
||||
background-color: #FFFFFF;
|
||||
color: #000000;
|
||||
border-radius: 4px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 0;
|
||||
background-color: transparent;
|
||||
color: #333333;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 0;
|
||||
background: linear-gradient(180deg, #1890FF 0%, #40a9ff 100%);
|
||||
border-radius: 0 4px 4px 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: rgba(24, 144, 255, 0.1);
|
||||
background-color: rgba(24, 144, 255, 0.08);
|
||||
border-color: rgba(24, 144, 255, 0.2);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.menu-item:hover::before {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background-color: #1890FF;
|
||||
background: linear-gradient(135deg, #1890FF 0%, #40a9ff 100%);
|
||||
color: #FFFFFF;
|
||||
border-color: #1890FF;
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
|
||||
}
|
||||
|
||||
.menu-item.active::before {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-item:hover .menu-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* 主内容区样式 */
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 160px;
|
||||
padding: 24px;
|
||||
width: calc(100% - 160px);
|
||||
height: 100vh;
|
||||
padding: 32px 32px 32px 32px;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 24px;
|
||||
padding: 20px 24px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #1890FF;
|
||||
margin: 0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* 搜索栏样式 */
|
||||
.search-bar {
|
||||
background-color: #FFFFFF;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
border: 1px solid #D9D9D9;
|
||||
padding: 20px 24px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #e8e8e8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
@@ -1628,9 +1705,9 @@ select {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -1642,14 +1719,16 @@ table {
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #fafafa;
|
||||
height: 40px;
|
||||
padding: 8px 16px;
|
||||
background: linear-gradient(180deg, #f8f9fa 0%, #fafbfc 100%);
|
||||
height: 48px;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #D9D9D9;
|
||||
border-bottom: 2px solid #e8e8e8;
|
||||
color: #1890FF;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
td {
|
||||
@@ -1666,57 +1745,78 @@ td {
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: #66b1ff;
|
||||
color: white;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px) scale(1.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0) scale(0.95);
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background: linear-gradient(135deg, #52C41A 0%, #73d13d 100%);
|
||||
}
|
||||
|
||||
.btn-confirm:hover {
|
||||
background: linear-gradient(135deg, #389E0D 0%, #52C41A 100%);
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background: linear-gradient(135deg, #1890FF 0%, #40a9ff 100%);
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: linear-gradient(135deg, #1890FF 0%, #40a9ff 100%);
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: linear-gradient(135deg, #FA8C16 0%, #ffa940 100%);
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: linear-gradient(135deg, #D46B08 0%, #FA8C16 100%);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #FF4D4F;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(135deg, #FF4D4F 0%, #ff7875 100%);
|
||||
z-index: 20;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
background-color: #1890FF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
background-color: #FFC107;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background-color: #1890FF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
background-color: #FF4D4F;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
.btn-delete:hover {
|
||||
background: linear-gradient(135deg, #CF1322 0%, #FF4D4F 100%);
|
||||
}
|
||||
|
||||
/* 特殊状态样式 */
|
||||
@@ -1803,16 +1903,45 @@ input[type="text"]::placeholder {
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 60px;
|
||||
width: 70px;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.menu-item span {
|
||||
|
||||
.sidebar-header {
|
||||
padding: 0 8px 16px 8px;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-left: 60px;
|
||||
padding: 16px;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 平板适配 */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user