im-uniapp/pages/workbench/cost/components/SummaryCards.vue

<template>
  <view class="summary-cards-container">
    <scroll-view 
      scroll-x="true" 
      class="cards-scroll"
      show-scrollbar="false"
    >
      <view class="cards-wrapper">
        <view 
          class="summary-card" 
          v-for="(card, index) in cardsData" 
          :key="index"
        >
          <view class="card-title">{{ card.title }}</view>
          <view class="card-value">人民币：{{ formatNumber(card.valueCNY) }}</view>
          <view class="card-value">美元：{{ formatNumber(card.valueUSD) }}</view>
        </view>
      </view>
    </scroll-view> 
  </view>
</template>

<script>
export default {
  name: 'SummaryCards',
  props: {
    // 接收卡片数据，格式为数组对象
    cardsData: {
      type: Array,
      default: () => [
        { title: '当前总库存量', value: 0, trend: 0 },
        { title: '在途物料数量', value: 0, trend: 0 },
        { title: '今日入库量', value: 0, trend: 0 },
        { title: '今日出库量', value: 0, trend: 0 },
        { title: '预警信息', value: 0, trend: 0 }
      ]
    }
  },
  methods: {
    formatNumber(num) {
      if (isNaN(num)) return '0'; // 兜底处理
      return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 保留2位小数+千位分隔符
    }
  }
};
</script>

<style scoped>
.summary-cards-container {
  width: 100%;
  margin-bottom: 20rpx;
}

.cards-scroll {
  width: 100%;
  white-space: nowrap;
  padding: 10rpx 0;
}

.cards-wrapper {
  display: inline-flex;
  gap: 16rpx;
  padding: 0 16rpx;
}

.summary-card {
  min-width: 240rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 10rpx;
}

.card-value {
  font-size: 34rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
}

.card-trend {
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rpx;
}

.trend-up {
  color: #00b42a;
}

.trend-down {
  color: #f53f3f;
}

.trend-flat {
  color: #888888;
}
</style>