<template>
  <div class="simple-table">
    <div class="th">
      <div class="td" v-for="item in data" :key="item.label">{{ item.label }}</div>
    </div>
    <div class="tr">
      <div class="td" v-for="item in data" :key="item.label">{{ item.value }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults } from "vue";
interface Props {
  data: { label: string; value: string }[];
}
withDefaults(defineProps<Props>(), {
  data: () => []
});
</script>

<style lang="scss" scoped>
.simple-table {
  width: 100%; /* 设置容器宽度为100% */
  overflow-x: auto;
  border-bottom: 1px solid #d9d9d9;
  .th,
  .tr {
    display: inline-flex;
    align-items: center;
    width: 100%;
  }
  .td {
    flex-shrink: 0;
    width: 7.5%;
  }
  .th {
    min-height: 54px;
    background: #f5f7fa;
    .td {
      display: flex;
      align-items: center;
      min-height: 70px;
      padding: 14px 12px;
      /* stylelint-disable-next-line font-family-no-duplicate-names */
      font-family: STKaitiSC, STKaitiSC;
      font-size: 18px;
      font-weight: 900;
      line-height: 26px;
      color: #340d00;
      background: #f5f7fa;
    }
  }
  .tr {
    min-height: 62px;
    .td {
      padding: 19px 12px;
      font-size: 16px;
      line-height: 24px;
      color: #333333;
    }
  }
}
</style>
