refactor(ui): 优化布局样式和组件结构

- 调整侧边栏菜单激活状态的样式
- 移除标签组件中未使用的代码
- 删除智能柜表单中不必要的字段
- 优化智能柜卡片布局,使用el-descriptions组件展示信息
This commit is contained in:
dzq 2025-05-15 15:49:42 +08:00
parent aaf8055df7
commit 2b44260a25
4 changed files with 25 additions and 21 deletions

View File

@ -77,6 +77,10 @@ nextTick(() => {
opacity: 0.45;
}
:deep(.el-sub-menu.is-active .el-sub-menu__title) {
border-bottom: 0;
}
.logout {
max-width: 120px;

View File

@ -548,11 +548,11 @@ onBeforeUnmount(() => {
>
<IconifyIconOffline :icon="CloseBold" />
</span>
<div
<!-- <div
:ref="'schedule' + index"
v-if="showModel !== 'card'"
:class="[scheduleIsActive(item)]"
/>
/> -->
</div>
</div>
</div>

View File

@ -29,7 +29,7 @@ const pageLoading = ref(false);
const dataList = ref<SmartCabinetDTO[]>([]);
const pagination = ref<PaginationProps>({
total: 0,
pageSize: 5,
pageSize: 12,
currentPage: 1,
background: true
});
@ -113,12 +113,15 @@ onMounted(() => {
<div class="card-content">
<img :src="`/img/cabinet/${CabinetImgMap[item.templateNo]?.img || 'default.jpg'}`"
class="cabinet-image" />
<div class="cabinet-info">
<div class="name">柜体名称{{ item.cabinetName }}</div>
<div class="type">柜体类型{{ item.cabinetType === 0 ? '主柜' : '副柜' }}</div>
<div class="template">模板{{ CabinetImgMap[item.templateNo]?.name || '-' }}</div>
<div class="shop">归属商店{{ item.shopName || '-' }}</div>
</div>
<el-descriptions class="cabinet-info" :column="2">
<el-descriptions-item class="name" :span="2">柜体名称{{ item.cabinetName }}
</el-descriptions-item>
<!-- <div class="type">柜体类型{{ item.cabinetType === 0 ? '主柜' : '副柜' }}</div> -->
<el-descriptions-item class="template">模板{{ CabinetImgMap[item.templateNo]?.name || '-' }}
</el-descriptions-item>
<el-descriptions-item class="shop">商店{{ item.shopName || '-' }}
</el-descriptions-item>
</el-descriptions>
</div>
<el-divider class="divider" />
<el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleViewDetail(item)" />
@ -142,7 +145,9 @@ onMounted(() => {
margin-bottom: 12px;
}
}
:deep(.el-descriptions__cell) {
padding-bottom: 1px!important;
}
.cabinet-card {
margin-bottom: 20px;
min-height: 210px;
@ -152,8 +157,8 @@ onMounted(() => {
.cabinet-image {
width: 100%;
height: 420px;
object-fit: cover;
height: 200px;
object-fit: contain;
border-radius: 4px;
margin-bottom: 10px;
}
@ -170,13 +175,16 @@ onMounted(() => {
.shop,
.location,
.template {
width: 100%;
font-size: 14px;
color: #606266;
margin-bottom: 6px;
line-height: 1.5;
line-height: 1;
text-align: left;
}
.name {
width: 100%;
font-weight: 500;
color: #303133;
}

View File

@ -89,14 +89,6 @@ const templateOptions = Object.entries(CabinetImgMap).map(([value, item]) => ({
:value="option.value" />
</el-select>
</el-form-item>
<el-form-item label="锁控板序号" prop="lockControlNo">
<el-input v-model="formData.lockControlNo" placeholder="请输入锁控板序号" />
</el-form-item>
<el-form-item label="位置" prop="location">
<el-input-number v-model="formData.location" :min="0" controls-position="right" />
</el-form-item>
</el-form>
<template #footer>