refactor: 设备详情代码结构调整
This commit is contained in:
parent
acdaabe203
commit
762710ad47
@ -11,19 +11,9 @@
|
|||||||
</template>
|
</template>
|
||||||
<div v-if="equipment" class="drawer-content">
|
<div v-if="equipment" class="drawer-content">
|
||||||
<!-- 基础信息 -->
|
<!-- 基础信息 -->
|
||||||
<div class="info-box">
|
<div class="basic-info-area">
|
||||||
<div class="info-title-block">
|
<DetailInfoBox :data="equipment" :title="'基础信息'" :dataConfig="showDataConfig['基础信息']" />
|
||||||
<span class="title-text">基础信息</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-content-block flex">
|
|
||||||
<div class="left-wrapper">
|
|
||||||
<div class="info-item-list-wrapper">
|
|
||||||
<div class="info-item" v-for="(item, index) in showDataConfig['基础信息']" :key="index">
|
|
||||||
<div class="label">{{ item.label }}</div>
|
|
||||||
<div class="value">{{ equipment[item.name] }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-wrapper">
|
<div class="right-wrapper">
|
||||||
<div>
|
<div>
|
||||||
<el-tag v-if="equipment.sbzt === '完好'" type="success" size="small">完好</el-tag>
|
<el-tag v-if="equipment.sbzt === '完好'" type="success" size="small">完好</el-tag>
|
||||||
@ -40,8 +30,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 设备位置 -->
|
<!-- 设备位置 -->
|
||||||
<DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备位置'" :dataConfig="showDataConfig['设备位置']" />
|
<DetailInfoBox class="detail-info-box" :data="equipment" :title="'设备位置'" :dataConfig="showDataConfig['设备位置']" />
|
||||||
|
|
||||||
@ -171,64 +159,13 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-box {
|
.basic-info-area {
|
||||||
width: 100%;
|
position: relative;
|
||||||
|
|
||||||
.info-title-block {
|
|
||||||
margin: 10px 0;
|
|
||||||
|
|
||||||
.title-text {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-content-block {
|
|
||||||
width: 100%;
|
|
||||||
padding: 15px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
.info-item-list-wrapper {
|
|
||||||
display: grid;
|
|
||||||
width: 100%;
|
|
||||||
row-gap: 15px;
|
|
||||||
|
|
||||||
.info-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-right: 10px;
|
|
||||||
line-height: 14px;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: ":"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
line-height: 14px;
|
|
||||||
font-size: 14px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-content-block.flex {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.right-wrapper {
|
.right-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 45px;
|
||||||
|
right: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
|
||||||
@ -248,7 +185,6 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.detail-info-box) {
|
:deep(.detail-info-box) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user