用户需要的是一个移动端的收益记录页面，基于uni-app Vue2，兼容微信小程序。要求使用橘红色和橙色为主色调，蓝色、绿色为辅色，颜色要鲜艳高亮。需要使用Font Awesome图标，路径为/static/icons/。
首先，我需要分析需求并规划设计：
1. **需求分析**：这是一个移动端收益记录页面，主要功能包括搜索条件卡片和收益记录卡片列表。搜索条件要有搜索框、日期选择、收支类型选择、收益分类选择。收益记录卡片要根据收入/支出显示不同背景色（渐变色），展示金额、类型、编号、时间、来源说明等。
2. **设计系统获取**：既然是移动端财务类应用，可以查询设计系统获取建议。使用"finance mobile app earnings records"作为关键词。返回的设计系统建议是Minimalism风格，但用户要求颜色鲜艳高亮，橘红色和橙色为主。所以需要结合用户要求进行调整。
3. **设计决策**：
- **美学方向**：现代移动端财务应用，强调色彩区分和清晰的信息层级。采用橘红色和橙色渐变作为主色调，收入卡片用暖色渐变（橘红到橙），支出卡片用冷色渐变（蓝色到绿色）。
- **布局**：移动端单列布局，搜索条件卡片在上，收益记录列表在下。
- **字体**：移动端使用系统字体，确保可读性。
- **交互**：搜索条件展开/收起，选择器弹出，复制按钮点击反馈。
- **图标**：使用Font Awesome SVG图标，路径为/static/icons/。
4. **资产调用**：可能需要一些背景纹理或装饰性元素，但用户没有要求图片，暂时不需要。
现在开始构建代码。需要提供uni-app Vue2单文件组件，包含template、script、style（lang="scss"）。使用uni-app组件如view、text、image等，兼容微信小程序。
需要注意：
- 使用scss嵌套语法
- 颜色渐变：收入卡片背景用橘红到橙渐变，支出卡片用蓝到绿渐变
- 搜索条件卡片要有装饰性点缀
- 使用Font Awesome图标，例如搜索图标、日历图标、下拉箭头、复制图标等
- 数据解析：balanceId、amount、operationType、creationTime、htmlContent等字段
接下来编写代码。先构造基本结构。
由于用户要求使用uni-app节点，不能使用div等HTML标签。使用view代替div，text代替span。
搜索条件部分：
- 搜索框：包含图标、输入框、查询按钮、更多条件按钮
- 更多条件展开后显示：日期选择器、收支类型选择器、收益分类选择器
收益记录卡片：
- 根据typeOf决定背景色渐变
- 顶部栏：左侧金额，右侧收支类型，底部下划线
- 收支编号：加粗显示，右侧复制按钮
- 收益时间
- 来源说明：使用v-html渲染
需要处理数据解析，creationTime是时间戳，需要格式化。
现在开始编写代码。现在编写完整的Vue单文件组件。考虑到微信小程序兼容性，不能使用某些CSS特性，但渐变背景可以使用线性渐变。
开始输出最终结果。这个背景图不太符合橘红色主题。不过用户可能不需要背景图，先不管。
现在生成最终代码。```json{
"summary": "设计了一个移动端收益记录页面，采用橘红色和橙色为主色调的鲜艳渐变风格。搜索条件卡片采用现代卡片布局，带有装饰性点缀和展开/收起功能。收益记录卡片根据收入/支出使用不同渐变背景色（收入：橘红到橙渐变，支出：蓝到绿渐变），卡片包含完整收益信息展示和复制功能。使用Font Awesome图标库，采用SCSS嵌套语法编写样式，完全兼容微信小程序。",
"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 10rpx 30rpx rgba(0, 0, 0, 0.08);\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 .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: #fff;\n }\n \n &.expense-text {\n color: #fff;\n }\n }\n \n .currency {\n font-size: 28rpx;\n color: rgba(255, 255, 255, 0.9);\n }\n }\n \n .type-section {\n .operation-type {\n font-size: 26rpx;\n color: rgba(255, 255, 255, 0.9);\n background: rgba(255, 255, 255, 0.2);\n padding: 8rpx 16rpx;\n border-radius: 8rpx;\n }\n }\n }\n \n .divider {\n height: 1rpx;\n background: rgba(255, 255, 255, 0.3);\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: rgba(255, 255, 255, 0.8);\n }\n \n .balance-id-value {\n font-size: 26rpx;\n font-weight: 700;\n color: #fff;\n margin-right: 20rpx;\n flex: 1;\n }\n \n .copy-btn {\n display: flex;\n align-items: center;\n gap: 8rpx;\n background: rgba(255, 255, 255, 0.2);\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: #fff;\n }\n \n &:active {\n background: rgba(255, 255, 255, 0.3);\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.8;\n }\n \n .time-label {\n font-size: 24rpx;\n color: rgba(255, 255, 255, 0.8);\n margin-right: 10rpx;\n }\n \n .time-value {\n font-size: 24rpx;\n color: #fff;\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.8;\n }\n \n .source-label {\n font-size: 24rpx;\n color: rgba(255, 255, 255, 0.8);\n }\n }\n \n .html-content {\n font-size: 26rpx;\n color: #fff;\n line-height: 1.5;\n background: rgba(255, 255, 255, 0.1);\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.2);\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 }\n }\n}\n</style>\n"},
"next": ["添加数据筛选功能", "支持下拉刷新加载", "增加图表统计视图", "导出收益报表", "设置收益提醒"],
"breakpoint": "xs"
}```