cfc/cfc-frontend/components/EnergyWeekCard.vue

<template>
  <view class="energy-week-card">
    <view class="ewc-header">
      <text class="ewc-title">📈 {{ title }}</text>
    </view>
    <view class="ewc-body">
      <view class="ewc-stat-row">
        <text class="ewc-stat-label">本周获取</text>
        <text class="ewc-stat-value accent">+{{ weekGain }}</text>
        <text class="ewc-stat-label" style="margin-left: 24rpx;">上周</text>
        <text class="ewc-stat-value" :class="gainTrend >= 0 ? 'up' : 'down'">{{ lastWeekGain }}</text>
        <text class="ewc-trend" :class="gainTrend >= 0 ? 'up' : 'down'">
          {{ gainTrend >= 0 ? '↑' : '↓' }}{{ Math.abs(gainTrend) }}%
        </text>
      </view>
      <view class="ewc-mini-chart">
        <view class="ewc-bar" v-for="(val, i) in weekData" :key="i"
          :style="{ height: (val / maxVal * 80) + 'rpx' }"
          :class="{ 'ewc-bar--today': i === weekData.length - 1 }">
        </view>
      </view>
      <text class="ewc-tip" v-if="tip">{{ tip }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: { type: String, default: '能量周报' },
    weekGain: { type: Number, default: 0 },
    lastWeekGain: { type: Number, default: 0 },
    gainTrend: { type: Number, default: 0 },
    weekData: { type: Array, default: function() { return [10, 20, 30, 40, 50, 60, 70] } },
    tip: { type: String, default: '' }
  },
  computed: {
    maxVal() {
      return Math.max.apply(null, this.weekData.concat([1]))
    }
  }
}
</script>

<style scoped>
.energy-week-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.ewc-header { margin-bottom: 16rpx; }
.ewc-title { font-size: 28rpx; font-weight: 700; color: #333; }
.ewc-stat-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 16rpx;
}
.ewc-stat-label { font-size: 22rpx; color: #999; }
.ewc-stat-value { font-size: 28rpx; font-weight: 700; }
.ewc-stat-value.accent { color: #F97316; }
.ewc-stat-value.up { color: #10B981; }
.ewc-stat-value.down { color: #EF4444; }
.ewc-trend { font-size: 22rpx; margin-left: 8rpx; }
.ewc-trend.up { color: #10B981; }
.ewc-trend.down { color: #EF4444; }
.ewc-mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 8rpx;
  height: 90rpx;
  margin-bottom: 12rpx;
}
.ewc-bar {
  flex: 1;
  background: #E2E8F0;
  border-radius: 4rpx 4rpx 0 0;
  min-height: 8rpx;
}
.ewc-bar--today { background: #F97316; }
.ewc-tip { font-size: 22rpx; color: #F97316; display: block; }
</style>