cfc/cfc-frontend/components/QuotaProgressBar.vue

<template>
  <view class="quota-progress-bar">
    <view class="quota-label">
      <text class="quota-name">{{ name }}</text>
      <text class="quota-count">{{ remaining }} / {{ total }}</text>
    </view>
    <view class="quota-track">
      <view class="quota-fill" :style="{ width: percent + '%' }"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'QuotaProgressBar',
  props: {
    remaining: { type: Number, default: 0 },
    total: { type: Number, default: 0 },
    name: { type: String, default: '' }
  },
  computed: {
    percent() {
      if (!this.total) return 0
      return Math.round((this.remaining / this.total) * 100)
    }
  }
}
</script>

<style scoped>
.quota-progress-bar {
  margin-bottom: 16rpx;
}
.quota-label {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}
.quota-track {
  height: 12rpx;
  background: #f0f0f0;
  border-radius: 6rpx;
  overflow: hidden;
}
.quota-fill {
  height: 100%;
  background: #F97316;
  border-radius: 6rpx;
  transition: width 0.3s;
}
</style>