feat: 提交单个机巢详情左侧

chenyao

2025-03-29 0dd5b6393941a32e551a72becd00a0a68649cb07

 src/views/SignMachineNest/components/MachineLeft/MachineData.vue

@@ -1,4 +1,92 @@
<!-- 机巢数据 -->
<template>
  <div>机巢数据</div>
</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>