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

<template>
  <div class="card-b">
    <div class="box" v-for="item in tabs" :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">{{ item.num }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { FILE_OVERVIEW_CONFIG } from '../billboard.data';

  defineEmits(['click']);

  let tabs = ref(FILE_OVERVIEW_CONFIG);
</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>