vent-template/src/views/vent/home/billboard/components/FileOverview.vue

<template>
  <div class="card-b">
    <div class="box" v-for="item in FILE_OVERVIEW_CONFIG" :key="item.id" @click="$emit('click', item)">
      <div class="img"> <img :src="item.src" alt="" /> </div>
      <div class="text">{{ item.text }}</div>
      <div class="num">{{ fileData[item.prop] }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { watch, shallowRef } from 'vue';
  import { BillboardType, DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
  import _ from 'lodash-es';

  const props = withDefaults(
    defineProps<{
      data?: BillboardType;
    }>(),
    {
      data: () => DEFAULT_TEST_DATA,
    }
  );
  defineEmits(['click']);

  const fileData = shallowRef<BillboardType['fileServerInfo']>({
    totalNum: 0,
    approvalNum: 0,
  });

  function fetchData() {
    const info = props.data.fileServerInfo;
    if (!info) return;
    fileData.value = info;
  }

  watch(
    () => props.data,
    () => {
      console.log('debug');
      fetchData();
    },
    { immediate: true }
  );
</script>

<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url(/@/assets/images/files/douyuFont.otf);
  }

  .card-b {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .box {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      &:first-child .img {
        position: relative;
        width: 72px;
        height: 78px;
        background: url(/@/assets/images/files/homes/file1.png) no-repeat center;

        img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -75%);
        }
      }

      &:last-child .img {
        position: relative;
        width: 72px;
        height: 78px;
        background: url(/@/assets/images/files/homes/sp.png) no-repeat center;

        img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -75%);
        }
      }

      .text {
        margin: 5px 0px;
        font-family: '思源黑体', 'Microsoft Yahei';
        color: #fff;
        font-size: 14px;
      }

      &:first-child .num {
        width: 120px;
        height: 30px;
        font-family: 'douyuFont';
        color: #fff;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(/@/assets/images/files/homes/file2.png) no-repeat center;
      }

      &:last-child .num {
        width: 120px;
        height: 30px;
        font-family: 'douyuFont';
        color: #fff;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(/@/assets/images/files/homes/sp2.png) no-repeat center;
      }
    }
  }
</style>
onMounted, import { getSummary } from '../billboard.api';onMounted, import { getSummary } from '../billboard.api';