收益记录卡片设计优化：淡色渐变背景与色彩区分提升可读性

用户对卡片背景色提出了新要求：需要淡色背景，黑色字体。但收入金额和支出金额需要不同颜色（不能是黑色）。之前的代码使用了渐变背景，字体是白色的。现在需要调整：

1. 卡片背景改为淡色，比如浅灰色或浅色渐变
2. 字体颜色改为黑色
3. 金额颜色：收入用绿色，支出用红色（或者橘色？用户说主题色是橘红色和橙色为主，蓝色绿色为辅）
4. 需要保持收入/支出卡片的不同背景色区分吗？用户说"这两种需要不同的背景色展示"，但现在要求淡色背景。可能还是要保持不同淡色背景区分。

需要修改SCSS部分：
- 卡片背景：income和expense类使用不同的淡色渐变
- 字体颜色：大部分文字改为黑色或深灰色
- 金额颜色：收入用绿色（或橘色），支出用红色（或蓝色）
- 操作类型标签等也需要相应调整

考虑到主题色：橘红色和橙色为主，蓝色、绿色为辅。收入可以用橘色到浅橙的渐变背景，支出用蓝色到浅蓝的渐变背景。金额颜色：收入用深橙色，支出用深蓝色。

现在调整代码。需要修改SCSS中的.earning-card部分。先修改背景渐变：使用更浅的颜色。比如收入：浅橙到浅黄渐变；支出：浅蓝到浅绿渐变。

字体颜色：大部分改为#333或#666。金额颜色：收入用#ff6b35（橘红），支出用#3498db（蓝色）。

操作类型标签背景色也需要调整。

卡片装饰角也需要调整颜色。

现在修改代码。先复制之前的完整HTML，然后修改SCSS部分。需要修改：

1. .earning-card.income 背景渐变改为淡色
2. .earning-card.expense 背景渐变改为淡色
3. 金额颜色改为不同的彩色
4. 文字颜色改为深色
5. 标签背景色调整

修改完成后输出。现在开始修改。设计系统推荐是极简主义，但用户要求鲜艳色彩。我们需要调整。

现在修改SCSS代码。让我重新整理思路：

用户要求：
1. 卡片背景色需要淡色（不是深色渐变）
2. 字体颜色需要是黑色
3. 收支金额颜色不用黑色，收益和支出需要不同的字体颜色
4. 主题颜色以橘红色和橙色为主，蓝色、绿色为辅

修改方案：
- 收入卡片：浅橙色背景渐变
- 支出卡片：浅蓝色背景渐变
- 字体颜色：大部分为黑色或深灰色
- 金额颜色：收入用橘红色（#ff6b35），支出用蓝色（#3498db）
- 其他文字：深灰色

现在修改代码。需要调整的部分：
1. .earning-card.income 背景
2. .earning-card.expense 背景
3. 金额颜色类
4. 其他文字颜色

