修改检验项目设置的样式风格
This commit is contained in:
@@ -116,11 +116,28 @@
|
|||||||
<td><span class="status-tag" :class="item.display === '是' ? 'status-yes' : 'status-no'">{{ item.display }}</span></td>
|
<td><span class="status-tag" :class="item.display === '是' ? 'status-yes' : 'status-no'">{{ item.display }}</span></td>
|
||||||
<td><span class="status-tag" :class="item.enabled === '是' ? 'status-yes' : 'status-no'">{{ item.enabled }}</span></td>
|
<td><span class="status-tag" :class="item.enabled === '是' ? 'status-yes' : 'status-no'">{{ item.enabled }}</span></td>
|
||||||
<td>{{ item.operator }}</td>
|
<td>{{ item.operator }}</td>
|
||||||
<td>
|
<td class="action-cell">
|
||||||
<div class="action-icons">
|
<div class="action-btns">
|
||||||
<el-button type="text" @click="handleEdit(item)"><el-icon><Edit /></el-icon></el-button>
|
<button class="action-btn edit-btn" @click="handleEdit(item)">
|
||||||
<el-button type="text" @click="handleView(item)"><el-icon><View /></el-icon></el-button>
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<el-button type="text" @click="handleDelete(item)"><el-icon><Delete /></el-icon></el-button>
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
||||||
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="action-btn view-btn" @click="handleView(item)">
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
|
||||||
|
<circle cx="12" cy="12" r="3"></circle>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button class="action-btn delete-btn" @click="handleDelete(item)">
|
||||||
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="3 6 5 6 21 6"></polyline>
|
||||||
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||||
|
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||||
|
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -146,7 +163,6 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, computed, onMounted } from 'vue';
|
import { ref, reactive, computed, onMounted } from 'vue';
|
||||||
import { useRouter, useRoute } from 'vue-router';
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
import { Edit, View, Delete } from '@element-plus/icons-vue';
|
|
||||||
import { getLocationTree } from '@/views/charge/outpatientregistration/components/outpatientregistration';
|
import { getLocationTree } from '@/views/charge/outpatientregistration/components/outpatientregistration';
|
||||||
|
|
||||||
// 创建路由实例
|
// 创建路由实例
|
||||||
@@ -590,25 +606,56 @@ tr:hover {
|
|||||||
color: var(--danger);
|
color: var(--danger);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 操作图标 */
|
/* 操作列 */
|
||||||
.action-icons {
|
.action-cell {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btns {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-icons .el-button {
|
.action-btn {
|
||||||
color: var(--danger);
|
width: 28px;
|
||||||
padding: 0;
|
height: 28px;
|
||||||
width: 24px;
|
border-radius: 50%;
|
||||||
height: 24px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
background-color: #66b1ff;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-icons .el-button:hover {
|
.edit-btn {
|
||||||
background-color: #fff2f0;
|
background-color: #FFC107;
|
||||||
color: var(--danger);
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-btn {
|
||||||
|
background-color: #1890FF;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-btn {
|
||||||
|
background-color: #FF4D4F;
|
||||||
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 20;
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分页样式 */
|
/* 分页样式 */
|
||||||
|
|||||||
@@ -138,11 +138,12 @@
|
|||||||
class="action-btn delete-btn"
|
class="action-btn delete-btn"
|
||||||
@click="handleDelete(row.id)"
|
@click="handleDelete(row.id)"
|
||||||
>
|
>
|
||||||
<svg v-if="editingRowId === row.id" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
<polyline points="3 6 5 6 21 6"></polyline>
|
||||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||||
|
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||||
|
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||||
</svg>
|
</svg>
|
||||||
<span v-else>×</span>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -361,7 +362,6 @@
|
|||||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
|
||||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
编辑
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div
|
<div
|
||||||
@@ -369,13 +369,12 @@
|
|||||||
@click="deleteItem(item.id)"
|
@click="deleteItem(item.id)"
|
||||||
v-if="!editingRowId || editingRowId === item.id"
|
v-if="!editingRowId || editingRowId === item.id"
|
||||||
>
|
>
|
||||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<polyline points="3 6 5 6 21 6"></polyline>
|
<polyline points="3 6 5 6 21 6"></polyline>
|
||||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
|
||||||
<line x1="10" y1="11" x2="10" y2="17"></line>
|
<line x1="10" y1="11" x2="10" y2="17"></line>
|
||||||
<line x1="14" y1="11" x2="14" y2="17"></line>
|
<line x1="14" y1="11" x2="14" y2="17"></line>
|
||||||
</svg>
|
</svg>
|
||||||
删除
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -1881,45 +1880,52 @@ watch(packageItems, (newVal) => {
|
|||||||
/* 操作列 */
|
/* 操作列 */
|
||||||
.action-cell {
|
.action-cell {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
align-items: center;
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn {
|
.action-btn {
|
||||||
width: 24px;
|
width: 28px;
|
||||||
height: 24px;
|
height: 28px;
|
||||||
border-radius: 4px;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #666;
|
border: none;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s ease;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
background-color: #66b1ff;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn:hover {
|
.confirm-btn {
|
||||||
background-color: #f5f5f5;
|
background-color: #1890FF;
|
||||||
color: #1890ff;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm-btn:hover {
|
.edit-btn {
|
||||||
background-color: #f6ffed;
|
background-color: #FFC107;
|
||||||
color: #52c41a;
|
color: white;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-btn:hover {
|
.add-btn {
|
||||||
background-color: #e6f7ff;
|
background-color: #1890FF;
|
||||||
color: #1890ff;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-btn:hover {
|
.delete-btn {
|
||||||
background-color: #e6f7ff;
|
background-color: #FF4D4F;
|
||||||
color: #1890ff;
|
color: white;
|
||||||
}
|
font-size: 14px;
|
||||||
|
z-index: 20;
|
||||||
.delete-btn:hover {
|
pointer-events: auto;
|
||||||
background-color: #fff2f0;
|
|
||||||
color: #ff4d4f;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分页 */
|
/* 分页 */
|
||||||
|
|||||||
Reference in New Issue
Block a user