<!-- 巡检任务详情 -->
|
<template>
|
<div class="inspection-rask-details">
|
<div class="inspection-num">
|
<div class="total">
|
<div class="value">88</div>
|
<div class="name">总任务数</div>
|
</div>
|
<div class="status">
|
<div v-for="item in list">
|
<div :style="{ color: item.color }" class="value">{{ item.value }}</div>
|
<div class="name">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { hToV, wToR } from '@/utils/pxConver';
|
|
const list = ref([
|
{ name: '计划执行', value: 89, color: '#FFFFFF' },
|
{ name: '执行中', value: 100, color: '#FFA768' },
|
{ name: '待执行', value: 66, color: '#FFE17E' },
|
{ name: '已执行', value: 10, color: '#8EFFAC' },
|
{ name: '执行失败', value: 10, color: '#FF8E8E' },
|
]);
|
|
</script>
|
|
<style scoped lang="scss">
|
.inspection-rask-details {
|
margin-left: 29px;
|
padding: hToV(16) 16px;
|
width: 390px;
|
height: hToV(414);
|
background: linear-gradient( 270deg, rgba(31,62,122,0) 0%, rgba(31,62,122,0.35) 21%, #1F3E7A 100%);
|
border-radius: 0px 0px 0px 0px;
|
opacity: 0.85;
|
.inspection-num {
|
background: url('@/assets/images/inspection-num.png') no-repeat center / 100% 100%;
|
width: 360px;
|
height: hToV(118);
|
position: relative;
|
.total {
|
position: absolute;
|
left: 34px;
|
top: hToV(34);
|
font-weight: 500;
|
font-size: 14px;
|
color: #FFFFFF;
|
.value {
|
margin-left: 8px;
|
font-size: 26px;
|
}
|
}
|
.status {
|
position: absolute;
|
top: hToV(8);
|
right: 10px;
|
width: 200px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px;
|
justify-content: flex-start;
|
line-height: hToV(22);
|
padding: 0 10px 10px 0;
|
.name {
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
}
|
.value {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 26px;
|
}
|
}
|
}
|
}
|
</style>
|
