vent-forewarn-micro/src/views/vent/common/basicCard.vue

<template>
  <div class="basicCard">
    <div class="card-box" v-for="(item, index) in cardContentLists" :key="index">
      <img class="card-box-img" :src="item.imgSrc" alt="" />
      <div class="card-box-item">
        <div class="item-labels">{{ item.label }}</div>
        <div class="item-vals">{{ item.val }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, defineProps, watch } from 'vue';

  let props = defineProps({
    cardContentList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  });
  let cardContentLists = ref<any[]>([]);

  watch(
    () => props.cardContentList,
    (newV, oldV) => {
      console.log(newV, '工作面卡片-----');
      cardContentLists.value = newV;
    },
    { immediate: true, deep: true },
  );
</script>

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

  .basicCard {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    background-color: rgb(41 49 53 / 80%);

    .card-box {
      display: flex;
      // width: 416px;
      flex: 1;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      height: 100%;
      border-left: 2px solid;
      border-image: linear-gradient(to bottom, transparent, rgb(2 70 136 / 100%), transparent) 1 1 1;

      &:first-child {
        border: none;
      }

      .card-box-img {
        width: 94px;
        height: 94px;
      }

      .card-box-item {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 94px;
        margin-left: 10px;

        .item-labels {
          color: #fff;
          font-size: 14px;
        }

        .item-vals {
          width: 100%;
          color: #02bbe9;
          // font-family: douyuFont;
          font-family: "Microsoft YaHei", sans-serif;
          font-size: 18px;
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }
</style>