<!-- 机巢数据 -->
|
<template>
|
<common-title title="机巢数据" :style="{ marginLeft: pxToRem(14) }"></common-title>
|
<div class="machine-data">
|
<div class="data-card" v-for="item in statisticsList">
|
<img :src="item.imgurl" alt="" />
|
<div class="num-text">
|
<div class="num">{{item.num}}</div>
|
<div class="text">{{ item.text }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { pxToRem } from '@/utils/rem';
|
import CommonTitle from '@/components/CommonTitle.vue';
|
import rwcs from '@/assets/images/signMachineNest/machineLeft/rwcs.png';
|
import sjs from '@/assets/images/signMachineNest/machineLeft/sjs.png';
|
import jscb from '@/assets/images/signMachineNest/machineLeft/jscb.png';
|
import rwcg from '@/assets/images/signMachineNest/machineLeft/rwcg.png';
|
import fxlc from '@/assets/images/signMachineNest/machineLeft/fxlc.png';
|
import fxsc from '@/assets/images/signMachineNest/machineLeft/fxsc.png';
|
|
const statisticsList = ref([
|
{ imgurl: rwcs, num: 1314, text: '任务次数(次)' },
|
{ imgurl: sjs, num: 1314, text: '事件数(件)' },
|
{ imgurl: jscb, num: 1314, text: '节省成本(万元)' },
|
{ imgurl: rwcg, num: 1314, text: '任务成果(个)' },
|
{ imgurl: fxlc, num: 1314, text: '飞行里程' },
|
{ imgurl: fxsc, num: 1314, text: '飞行时长' },
|
]);
|
|
</script>
|
|
<style lang="scss" scoped>
|
.machine-data {
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
margin-left: 29px;
|
padding: 16px 16px;
|
width: 390px;
|
height: 296px;
|
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;
|
margin-bottom: 12px;
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
.data-card {
|
width: calc(50% - 5px); // 减去间距的一半
|
display: flex;
|
align-items: center;
|
img {
|
width: 62.82px;
|
height: 62.82px;
|
margin-right: 10px;
|
}
|
.num-text {
|
.num {
|
width: 72px;
|
height: 24px;
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 28px;
|
line-height: 23px;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
background: linear-gradient(270deg, #FFFFFF 0%, #6DD7FF 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
background-clip: text;
|
}
|
.text {
|
width: 100px;
|
height: 18px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 14px;
|
color: #FFFFFF;
|
line-height: 17px;
|
}
|
}
|
}
|
}
|
</style>
|
