freight-web/src/components/StatisticCard/index.vue

<template>
  <view class="box">
    <up-row>
      <up-col v-for="(item, index) in list" :span="12 / list.length">
        <view class="inner-box" :style="{ border: index === 0 ? 'none' : '' }">
          <view class="num">{{ item.num }}</view>
          <view>{{ item.name }}</view>
        </view>
      </up-col>
    </up-row>
  </view>
</template>
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    list: any;
  }>(),
  {
    list: [],
  }
);

</script>
<style lang="scss" scoped>
.box {
  padding: 19.23rpx;
  // display: flex;
  // justify-content: space-between;
  align-items: center;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 28rpx;
  color: #000000;
  text-align: center;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
}
.inner-box {
  text-align: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 26rpx;
  color: #000000;
  border-left: 1px solid #e9e9e9;
  .num {
    font-weight: bold;
    font-size: 28rpx;
  }
}
</style>