<!-- 机巢状态 -->
|
<template>
|
<CommonTitle title="机巢状态" />
|
<div :style="{ marginLeft: pxToRem(14) }">
|
<div class="machine-status">
|
<div class="info">
|
<img src="@/assets/images/signMachineNest/machineRight/wrj.png" alt="">
|
<div class="info-right">
|
<div class="name">Matrice 30</div>
|
<div class="wz">
|
<span class="left">当前位置：</span>
|
<span class="right">450.32；210.56</span>
|
</div>
|
<div class="close-wb">
|
<div class="close">舱内关机</div>
|
<div class="wb">需要维保</div>
|
</div>
|
</div>
|
</div>
|
<div class="status">
|
<div class="card">
|
<div>
|
<img src="@/assets/images/signMachineNest/machineRight/height.png" alt="">
|
<span class="text">实时真高</span>
|
</div>
|
<div class="text-data">200<span class="text">米</span></div>
|
</div>
|
<div class="card">
|
<div>
|
<img src="@/assets/images/signMachineNest/machineRight/speed.png" alt="">
|
<span class="text">飞行速度</span>
|
</div>
|
<div class="text-data">12<span class="text">米/秒</span></div>
|
</div>
|
<div class="card">
|
<div>
|
<img src="@/assets/images/signMachineNest/machineRight/signal.png" alt="">
|
<span class="text">信号强度</span>
|
</div>
|
<div class="text-data">强</div>
|
</div>
|
<div class="card">
|
<div>
|
<img src="@/assets/images/signMachineNest/machineRight/electricity.png" alt="">
|
<span class="text">电池电量</span>
|
</div>
|
<div class="text-data">98<span class="text">%</span></div>
|
</div>
|
<div class="card">
|
<div>
|
<img src="@/assets/images/signMachineNest/machineRight/distance.png" alt="">
|
<span class="text">飞行距离</span>
|
</div>
|
<div class="text-data">98<span class="text">km</span></div>
|
</div>
|
<div class="card">
|
<div>
|
<img src="@/assets/images/signMachineNest/machineRight/duration.png" alt="">
|
<span class="text">飞行时长</span>
|
</div>
|
<div class="text-data">188<span class="text">min</span></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import CommonTitle from '@/components/CommonTitle.vue';
|
</script>
|
|
<style lang="scss" scoped>
|
.machine-status {
|
width: 390px;
|
height: 230px;
|
background: linear-gradient(
|
270deg,
|
#1f3e7a 0%,
|
rgba(31, 62, 122, 0.35) 79%,
|
rgba(31, 62, 122, 0) 100%
|
);
|
opacity: 0.85;
|
margin: 2px 0 13 0;
|
|
padding: 8px 0px 20px 18px;
|
.info {
|
display: flex;
|
// justify-content: ce;
|
height: 88px;
|
display: flex;
|
align-items: center;
|
img {
|
width: 94px;
|
height: 88px;
|
margin-right: 22px;
|
}
|
.info-right {
|
.name {
|
width: 184px;
|
height: 31px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 24px;
|
color: #0BE5F5;
|
line-height: 28px;
|
}
|
.wz {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-size: 14px;
|
color: #FFFFFF;
|
line-height: 16px;
|
.left {
|
width: 70px;
|
height: 21px;
|
font-weight: 400;
|
opacity: 0.6;
|
}
|
.right {
|
width: 100px;
|
height: 21px;
|
font-weight: bold;
|
}
|
}
|
.close-wb {
|
display: flex;
|
margin-top: 10px;
|
text-align: center;
|
line-height: 16px;
|
.close {
|
width: 60px;
|
height: 20px;
|
background: rgba(255,178,106,0.2);
|
border-radius: 4px 4px 4px 4px;
|
border: 1px solid #FFB26A;
|
color: #FFB26A;
|
margin-right: 10px;
|
}
|
.wb {
|
width: 60px;
|
height: 20px;
|
background: rgba(255,106,106,0.2);
|
border-radius: 4px 4px 4px 4px;
|
border: 1px solid #FF6A6A;
|
color: #FF6A6A;
|
}
|
}
|
|
}
|
}
|
.status {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px 20px;
|
margin-top: 18px;
|
.card {
|
width: calc(33.33% - 14px);
|
}
|
img {
|
width: 16px;
|
height: 16px;
|
// margin-right: 0px;
|
// margin-top: 2px;
|
}
|
.text {
|
width: 56px;
|
height: 21px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
line-height: 16px;
|
}
|
.text-data {
|
// width: 40px;
|
margin-left: 20px;
|
height: 23px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 18px;
|
color: #0BE5F5;
|
line-height: 21px;
|
}
|
}
|
}
|
</style>
|
