health-front/components/center/orderCard.vue

<template>
  <view class="flex card cols">
    <view class="flex flex-column col" v-for="item in list" :key="item.id">
      <view class="icon">
        <image class="icon-img" :src="item.icon" mode="scaleToFill"></image>
        <view class="flex sup" v-if="item.value">{{ item.value }}</view>
      </view>
      <view class="label">{{ item.label }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
      }
    },
    mounted() {
      this.list = [
        { id: '001', label: '待支付', value: 2, icon: '/pages_order/static/center/order-1.png' },
        { id: '002', label: '待发货', value: 2, icon: '/pages_order/static/center/order-2.png' },
        { id: '003', label: '待收货', value: 0, icon: '/pages_order/static/center/order-3.png' },
        { id: '004', label: '售后', value: 0, icon: '/pages_order/static/center/order-4.png' },
        { id: '005', label: '全部', icon: '/pages_order/static/center/order-5.png' },
      ]
    },
  }
</script>

<style scoped lang="scss">
@import './styles/card.scss';

.card {
  padding: 32rpx;
  column-gap: 16rpx;
}

.icon {
  position: relative;
  width: 48rpx;
  height: 48rpx;

  &-img {
    width: 100%;
    height: 100%;
  }

  .sup {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    min-width: 32rpx;
    height: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    line-height: 1.3;
    color: #FFFFFF;
    background: #F53F3F;
    border-radius: 32rpx;
  }
}

.label {
  margin-top: 12rpx;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  line-height: 1;
  color: #252545;
}

</style>