|
@@ -3,32 +3,32 @@
|
|
|
<div class="zhud-content">
|
|
|
<div class="content-item" v-for="(item, index) in contentList" :key="index">
|
|
|
<div class="card-item">
|
|
|
- <span>设备名称 : </span>
|
|
|
- <span>{{ item.deviceName || '--' }}</span>
|
|
|
+ <span class="card-label">设备名称 : </span>
|
|
|
+ <span class="card-text">{{ item.deviceName || '--' }}</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>额定注氮压力(Mpa) : </span>
|
|
|
- <span>{{ item.injectionPressure || '--' }}</span>
|
|
|
+ <span class="card-label">额定注氮压力(Mpa) : </span>
|
|
|
+ <span class="card-text">{{ item.injectionPressure || '--' }}</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>额定注氮流量(m3/h) : </span>
|
|
|
- <span>{{ item.injectionFlow || '--' }}</span>
|
|
|
+ <span class="card-label">额定注氮流量(m3/h) : </span>
|
|
|
+ <span class="card-text">{{ item.injectionFlow || '--' }}</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>额定氮气浓度(%) : </span>
|
|
|
- <span>{{ item.injectionConsistence || '--' }}</span>
|
|
|
+ <span class="card-label">额定氮气浓度(%) : </span>
|
|
|
+ <span class="card-text">{{ item.injectionConsistence || '--' }}</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>设备型号 : </span>
|
|
|
- <span>{{ item.modelCode || '--' }}</span>
|
|
|
+ <span class="card-label">设备型号 : </span>
|
|
|
+ <span class="card-text">{{ item.modelCode || '--' }}</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>额定电流 : </span>
|
|
|
- <span>{{ item.current || '--' }}</span>
|
|
|
+ <span class="card-label">额定电流 : </span>
|
|
|
+ <span class="card-text">{{ item.current || '--' }}</span>
|
|
|
</div>
|
|
|
<div class="card-item">
|
|
|
- <span>额定电压 : </span>
|
|
|
- <span>{{ item.voltage || '--' }}</span>
|
|
|
+ <span class="card-label">额定电压 : </span>
|
|
|
+ <span class="card-text">{{ item.voltage || '--' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -100,18 +100,44 @@ onUnmounted(() => {
|
|
|
background: url('../../../../assets/images/fire/zhud-t.png') no-repeat center;
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
- .content-item{
|
|
|
- &:nth-child(1){
|
|
|
+ .content-item {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
position: absolute;
|
|
|
- top: 20px;
|
|
|
- right: 20px;
|
|
|
+ top: 0;
|
|
|
+ right: 280px;
|
|
|
}
|
|
|
|
|
|
- &:nth-child(2){
|
|
|
+ &:nth-child(2) {
|
|
|
position: absolute;
|
|
|
- top: 40px;
|
|
|
- right: 40px;
|
|
|
+ top: 35px;
|
|
|
+ right: 530px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-item {
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 209px;
|
|
|
+ height: 37px;
|
|
|
+ padding: 0 10px;
|
|
|
+ background: url('../../../../assets/images/fire/zhud-card.png') no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .card-label {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-text {
|
|
|
+ color: #dbca20;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
|