pet-system-merchant-app/pages/my/fee/statistics/index.vue

<template>
	<view class="fee-statistics-page">
		<!-- 总览卡片 -->
		<view class="summary-card">
			<view class="summary-item">
				<text class="sum-value">￥12,580</text>
				<text class="sum-label">本月服务费</text>
			</view>
			<view class="divider"></view>
			<view class="summary-item">
				<text class="sum-value">￥86,320</text>
				<text class="sum-label">累计服务费</text>
			</view>
		</view>

		<!-- 月度明细 -->
		<view class="section-title">
			<text>月度明细</text>
		</view>
		<view class="detail-list">
			<view class="detail-card" v-for="item in monthList" :key="item.month">
				<view class="detail-left">
					<text class="month-text">{{ item.month }}</text>
					<text class="count-text">{{ item.orderCount }} 单</text>
				</view>
				<view class="detail-right">
					<text class="amount-text">￥{{ item.amount }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const monthList = ref([
	{ month: '2024年02月', orderCount: 45, amount: '12,580' },
	{ month: '2024年01月', orderCount: 62, amount: '18,420' },
	{ month: '2023年12月', orderCount: 38, amount: '10,350' },
	{ month: '2023年11月', orderCount: 55, amount: '15,800' },
	{ month: '2023年10月', orderCount: 41, amount: '11,200' },
	{ month: '2023年09月', orderCount: 52, amount: '17,970' }
])
</script>

<style lang="scss" scoped>
.fee-statistics-page { min-height: 100vh; background: #f7f8fa; }
.summary-card { display: flex; background: linear-gradient(135deg, #ffd53f, #ff9500); margin: 24rpx; border-radius: 24rpx; padding: 48rpx 32rpx; }
.summary-item { flex: 1; text-align: center; }
.sum-value { display: block; font-size: 44rpx; font-weight: 900; color: #fff; }
.sum-label { display: block; font-size: 24rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; }
.divider { width: 2rpx; background: rgba(255,255,255,0.3); margin: 0 24rpx; }
.section-title { padding: 32rpx 32rpx 16rpx; font-size: 30rpx; font-weight: bold; color: #333; }
.detail-list { padding: 0 24rpx; }
.detail-card { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 20rpx; padding: 28rpx 32rpx; margin-bottom: 16rpx; }
.month-text { display: block; font-size: 28rpx; color: #333; font-weight: 600; }
.count-text { display: block; font-size: 24rpx; color: #999; margin-top: 8rpx; }
.amount-text { font-size: 32rpx; font-weight: 800; color: #ff9500; }
</style>