fix:修改设备告警ui
This commit is contained in:
@@ -1,18 +1,33 @@
|
||||
<template>
|
||||
<a-steps direction="vertical" :current="size">
|
||||
<template v-for="(item, index) in dataSource" :key="index">
|
||||
<a-step>
|
||||
<a-step title="">
|
||||
<template #icon>
|
||||
<ns-icon size="20" :name="item.src" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="card">
|
||||
<div class="card-title">
|
||||
<a-tag class="card-title-tag" :color="item.color">{{ item.stateName }}</a-tag>
|
||||
<div class="name">{{ item.realName }}</div>
|
||||
<a-tag
|
||||
class="card-title-tag"
|
||||
:style="{
|
||||
background: item.bgColor,
|
||||
border: '1px solid ' + item.color,
|
||||
color: item.color,
|
||||
}"
|
||||
>{{ item.stateName }}</a-tag
|
||||
>
|
||||
<div class="time">{{ item.createTime }}</div>
|
||||
</div>
|
||||
<div style="width: 100%; color: #3a3a3a; height: 25px; overflow: auto">
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
height: 27px;
|
||||
overflow: auto;
|
||||
padding: 7px 0px;
|
||||
">
|
||||
{{ item.remarks }}</div
|
||||
>
|
||||
</div>
|
||||
@@ -41,36 +56,37 @@
|
||||
margin-top: 10px;
|
||||
}
|
||||
.card {
|
||||
width: 400px;
|
||||
width: 450px;
|
||||
min-height: 0px;
|
||||
background-color: #f8fafc;
|
||||
margin-left: 20px;
|
||||
background: rgba(191, 205, 226, 0.3);
|
||||
border-radius: 4px; /* 设置圆角半径 */
|
||||
padding: 12px;
|
||||
margin-left: 8px;
|
||||
.card-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.card-title-tag {
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.name {
|
||||
position: absolute;
|
||||
left: 35%;
|
||||
left: 12px;
|
||||
top: -2px;
|
||||
transform: translateX(-50%);
|
||||
color: #3a3a3a;
|
||||
font-size: 16px;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: -2px;
|
||||
color: #ff7602;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
:deep(.ant-steps-item-tail) {
|
||||
position: absolute !important;
|
||||
|
Reference in New Issue
Block a user