minnan/src/pages/parts/StatsText.vue

<template>
  <view 
    :class="[
      'main-stats-text',
      title ? '' : 'no-title'
    ]"
  >
    <text class="title">{{ title }}</text>
    <view class="stats">
      <view
        v-for="(item, i) in data"
        :key="i"
        class="item"
        :style="{ width: item.long ? 'calc(100%)' : width }"
        @click="item.onClick"
      >
        <text class="number">{{ item.value }}</text>
        <text class="sub-title">{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';

defineProps({	
  title: {
    type: String,
    default: ''
  },
  data : {
    type: Object as PropType<{
      title: string,
      value: string,
      long?: boolean,
      onClick?: () => void
    }[]>,
    default: () => ([])
  }	,
  width: {
    type: [Number, String],
    default: ''
  },
})
</script>

<style lang="scss">
@use "sass:map";
@use "@/common/scss/define/colors.scss" as *;

$color-primary: map.get($colors, "primary");
$color-text: map.get($colors, "text");

.main-stats-text {
  position: relative;
  display: flex;
  flex-direction: column;

  .title {
    font-size: 30rpx;
    margin: 10rpx 0;
    color: $color-primary;
    text-align: center;
  }
  .stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    color: $color-text;

    .item {
      display: flex;
      flex-direction: column;
      text-align: center;
      margin: 10rpx 0;

      .sub-title {
        font-size: 24rpx;
      }
      .number {
        font-size: 50rpx;
        font-weight: bold;
      }
    }
  }

  &.no-title {
    .stats .item {
      width: calc(30% - 60rpx);
      flex-direction: column-reverse;

      .sub-title {
        font-size: 30rpx;
        color: $color-primary;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>