开始修改。先创建新的SCSS部分。然后输出完整代码。现在生成最终响应。```json{
"summary": "根据用户反馈优化了收益记录卡片设计：将卡片背景改为淡色渐变（收入：浅橙渐变，支出：浅蓝渐变），所有字体颜色改为深色以确保可读性，收支金额分别使用橘红色和蓝色突出显示，保持了鲜明的视觉区分。",
"widget": {"type":"full-html","html":"<template>\n <view class=\"earnings-page\">\n <!-- 搜索条件卡片 -->\n <view class=\"search-card\">\n <view class=\"search-header\">\n <view class=\"search-box\">\n <image class=\"search-icon\" src=\"/static/icons/magnifying-glass.svg\" mode=\"aspectFit\"></image>\n <input \n class=\"search-input\" \n type=\"text\" \n placeholder=\"搜索收益记录\" \n v-model=\"searchKeyword\" \n placeholder-class=\"placeholder\"\n />\n <view class=\"search-buttons\">\n <view class=\"btn query-btn\" @tap=\"handleSearch\">查询</view>\n <view class=\"btn more-btn\" @tap=\"toggleMoreConditions\">\n {{showMoreConditions ? '收起' : '更多'}}\n <image class=\"arrow-icon\" :src=\"showMoreConditions ? '/static/icons/chevron-up.svg' : '/static/icons/chevron-down.svg'\" mode=\"aspectFit\"></image>\n </view>\n </view>\n </view>\n </view>\n \n <!-- 更多搜索条件 -->\n <view class=\"more-conditions\" v-if=\"showMoreConditions\">\n <view class=\"condition-row\">\n <view class=\"condition-label\">收益日期</view>\n <view class=\"condition-value\" @tap=\"showDatePicker = true\">\n <image class=\"calendar-icon\" src=\"/static/icons/calendar-days.svg\" mode=\"aspectFit\"></image>\n {{selectedDate || '选择日期'}}\n </view>\n </view>\n \n <view class=\"condition-row\">\n <view class=\"condition-label\">收支类型</view>\n <view class=\"condition-value\" @tap=\"showTypePicker = true\">\n <image class=\"filter-icon\" src=\"/static/icons/filter.svg\" mode=\"aspectFit\"></image>\n {{selectedType || '选择类型'}}\n </view>\n </view>\n \n <view class=\"condition-row\">\n <view class=\"condition-label\">收益分类</view>\n <view class=\"condition-value\" @tap=\"showClassifyPicker = true\">\n <image class=\"tag-icon\" src=\"/static/icons/tag.svg\" mode=\"aspectFit\"></image>\n {{selectedClassify || '选择分类'}}\n </view>\n </view>\n </view>\n \n <!-- 装饰性点缀 -->\n <view class=\"decoration-dots\">\n <view class=\"dot dot-1\"></view>\n <view class=\"dot dot-2\"></view>\n <view class=\"dot dot-3\"></view>\n </view>\n </view>\n \n <!-- 选择器组件 -->\n <view class=\"picker-modal\" v-if=\"showDatePicker\" @tap=\"showDatePicker = false\">\n <view class=\"picker-content\" @tap.stop>\n <view class=\"picker-header\">\n <text class=\"picker-title\">选择日期</text>\n <view class=\"picker-close\" @tap=\"showDatePicker = false\">\n <image src=\"/static/icons/xmark.svg\" mode=\"aspectFit\"></image>\n </view>\n </view>\n <picker-view class=\"picker-view\" :value=\"dateValue\" @change=\"onDateChange\">\n <picker-view-column>\n <view class=\"picker-item\" v-for=\"year in years\" :key=\"year\">{{year}}年</view>\n </picker-view-column>\n <picker-view-column>\n <view class=\"picker-item\" v-for=\"month in months\" :key=\"month\">{{month}}月</view>\n </picker-view-column>\n <picker-view-column>\n <view class=\"picker-item\" v-for=\"day in days\" :key=\"day\">{{day}}日</view>\n </picker-view-column>\n </picker-view>\n <view class=\"picker-footer\">\n <view class=\"btn cancel-btn\" @tap=\"showDatePicker = false\">取消</view>\n <view class=\"btn confirm-btn\" @tap=\"confirmDate\">确定</view>\n </view>\n </view>\n </view>\n \n <view class=\"picker-modal\" v-if=\"showTypePicker\" @tap=\"showTypePicker = false\">\n <view class=\"picker-content\" @tap.stop>\n <view class=\"picker-header\">\n <text class=\"picker-title\">收支类型</text>\n <view class=\"picker-close\" @tap=\"showTypePicker = false\">\n <image src=\"/static/icons/xmark.svg\" mode=\"aspectFit\"></image>\n </view>\n </view>\n <picker-view class=\"picker-view\" :value=\"typeValue\" @change=\"onTypeChange\">\n <picker-view-column>\n <view class=\"picker-item\" v-for=\"(type, index) in typeOptions\" :key=\"index\">{{type}}</view>\n </picker-view-column>\n </picker-view>\n <view class=\"picker-footer\">\n <view class=\"btn cancel-btn\" @tap=\"showTypePicker = false\">取消</view>\n <view class=\"btn confirm-btn\" @tap=\"confirmType\">确定</view>\n </view>\n </view>\n </view>\n \n <view class=\"picker-modal\" v-if=\"showClassifyPicker\" @tap=\"showClassifyPicker = false\">\n <view class=\"picker-content\" @tap.stop>\n <view class=\"picker-header\">\n <text class=\"picker-title\">收益分类</text>\n <view class=\"picker-close\" @tap=\"showClassifyPicker = false\">\n <image src=\"/static/icons/xmark.svg\" mode=\"aspectFit\"></image>\n </view>\n </view>\n <picker-view class=\"picker-view\" :value=\"classifyValue\" @change=\"onClassifyChange\">\n <picker-view-column>\n <view class=\"picker-item\" v-for=\"(classify, index) in classifyOptions\" :key=\"index\">{{classify}}</view>\n </picker-view-column>\n </picker-view>\n <view class=\"picker-footer\">\n <view class=\"btn cancel-btn\" @tap=\"showClassifyPicker = false\">取消</view>\n <view class=\"btn confirm-btn\" @tap=\"confirmClassify\">确定</view>\n </view>\n </view>\n </view>\n \n <!-- 收益记录列表 -->\n <view class=\"earnings-list\">\n <view v-if=\"earningsList.length === 0\" class=\"empty-state\">\n <image class=\"empty-icon\" src=\"/static/icons/coins.svg\" mode=\"aspectFit\"></image>\n <text class=\"empty-text\">暂无收益记录</text>\n </view>\n \n <view \n class=\"earning-card\" \n v-for=\"(item, index) in earningsList\" \n :key=\"item.balanceId\"\n :class=\"item.typeOf ? 'income' : 'expense'\"\n >\n <!-- 顶部栏 -->\n <view class=\"card-top\">\n <view class=\"amount-section\">\n <text class=\"amount\" :class=\"item.typeOf ? 'income-text' : 'expense-text'\">\n {{item.typeOf ? '+' : '-'}}{{formatAmount(item.amount)}}\n </text>\n <text class=\"currency\">元</text>\n </view>\n <view class=\"type-section\">\n <text class=\"operation-type\">{{item.operationType}}</text>\n </view>\n </view>\n <view class=\"divider\"></view>\n \n <!-- 收支编号 -->\n <view class=\"balance-id-row\">\n <text class=\"balance-id-label\">收支编号：</text>\n <text class=\"balance-id-value\">{{item.balanceId}}</text>\n <view class=\"copy-btn\" @tap=\"copyBalanceId(item.balanceId)\">\n <image class=\"copy-icon\" src=\"/static/icons/copy.svg\" mode=\"aspectFit\"></image>\n <text class=\"copy-text\">复制</text>\n </view>\n </view>\n \n <!-- 收益时间 -->\n <view class=\"time-row\">\n <image class=\"time-icon\" src=\"/static/icons/clock.svg\" mode=\"aspectFit\"></image>\n <text class=\"time-label\">收益时间：</text>\n <text class=\"time-value\">{{formatTime(item.creationTime)}}</text>\n </view>\n \n <!-- 来源说明 -->\n <view class=\"source-row\">\n <image class=\"source-icon\" src=\"/static/icons/circle-info.svg\" mode=\"aspectFit\"></image>\n <text class=\"source-label\">来源说明：</text>\n </view>\n <view class=\"html-content\" v-html=\"item.htmlContent\"></view>\n \n <!-- 卡片装饰角 -->\n <view class=\"card-corner\">\n <image :src=\"item.typeOf ? '/static/icons/arrow-trend-up.svg' : '/static/icons/arrow-trend-down.svg'\" mode=\"aspectFit\"></image>\n </view>\n </view>\n </view>\n </view>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n searchKeyword: '',\n showMoreConditions: false,\n showDatePicker: false,\n showTypePicker: false,\n showClassifyPicker: false,\n selectedDate: '',\n selectedType: '',\n selectedClassify: '',\n dateValue: [0, 0, 0],\n typeValue: [0],\n classifyValue: [0],\n years: [],\n months: Array.from({length: 12}, (_, i) => i + 1),\n days: Array.from({length: 31}, (_, i) => i + 1),\n typeOptions: ['分润收益', '设备激活奖励', '达标退还押金', '押金反佣'],\n classifyOptions: ['个人_收益', '团队_收益', '个人_消费', '个人_退还'],\n earningsList: [\n {\n \"balanceId\": 2891236,\n \"userId\": 41,\n \"state\": 0,\n \"belong\": \"SYS_JHBF\",\n \"amount\": 150.75,\n \"entry\": 1.0,\n \"creationTime\": 1776310131000,\n \"typeOf\": true,\n \"operationType\": \"分润收益\",\n \"operationClassify\": \"个人_分润\",\n \"htmlContent\": \"商户:测试商户,交易:50.0元,补贴:0.01元\",\n \"invisible\": false,\n \"taxPoint\": 9,\n \"profitPoint\": 0.0,\n \"vipId\": 0,\n \"sourceId\": \"000000004TOIESETI740\",\n \"retrieval\": \"\",\n \"walletType\": \"分润补贴\"\n },\n {\n \"balanceId\": 2891237,\n \"userId\": 41,\n \"state\": 0,\n \"belong\": \"SYS_JHBF\",\n \"amount\": 89.50,\n \"entry\": 1.0,\n \"creationTime\": 1776310131000,\n \"typeOf\": false,\n \"operationType\": \"个人_消费\",\n \"operationClassify\": \"个人_消费\",\n \"htmlContent\": \"消费:购买设备,金额:89.5元\",\n \"invisible\": false,\n \"taxPoint\": 9,\n \"profitPoint\": 0.0,\n \"vipId\": 0,\n \"sourceId\": \"000000004TOIESETI741\",\n \"retrieval\": \"\",\n \"walletType\": \"消费扣款\"\n },\n {\n \"balanceId\": 2891238,\n \"userId\": 41,\n \"state\": 0,\n \"belong\": \"SYS_JHBF\",\n \"amount\": 300.00,\n \"entry\": 1.0,\n \"creationTime\": 1776310131000,\n \"typeOf\": true,\n \"operationType\": \"设备激活奖励\",\n \"operationClassify\": \"个人_收益\",\n \"htmlContent\": \"设备激活奖励:新用户注册,奖励金额:300元\",\n \"invisible\": false,\n \"taxPoint\": 9,\n \"profitPoint\": 0.0,\n \"vipId\": 0,\n \"sourceId\": \"000000004TOIESETI742\",\n \"retrieval\": \"\",\n \"walletType\": \"激活奖励\"\n }\n ]\n }\n },\n \n created() {\n this.initYears();\n this.initCurrentDate();\n },\n \n methods: {\n initYears() {\n const currentYear = new Date().getFullYear();\n this.years = Array.from({length: 10}, (_, i) => currentYear - 5 + i);\n },\n \n initCurrentDate() {\n const now = new Date();\n const year = now.getFullYear();\n const month = now.getMonth() + 1;\n const day = now.getDate();\n \n const yearIndex = this.years.indexOf(year);\n this.dateValue = [\n yearIndex >= 0 ? yearIndex : 0,\n month - 1,\n day - 1\n ];\n \n this.selectedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;\n },\n \n onDateChange(e) {\n this.dateValue = e.detail.value;\n },\n \n onTypeChange(e) {\n this.typeValue = e.detail.value;\n },\n \n onClassifyChange(e) {\n this.classifyValue = e.detail.value;\n },\n \n confirmDate() {\n const year = this.years[this.dateValue[0]];\n const month = this.months[this.dateValue[1]];\n const day = this.days[this.dateValue[2]];\n this.selectedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;\n this.showDatePicker = false;\n },\n \n confirmType() {\n this.selectedType = this.typeOptions[this.typeValue[0]];\n this.showTypePicker = false;\n },\n \n confirmClassify() {\n this.selectedClassify = this.classifyOptions[this.classifyValue[0]];\n this.showClassifyPicker = false;\n },\n \n toggleMoreConditions() {\n this.showMoreConditions = !this.showMoreConditions;\n },\n \n handleSearch() {\n // 实际项目中这里应该调用API查询\n console.log('搜索条件:', {\n keyword: this.searchKeyword,\n date: this.selectedDate,\n type: this.selectedType,\n classify: this.selectedClassify\n });\n // 可以在这里触发数据重新加载\n },\n \n formatAmount(amount) {\n return Number(amount).toFixed(2);\n },\n \n formatTime(timestamp) {\n if (!timestamp) return '';\n const date = new Date(timestamp);\n const year = date.getFullYear();\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const day = date.getDate().toString().padStart(2, '0');\n const hours = date.getHours().toString().padStart(2, '0');\n const minutes = date.getMinutes().toString().padStart(2, '0');\n const seconds = date.getSeconds().toString().padStart(2, '0');\n return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;\n },\n \n copyBalanceId(id) {\n // 实际项目中这里应该调用uni.setClipboardData\n console.log('复制编号:', id);\n uni.showToast({\n title: '已复制到剪贴板',\n icon: 'success'\n });\n }\n }\n}\n</script>\n\n<style lang=\"scss\">\n.earnings-page {\n padding: 20rpx;\n background: linear-gradient(135deg, #fff5f0 0%, #fff 100%);\n min-height: 100vh;\n \n .search-card {\n background: #fff;\n border-radius: 20rpx;\n padding: 30rpx;\n margin-bottom: 30rpx;\n box-shadow: 0 10rpx 30rpx rgba(255, 107, 53, 0.1);\n position: relative;\n overflow: hidden;\n \n .search-header {\n .search-box {\n display: flex;\n align-items: center;\n background: #f8f9fa;\n border-radius: 50rpx;\n padding: 10rpx 20rpx;\n \n .search-icon {\n width: 36rpx;\n height: 36rpx;\n margin-right: 15rpx;\n }\n \n .search-input {\n flex: 1;\n font-size: 28rpx;\n color: #333;\n height: 60rpx;\n line-height: 60rpx;\n \n .placeholder {\n color: #999;\n }\n }\n \n .search-buttons {\n display: flex;\n align-items: center;\n gap: 15rpx;\n \n .btn {\n padding: 12rpx 24rpx;\n border-radius: 50rpx;\n font-size: 24rpx;\n font-weight: 500;\n transition: all 0.3s;\n }\n \n .query-btn {\n background: linear-gradient(135deg, #ff6b35 0%, #ff8e53 100%);\n color: #fff;\n \n &:active {\n opacity: 0.8;\n transform: scale(0.95);\n }\n }\n \n .more-btn {\n background: #f0f7ff;\n color: #3498db;\n display: flex;\n align-items: center;\n gap: 5rpx;\n \n .arrow-icon {\n width: 24rpx;\n height: 24rpx;\n }\n \n &:active {\n background: #e1f0ff;\n }\n }\n }\n }\n }\n \n .more-conditions {\n margin-top: 30rpx;\n padding-top: 20rpx;\n border-top: 1rpx solid #eee;\n \n .condition-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 25rpx;\n \n &:last-child {\n margin-bottom: 0;\n }\n \n .condition-label {\n font-size: 26rpx;\n color: #666;\n font-weight: 500;\n }\n \n .condition-value {\n flex: 1;\n margin-left: 30rpx;\n background: #f8f9fa;\n border-radius: 12rpx;\n padding: 18rpx 20rpx;\n font-size: 26rpx;\n color: #333;\n display: flex;\n align-items: center;\n gap: 10rpx;\n \n image {\n width: 28rpx;\n height: 28rpx;\n }\n \n &:active {\n background: #e9ecef;\n }\n }\n }\n }\n \n .decoration-dots {\n position: absolute;\n top: 20rpx;\n right: 20rpx;\n display: flex;\n flex-direction: column;\n gap: 8rpx;\n \n .dot {\n width: 12rpx;\n height: 12rpx;\n border-radius: 50%;\n \n &.dot-1 {\n background: #ff6b35;\n }\n \n &.dot-2 {\n background: #3498db;\n }\n \n &.dot-3 {\n background: #2ecc71;\n }\n }\n }\n }\n \n .picker-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: flex-end;\n z-index: 1000;\n \n .picker-content {\n background: #fff;\n border-radius: 30rpx 30rpx 0 0;\n width: 100%;\n padding-bottom: env(safe-area-inset-bottom);\n \n .picker-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 30rpx;\n border-bottom: 1rpx solid #eee;\n \n .picker-title {\n font-size: 32rpx;\n font-weight: 600;\n color: #333;\n }\n \n .picker-close {\n width: 50rpx;\n height: 50rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n \n image {\n width: 24rpx;\n height: 24rpx;\n }\n }\n }\n \n .picker-view {\n height: 400rpx;\n \n .picker-item {\n height: 80rpx;\n line-height: 80rpx;\n text-align: center;\n font-size: 30rpx;\n color: #333;\n }\n }\n \n .picker-footer {\n display: flex;\n padding: 20rpx 30rpx;\n gap: 20rpx;\n \n .btn {\n flex: 1;\n padding: 25rpx;\n border-radius: 15rpx;\n text-align: center;\n font-size: 28rpx;\n font-weight: 500;\n transition: all 0.3s;\n \n &.cancel-btn {\n background: #f8f9fa;\n color: #666;\n \n &:active {\n background: #e9ecef;\n }\n }\n \n &.confirm-btn {\n background: linear-gradient(135deg, #ff6b35 0%, #ff8e53 100%);\n color: #fff;\n \n &:active {\n opacity: 0.8;\n }\n }\n }\n }\n }\n }\n \n .earnings-list {\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 100rpx 0;\n \n .empty-icon {\n width: 120rpx;\n height: 120rpx;\n margin-bottom: 30rpx;\n opacity: 0.5;\n }\n \n .empty-text {\n font-size: 28rpx;\n color: #999;\n }\n }\n \n .earning-card {\n border-radius: 20rpx;\n padding: 30rpx;\n margin-bottom: 25rpx;\n position: relative;\n overflow: hidden;\n box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.06);\n \n &.income {\n background: linear-gradient(135deg, #fff5e6 0%, #ffedd5 100%);\n border-left: 6rpx solid #ff6b35;\n }\n \n &.expense {\n background: linear-gradient(135deg, #e8f4fd 0%, #e1f5fe 100%);\n border-left: 6rpx solid #3498db;\n }\n \n .card-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20rpx;\n \n .amount-section {\n .amount {\n font-size: 48rpx;\n font-weight: 700;\n margin-right: 8rpx;\n \n &.income-text {\n color: #ff6b35;\n }\n \n &.expense-text {\n color: #3498db;\n }\n }\n \n .currency {\n font-size: 28rpx;\n color: #666;\n }\n }\n \n .type-section {\n .operation-type {\n font-size: 26rpx;\n color: #fff;\n padding: 8rpx 16rpx;\n border-radius: 8rpx;\n \n .income & {\n background: linear-gradient(135deg, #ff6b35 0%, #ff8e53 100%);\n }\n \n .expense & {\n background: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);\n }\n }\n }\n }\n \n .divider {\n height: 1rpx;\n background: rgba(0, 0, 0, 0.08);\n margin-bottom: 25rpx;\n }\n \n .balance-id-row {\n display: flex;\n align-items: center;\n margin-bottom: 20rpx;\n \n .balance-id-label {\n font-size: 26rpx;\n color: #666;\n }\n \n .balance-id-value {\n font-size: 26rpx;\n font-weight: 700;\n color: #333;\n margin-right: 20rpx;\n flex: 1;\n }\n \n .copy-btn {\n display: flex;\n align-items: center;\n gap: 8rpx;\n background: #f8f9fa;\n padding: 8rpx 16rpx;\n border-radius: 8rpx;\n \n .copy-icon {\n width: 24rpx;\n height: 24rpx;\n }\n \n .copy-text {\n font-size: 22rpx;\n color: #666;\n }\n \n &:active {\n background: #e9ecef;\n }\n }\n }\n \n .time-row {\n display: flex;\n align-items: center;\n margin-bottom: 20rpx;\n \n .time-icon {\n width: 24rpx;\n height: 24rpx;\n margin-right: 10rpx;\n opacity: 0.6;\n }\n \n .time-label {\n font-size: 24rpx;\n color: #666;\n margin-right: 10rpx;\n }\n \n .time-value {\n font-size: 24rpx;\n color: #333;\n flex: 1;\n }\n }\n \n .source-row {\n display: flex;\n align-items: center;\n margin-bottom: 10rpx;\n \n .source-icon {\n width: 24rpx;\n height: 24rpx;\n margin-right: 10rpx;\n opacity: 0.6;\n }\n \n .source-label {\n font-size: 24rpx;\n color: #666;\n }\n }\n \n .html-content {\n font-size: 26rpx;\n color: #333;\n line-height: 1.5;\n background: rgba(0, 0, 0, 0.03);\n padding: 15rpx;\n border-radius: 8rpx;\n margin-top: 10rpx;\n }\n \n .card-corner {\n position: absolute;\n top: 15rpx;\n right: 15rpx;\n width: 60rpx;\n height: 60rpx;\n background: rgba(255, 255, 255, 0.8);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n \n image {\n width: 30rpx;\n height: 30rpx;\n }\n \n .income & {\n image {\n filter: invert(48%) sepia(90%) saturate(1500%) hue-rotate(350deg) brightness(100%) contrast(101%);\n }\n }\n \n .expense & {\n image {\n filter: invert(44%) sepia(98%) saturate(1500%) hue-rotate(180deg) brightness(90%) contrast(101%);\n }\n }\n }\n }\n }\n}\n</style>\n"},
"next": ["添加月度统计图表", "支持收益趋势分析", "增加分类筛选快捷入口", "设置常用搜索条件", "支持收益数据导出"],
"breakpoint": "xs"
}```