fuse-code/src/views/folder/fire/info.vue

<template>
  <div class="info" v-if="data">
    <h2>{{ title }}</h2>
    <div>
      <p v-for="(label, key) in labelMap">
        <span>{{ typeof label === "string" ? label : label[0] }}:</span>
        {{ typeof label === "string" ? data[key] : label[1](data[key]) }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string;
  data: Record<string, any>;
  labelMap: Record<string, string | [string, (v: any) => any]>;
}>();
</script>

<style lang="scss" scoped>
.info {
  margin-bottom: 30px;
  h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 16px;
  }
  > div {
    display: flex;
    flex-wrap: wrap;

    p {
      width: 33.33%;
    }
  }

  p {
    margin: 10px 0;
    padding: 0 20px;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    display: flex;
    word-break: break-all;

    span {
      flex: none;
      display: inline-block;
      width: 70px;
      text-align: right;
      height: 100%;
      margin-right: 10px;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
</style>