refactor(ui): 优化布局样式和组件结构
- 调整侧边栏菜单激活状态的样式 - 移除标签组件中未使用的代码 - 删除智能柜表单中不必要的字段 - 优化智能柜卡片布局,使用el-descriptions组件展示信息
This commit is contained in:
parent
aaf8055df7
commit
2b44260a25
|
@ -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;
|
||||
|
||||
|
|
|
@ -548,11 +548,11 @@ onBeforeUnmount(() => {
|
|||
>
|
||||
<IconifyIconOffline :icon="CloseBold" />
|
||||
</span>
|
||||
<div
|
||||
<!-- <div
|
||||
:ref="'schedule' + index"
|
||||
v-if="showModel !== 'card'"
|
||||
:class="[scheduleIsActive(item)]"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue