daimp-front/sub-government-screen-service/src/views/home/components/inputs.vue

<template>
  <div class="home-inputs-warp">
    <div class="data-item-row">
      <div
        v-for="(n, index) in datalist"
        :key="index"
        class="data-item"
        :style="{
          height: 'calc((100% - 20px)' + ' / ' + datalist.length / 2 + ')',
          'background-image': 'url(' + getAssetsFile('images/vsualized/home/partbg2.png') + ')',
        }"
      >
        <div class="data-warp">
          <div class="data-pos">
            <div class="data-pos-center">
              <div class="c">
                <span class="label">{{ n.label }}</span>
                <span class="value">{{ n.value }}</span>
              </div>
            </div>
          </div>
          <div class="small-bg">
            <img :src="getAssetsFile('images/vsualized/home/partbg3.png')" />
            <img :src="getAssetsFile('images/vsualized/home/' + n.icon)" class="img-icon" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useApp } from '@/hooks';

const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: '统计分析',
  },
  postion: {
    type: String,
    default: 'left',
  },
});

let topTitle = ref('');
let pos = ref('');

const datalist = reactive([
  { label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
  { label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' },
  { label: '肥料使用(吨)', value: 9000, icon: 'fertilizer.png' },
  { label: '种源使用', value: 4800, icon: 'provenance.png' },
  { label: '兽药(吨)', value: 10, icon: 'animalm.png' },
  { label: '饲料(吨)', value: 88943, icon: 'feeduse.png' },
]);

onMounted(() => {
  if (datalist.length) {
    datalist.forEach((m, index) => {
      let num = 100;
      m.value = (m.value + Math.random() + num).toFixed(2);
    });
  }
});

watch(
  () => (props.title, props.postion),
  () => {
    topTitle.value = props.title;
    pos.value = props.postion;
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.home-inputs-warp {
  height: 100%;
  .data-item-row {
    height: 100%;
    display: inline-flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  .data-item {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    background-size: 100% 100%;
    position: relative;
    width: calc((100% - 20px) / 2);
  }
  .data-warp {
    padding: 8px;
    text-align: center;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    padding-left: 20px;
    .small-bg,
    .data-pos {
      display: inline-flex;
      vertical-align: middle;
      .data-pos-center {
        display: inline-flex;
        justify-content: space-around;
        flex-direction: column;
        height: 100%;
        .pos-center {
        }
      }
    }
    .small-bg {
      width: 45px;
      height: 45px;
      position: relative;
      .img-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 38%;
        height: 38%;
      }
    }
    .data-pos {
      width: calc(100% - 54px);
      .label,
      .value {
        display: inline-block;
        width: 100%;
      }
      .label {
        color: #fff;
        font-size: 13px;
      }
      .value {
        color: #6beff9;
        font-size: 16px;
        font-weight: bold;
        margin-top: 6px;
      }
    }
  }
}
</style>