机械分厂设备屏 保养提醒显示优化

This commit is contained in:
hzz 2023-10-11 17:04:38 +08:00
parent 96b753fdb8
commit de41af9613

View File

@ -29,7 +29,7 @@
</el-col> </el-col>
<el-col :span="18" class="col-flex" <el-col :span="18" class="col-flex"
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;"> style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
<p><span>{{ label.name }} </span><span>{{ res.name }}</span></p> <p class="item-name"><span class="item-name-key">{{ label.name }}</span><span class="item-name-value">{{ res.name }}</span></p>
<p style="margin-top: 10px 0;"> <p style="margin-top: 10px 0;">
<span>{{ label.date }}</span><span>{{ res.date }}</span> &nbsp; <span>{{ label.date }}</span><span>{{ res.date }}</span> &nbsp;
<span>{{ label.duration }}</span><span>{{ res.duration }}</span> <span>{{ label.duration }}</span><span>{{ res.duration }}</span>
@ -49,7 +49,7 @@
</el-col> </el-col>
<el-col :span="18" class="col-flex" <el-col :span="18" class="col-flex"
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;"> style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
<p><span>{{ label.name }} </span><span>{{ res.name }}</span></p> <p class="item-name"><span class="item-name-key">{{ label.name }}</span><span class="item-name-value">{{ res.name }}</span></p>
<p style="margin-top: 10px 0;"> <p style="margin-top: 10px 0;">
<span>{{ label.date }}</span><span>{{ res.date }}</span> &nbsp; <span>{{ label.date }}</span><span>{{ res.date }}</span> &nbsp;
<span>{{ label.duration }}</span><span>{{ res.duration }}</span> <span>{{ label.duration }}</span><span>{{ res.duration }}</span>
@ -148,7 +148,7 @@ const onSlideChange = (e) => { };
.col-flex { .col-flex {
display: flex; display: flex;
justify-content: center; justify-content: space-around;
align-items: center; align-items: center;
} }
@ -158,5 +158,18 @@ swiper-container {
height: 100%; height: 100%;
display: inline-block !important; display: inline-block !important;
} }
.item-name {
display: flex;
flex-direction: row;
align-items: center;
}
.item-name-key {
width: 92px;
}
.item-name-value {
flex: 1;
text-align: left;
}
</style> </style>