押金设置页面设计：卡片式布局与多模块功能实现

```json
{
"summary": "创建押金设置页面，包含添加押金卡片、搜索表单、记录列表三大模块。采用橘红/橙色主色调配蓝绿辅助色，卡片式布局清晰展示每笔押金记录的终端号、金额、时间、支付状态及操作按钮。使用uni-app Vue2 + SCSS结构，Font Awesome SVG图标从/static/icons引用，兼容微信小程序。",
"widget": {
"type": "full-html",
"html": "<template>\n <view class=\"deposit-setting\">\n <!-- 页面头部 -->\n <view class=\"deposit-setting__header\">\n <text class=\"deposit-setting__header-title\">押金设置</text>\n <text class=\"deposit-setting__header-sub\">管理终端设备押金配置</text>\n </view>\n\n <!-- 1. 添加押金入口卡片 -->\n <view class=\"deposit-setting__add\" @click=\"handleAddDeposit\">\n <view class=\"deposit-setting__add-icon\">\n <image src=\"/static/icons/plus-circle.svg\" mode=\"aspectFit\" class=\"deposit-setting__add-icon-img\"></image>\n </view>\n <view class=\"deposit-setting__add-info\">\n <text class=\"deposit-setting__add-title\">添加押金设置</text>\n <text class=\"deposit-setting__add-desc\">为终端设备配置押金金额与支付方式</text>\n </view>\n <view class=\"deposit-setting__add-arrow\">\n <image src=\"/static/icons/chevron-right.svg\" mode=\"aspectFit\" class=\"deposit-setting__add-arrow-img\"></image>\n </view>\n </view>\n\n <!-- 2. 搜索表单 -->\n <view class=\"deposit-setting__search\">\n <view class=\"deposit-setting__search-input-wrap\">\n <image src=\"/static/icons/search.svg\" mode=\"aspectFit\" class=\"deposit-setting__search-input-icon\"></image>\n <input\n class=\"deposit-setting__search-input\"\n v-model=\"searchKeyword\"\n placeholder=\"终端号/商户号搜索\"\n placeholder-class=\"deposit-setting__search-placeholder\"\n confirm-type=\"search\"\n @confirm=\"handleSearch\"\n />\n </view>\n <view class=\"deposit-setting__search-btn\" @click=\"handleSearch\">\n <image src=\"/static/icons/magnifying-glass.svg\" mode=\"aspectFit\" class=\"deposit-setting__search-btn-icon\"></image>\n <text class=\"deposit-setting__search-btn-text\">搜索</text>\n </view>\n </view>\n\n <!-- 3. 记录列表区域 -->\n <view class=\"deposit-setting__section\">\n <view class=\"deposit-setting__section-head\">\n <text class=\"deposit-setting__section-title\">已设置记录</text>\n <text class=\"deposit-setting__section-count\">共 {{ filteredRecords.length }} 条</text>\n </view>\n\n <!-- 空状态 -->\n <view class=\"deposit-setting__empty\" v-if=\"filteredRecords.length === 0\">\n <image src=\"/static/icons/inbox.svg\" mode=\"aspectFit\" class=\"deposit-setting__empty-icon\"></image>\n <text class=\"deposit-setting__empty-text\">暂无押金设置记录</text>\n </view>\n\n <!-- 记录卡片列表 -->\n <view\n class=\"deposit-setting__card\"\n v-for=\"(item, index) in filteredRecords\"\n :key=\"item.f主键 || index\"\n >\n <!-- 标题栏：终端号 + 复制 -->\n <view class=\"deposit-setting__card-header\">\n <view class=\"deposit-setting__card-header-left\">\n <image src=\"/static/icons/terminal.svg\" mode=\"aspectFit\" class=\"deposit-setting__card-header-device-icon\"></image>\n <text class=\"deposit-setting__card-header-device\">{{ item.f设备号 || '未设置终端号' }}</text>\n </view>\n <view class=\"deposit-setting__card-header-right\" @click=\"handleCopy(item.f设备号)\">\n <image src=\"/static/icons/copy.svg\" mode=\"aspectFit\" class=\"deposit-setting__card-header-copy-icon\"></image>\n <text class=\"deposit-setting__card-header-copy-text\">复制</text>\n </view>\n </view>\n\n <!-- 分割线 -->\n <view class=\"deposit-setting__card-divider\"></view>\n\n <!-- 押金金额 -->\n <view class=\"deposit-setting__card-row\">\n <text class=\"deposit-setting__card-label\">押金金额</text>\n <view class=\"deposit-setting__card-value-wrap\">\n <text class=\"deposit-setting__card-value-amount\">{{ formatAmount(item) }}</text>\n <text class=\"deposit-setting__card-value-unit\">分</text>\n </view>\n </view>\n\n <!-- 设置时间 -->\n <view class=\"deposit-setting__card-row\">\n <text class=\"deposit-setting__card-label\">设置时间</text>\n <text class=\"deposit-setting__card-value\">{{ formatTime(item.f创建时间) }}</text>\n </view>\n\n <!-- 是否支付 -->\n <view class=\"deposit-setting__card-row\">\n <text class=\"deposit-setting__card-label\">是否支付</text>\n <view class=\"deposit-setting__card-pay-status\" :class=\"{ 'deposit-setting__card-pay-status--paid': item.f是否支付, 'deposit-setting__card-pay-status--unpaid': !item.f是否支付 }\">\n <view class=\"deposit-setting__card-pay-dot\"></view>\n <text class=\"deposit-setting__card-pay-text\">{{ item.f是否支付 ? '已支付' : '未支付' }}</text>\n </view>\n </view>\n\n <!-- 分割线 -->\n <view class=\"deposit-setting__card-divider deposit-setting__card-divider--light\"></view>\n\n <!-- 操控栏 -->\n <view class=\"deposit-setting__card-actions\">\n <view class=\"deposit-setting__card-actions-btn deposit-setting__card-actions-btn--detail\" @click=\"handleDetail(item)\">\n <image src=\"/static/icons/eye.svg\" mode=\"aspectFit\" class=\"deposit-setting__card-actions-btn-icon\"></image>\n <text class=\"deposit-setting__card-actions-btn-text\">详情</text>\n </view>\n <view class=\"deposit-setting__card-actions-btn deposit-setting__card-actions-btn--qrcode\" @click=\"handleShowQR(item)\">\n <image src=\"/static/icons/qrcode.svg\" mode=\"aspectFit\" class=\"deposit-setting__card-actions-btn-icon\"></image>\n <text class=\"deposit-setting__card-actions-btn-text\">查看支付码</text>\n </view>\n </view>\n </view>\n </view>\n\n <!-- 支付码弹窗 -->\n <view class=\"deposit-setting__modal\" v-if=\"showQRModal\" @click=\"handleCloseQR\">\n <view class=\"deposit-setting__modal-content\" @click.stop>\n <view class=\"deposit-setting__modal-header\">\n <text class=\"deposit-setting__modal-title\">支付二维码</text>\n <view class=\"deposit-setting__modal-close\" @click=\"handleCloseQR\">\n <image src=\"/static/icons/xmark.svg\" mode=\"aspectFit\" class=\"deposit-setting__modal-close-icon\"></image>\n </view>\n </view>\n <view class=\"deposit-setting__modal-body\">\n <image\n class=\"deposit-setting__modal-qrcode\"\n :src=\"qrCodeSrc || '/static/icons/qrcode.svg'\"\n mode=\"aspectFit\"\n ></image>\n <text class=\"deposit-setting__modal-device\">终端号：{{ qrDeviceNo }}</text>\n <text class=\"deposit-setting__modal-tip\">请使用微信扫描二维码完成支付</text>\n </view>\n </view>\n </view>\n </view>\n</template>\n\n<script>\nexport default {\n name: 'DepositSetting',\n data() {\n return {\n searchKeyword: '',\n showQRModal: false,\n qrCodeSrc: '',\n qrDeviceNo: '',\n records: [\n {\n f主键: 'DS20240513001',\n f用户主键: 10086,\n f代理主Key: 2001,\n f设备号: 'TERM-SH-20240513-001',\n f二维码内容: 'https://pay.example.com/qr/deposit/DS20240513001&#039;,\n f支付商品主键: 3001,\n f创建时间: 1715500800000,\n f支付时间: 1715504400000,\n orderListId: 'ORD20240513001',\n f是否支付: true,\n f押金政策主键: 'POL-DEP-HIGH-001',\n f奖励政策主键: 'POL-REW-001',\n f生成押金主键: 'GEN-DEP-001',\n f生成政策主键: 'GEN-POL-001'\n },\n {\n f主键: 'DS20240513002',\n f用户主键: 10087,\n f代理主键: 2002,\n f设备号: 'TERM-BJ-20240513-002',\n f二维码内容: 'https://pay.example.com/qr/deposit/DS20240513002&#039;,\n f支付商品主键: 3002,\n f创建时间: 1715511600000,\n f支付时间: 0,\n orderListId: 'ORD20240513002',\n f是否支付: false,\n f押金政策主键: 'POL-DEP-STD-002',\n f奖励政策主键: 'POL-REW-002',\n f生成押金主键: 'GEN-DEP-002',\n f生成政策主键: 'GEN-POL-002'\n },\n {\n f主键: 'DS20240513003',\n f用户主键: 10088,\n f代理主键: 2003,\n f设备号: 'TERM-GZ-20240513-003',\n f二维码内容: 'https://pay.example.com/qr/deposit/DS20240513003&#039;,\n f支付商品主键: 3003,\n f创建时间: 1715553600000,\n f支付Time: 1715557200000,\n orderListId: 'ORD20240513003',\n f是否支付: true,\n f押金政策主键: 'POL-DEP-VIP-003',\n f奖励政策主键: 'POL-REW-003',\n f生成押金主键: 'GEN-DEP-003',\n f生成政策主键: 'GEN-POL-003'\n },\n {\n f主键: 'DS20240513004',\n f用户主键: 10089,\n f代理主键: 2004,\n f设备号: 'TERM-SZ-20240513-004',\n f二维码内容: 'https://pay.example.com/qr/deposit/DS20240513004&#039;,\n f支付商品主键: 3004,\n f创建时间: 1715560800000,\n f支付时间: 0,\n orderListId: 'ORD20240513004',\n f是否支付: false,\n f押金政策主键: 'POL-DEP-BASIC-004',\n f奖励政策主键: 'POL-REW-004',\n f生成押金主键: 'GEN-DEP-004',\n f生成政策主键: 'GEN-POL-004'\n }\n ]\n }\n },\n computed: {\n filteredRecords() {\n if (!this.searchKeyword) return this.records\n const keyword = this.searchKeyword.trim().toLowerCase()\n return this.records.filter(item => {\n return (\n (item.f设备号 && item.f设备号.toLowerCase().includes(keyword)) ||\n (item.f主键 && item.f主键.toLowerCase().includes(keyword))\n )\n })\n }\n },\n methods: {\n // 添加押金\n handleAddDeposit() {\n uni.navigateTo({\n url: '/pages/deposit/add-deposit/add-deposit'\n })\n },\n // 搜索\n handleSearch() {\n // computed 已自动过滤，可在此触发额外逻辑\n uni.showToast({\n title: this.filteredRecords.length > 0 ? `搜索到 ${this.filteredRecords.length} 条记录` : '未找到匹配记录',\n icon: 'none',\n duration: 1500\n })\n },\n // 复制终端号\n handleCopy(deviceNo) {\n if (!deviceNo) return\n uni.setClipboardData({\n data: deviceNo,\n success: () => {\n uni.showToast({\n title: '终端号已复制',\n icon: 'success',\n duration: 1500\n })\n }\n })\n },\n // 查看详情\n handleDetail(item) {\n uni.navigateTo({\n url: `/pages/deposit/detail/detail?id=${item.f主键}`\n })\n },\n // 显示支付码\n handleShowQR(item) {\n this.qrDeviceNo = item.f设备号 || ''\n this.qrCodeSrc = item.f二维码内容 || ''\n this.showQRModal = true\n },\n // 关闭支付码弹窗\n handleCloseQR() {\n this.showQRModal = false\n this.qrCodeSrc = ''\n this.qrDeviceNo = ''\n },\n // 格式化金额\n formatAmount(item) {\n // 根据押金政策主键模拟金额显示\n const policyMap = {\n 'POL-DEP-HIGH-001': '50000',\n 'POL-DEP-STD-002': '10000',\n 'POL-DEP-VIP-003': '80000',\n 'POL-DEP-BASIC-004': '5000'\n }\n const amount = policyMap[item.f押金政策主键] || '30000'\n // 转为元显示（分转元）\n return (parseInt(amount) / 100).toFixed(2)\n },\n // 格式化时间\n formatTime(timestamp) {\n if (!timestamp || timestamp === 0) return '未设置'\n const date = new Date(timestamp)\n const y = date.getFullYear()\n const m = String(date.getMonth() + 1).padStart(2, '0')\n const d = String(date.getDate()).padStart(2, '0')\n const h = String(date.getHours()).padStart(2, '0')\n const min = String(date.getMinutes()).padStart(2, '0')\n return `${y}-${m}-${d} ${h}:${min}`\n }\n }\n}\n</script>\n\n<style lang=\"scss\">\n// ==================== 变量定义 ====================\n$color-primary: #FF5722;\n$color-primary-light: #FF7A45;\n$color-primary-dark: #D84315;\n$color-secondary: #FF9800;\n$color-secondary-light: #FFB74D;\n$color-blue: #2979FF;\n$color-blue-light: #4FC3F7;\n$color-green: #00C853;\n$color-green-light: #69F0AE;\n$color-red: #FF1744;\n$color-bg: #F5F6FA;\n$color-card: #FFFFFF;\n$color-text: #1D1D1F;\n$color-text-secondary: #8C8C9A;\n$color-text-light: #B0B0C0;\n$color-divider: #E5E5E5;\n$color-divider-light: #F0F0F5;\n$color-shadow: rgba(255, 87, 34, 0.08);\n$radius-sm: 12rpx;\n$radius-md: 20rpx;\n$radius-lg: 28rpx;\n$radius-xl: 36rpx;\n\n// ==================== 页面容器 ====================\n.deposit-setting {\n min-height: 100vh;\n background: linear-gradient(180deg, #FFF5F0 0%, #F5F6FA 30%, #F5F6FA 100%);\n padding: 0 24rpx 40rpx;\n box-sizing: border-box;\n\n // ==================== 头部 ====================\n &__header {\n padding: 40rpx 8rpx 20rpx;\n\n &-title {\n font-size: 44rpx;\n font-weight: 700;\n color: $color-text;\n line-height: 1.3;\n display: block;\n }\n\n &-sub {\n font-size: 26rpx;\n color: $color-text-secondary;\n margin-top: 8rpx;\n display: block;\n }\n }\n\n // ==================== 添加押金卡片 ====================\n &__add {\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, $color-primary 0%, $color-secondary 100%);\n border-radius: $radius-lg;\n padding: 36rpx 32rpx;\n margin-bottom: 28rpx;\n box-shadow: 0 8rpx 32rpx rgba(255, 87, 34, 0.25);\n position: relative;\n overflow: hidden;\n\n // 装饰光晕\n &::before {\n content: '';\n position: absolute;\n top: -60%;\n right: -20%;\n width: 300rpx;\n height: 300rpx;\n background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n &::after {\n content: '';\n position: absolute;\n bottom: -30%;\n left: -10%;\n width: 200rpx;\n height: 200rpx;\n background: radial-gradient(circle, rgba(255, 152, 0, 0.2) 0%, transparent 70%);\n border-radius: 50%;\n }\n\n &-icon {\n width: 120rpx;\n height: 120rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 28rpx;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 50%;\n position: relative;\n z-index: 1;\n\n &-img {\n width: 64rpx;\n height: 64rpx;\n }\n }\n\n &-info {\n flex: 1;\n position: relative;\n z-index: 1;\n }\n\n &-title {\n font-size: 34rpx;\n font-weight: 700;\n color: #FFFFFF;\n display: block;\n letter-spacing: 1rpx;\n }\n\n &-desc {\n font-size: 24rpx;\n color: rgba(255, 255, 255, 0.85);\n margin-top: 8rpx;\n display: block;\n line-height: 1.4;\n }\n\n &-arrow {\n width: 48rpx;\n height: 48rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-left: 16rpx;\n position: relative;\n z-index: 1;\n\n &-img {\n width: 32rpx;\n height: 32rpx;\n tint: rgba(255, 255, 255, 0.7);\n }\n }\n\n // 点击态\n &:active {\n opacity: 0.95;\n transform: scale(0.98);\n }\n }\n\n // ==================== 搜索表单 ====================\n &__search {\n display: flex;\n align-items: center;\n margin-bottom: 28rpx;\n\n &-input-wrap {\n flex: 1;\n height: 80rpx;\n background: $color-card;\n border-radius: $radius-md;\n display: flex;\n align-items: center;\n padding: 0 24rpx;\n box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);\n border: 2rpx solid transparent;\n transition: border-color 0.2s;\n\n // 聚焦态\n &.active {\n border-color: $color-primary;\n }\n }\n\n &-input-icon {\n width: 32rpx;\n height: 32rpx;\n flex-shrink: 0;\n margin-right: 16rpx;\n }\n\n &-input {\n flex: 1;\n height: 100%;\n font-size: 28rpx;\n color: $color-text;\n background: transparent;\n border: none;\n outline: none;\n }\n\n &-placeholder {\n color: $color-text-light;\n font-size: 28rpx;\n }\n\n &-btn {\n width: 140rpx;\n height: 80rpx;\n background: linear-gradient(135deg, $color-primary 0%, $color-secondary 100%);\n border-radius: $radius-md;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 16rpx;\n flex-shrink: 0;\n box-shadow: 0 4rpx 16rpx rgba(255, 87, 34, 0.25);\n\n &-icon {\n width: 28rpx;\n height: 28rpx;\n margin-right: 8rpx;\n }\n\n &-text {\n font-size: 26rpx;\n font-weight: 600;\n color: #FFFFFF;\n }\n\n &:active {\n opacity: 0.9;\n transform: scale(0.96);\n }\n }\n }\n\n // ==================== 区域标题 ====================\n &__section {\n &-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 8rpx 20rpx;\n }\n\n &-title {\n font-size: 34rpx;\n font-weight: 700;\n color: $color-text;\n }\n\n &-count {\n font-size: 24rpx;\n color: $color-text-secondary;\n }\n }\n\n // ==================== 空状态 ====================\n &__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 100rpx 0;\n\n &-icon {\n width: 160rpx;\n height: 160rpx;\n margin-bottom: 24rpx;\n opacity: 0.3;\n }\n\n &-text {\n font-size: 28rpx;\n color: $color-text-light;\n }\n }\n\n // ==================== 记录卡片 ====================\n &__card {\n background: $color-card;\n border-radius: $radius-md;\n padding: 28rpx 28rpx 24rpx;\n margin-bottom: 24rpx;\n box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);\n border: 2rpx solid rgba(255, 87, 34, 0.06);\n\n // 标题栏\n &-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n &-left {\n display: flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n }\n\n &-device-icon {\n width: 32rpx;\n height: 32rpx;\n flex-shrink: 0;\n margin-right: 12rpx;\n }\n\n &-device {\n font-size: 30rpx;\n font-weight: 600;\n color: $color-text;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &-right {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n margin-left: 16rpx;\n padding: 8rpx 16rpx;\n background: linear-gradient(135deg, rgba($color-blue, 0.08) 0%, rgba($color-blue-light, 0.08) 100%);\n border-radius: $radius-sm;\n border: 2rpx solid rgba($color-blue, 0.12);\n\n &:active {\n opacity: 0.7;\n }\n }\n\n &-copy-icon {\n width: 28rpx;\n height: 28rpx;\n margin-right: 8rpx;\n }\n\n &-copy-text {\n font-size: 24rpx;\n font-weight: 500;\n color: $color-blue;\n }\n }\n\n // 分割线\n &-divider {\n height: 2rpx;\n background: $color-divider;\n margin: 24rpx 0;\n\n &--light {\n background: $color-divider-light;\n margin: 20rpx 0 24rpx;\n }\n }\n\n // 行信息\n &-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10rpx 0;\n }\n\n &-label {\n font-size: 26rpx;\n color: $color-text-secondary;\n flex-shrink: 0;\n }\n\n &-value {\n font-size: 26rpx;\n color: $color-text;\n text-align: right;\n }\n\n &-value-wrap {\n display: flex;\n align-items: baseline;\n }\n\n &-value-amount {\n font-size: 34rpx;\n font-weight: 700;\n color: $color-primary;\n line-height: 1;\n }\n\n &-value-unit {\n font-size: 22rpx;\n color: $color-text-secondary;\n margin-left: 6rpx;\n }\n\n // 支付状态\n &-pay-status {\n display: flex;\n align-items: center;\n padding: 6rpx 20rpx;\n border-radius: 30rpx;\n\n &--paid {\n background: linear-gradient(135deg, rgba($color-green, 0.1) 0%, rgba($color-green-light, 0.1) 100%);\n border: 2rpx solid rgba($color-green, 0.15);\n\n .deposit-setting__card-pay-dot {\n background: $color-green;\n }\n\n .deposit-setting__card-pay-text {\n color: $color-green;\n }\n }\n\n &--unpaid {\n background: linear-gradient(135deg, rgba($color-secondary, 0.08) 0%, rgba($color-primary-light, 0.08) 100%);\n border: 2rpx solid rgba($color-secondary, 0.15);\n\n .deposit-setting__card-pay-dot {\n background: $color-secondary;\n }\n\n .deposit-setting__card-pay-text {\n color: $color-secondary;\n }\n }\n }\n\n &-pay-dot {\n width: 14rpx;\n height: 14rpx;\n border-radius: 50%;\n margin-right: 10rpx;\n flex-shrink: 0;\n }\n\n &-pay-text {\n font-size: 24rpx;\n font-weight: 500;\n }\n\n // 操控栏\n &-actions {\n display: flex;\n justify-content: flex-end;\n gap: 16rpx;\n\n &-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16rpx 28rpx;\n border-radius: $radius-sm;\n font-size: 24rpx;\n font-weight: 500;\n\n &-icon {\n width: 28rpx;\n height: 28rpx;\n margin-right: 10rpx;\n }\n\n &-text {\n font-size: 24rpx;\n font-weight: 500;\n }\n\n // 详情按钮\n &--detail {\n background: linear-gradient(135deg, rgba($color-blue, 0.06) 0%, rgba($color-blue-light, 0.06) 100%);\n border: 2rpx solid rgba($color-blue, 0.12);\n\n .deposit-setting__card-actions-btn-text {\n color: $color-blue;\n }\n\n &:active {\n background: rgba($color-blue, 0.12);\n }\n }\n\n // 查看支付码按钮\n &--qrcode {\n background: linear-gradient(135deg, rgba($color-primary, 0.06) 0%, rgba($color-secondary, 0.06) 100%);\n border: 2rpx solid rgba($color-primary, 0.12);\n\n .deposit-setting__card-actions-btn-text {\n color: $color-primary;\n }\n\n &:active {\n background: rgba($color-primary, 0.12);\n }\n }\n }\n }\n }\n\n // ==================== 支付码弹窗 ====================\n &__modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.55);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 999;\n backdrop-filter: blur(4rpx);\n\n &-content {\n width: 560rpx;\n background: $color-card;\n border-radius: $radius-lg;\n overflow: hidden;\n box-shadow: 0 16rpx 80rpx rgba(0, 0, 0, 0.2);\n }\n\n &-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 28rpx 32rpx;\n border-bottom: 2rpx solid $color-divider-light;\n }\n\n &-title {\n font-size: 32rpx;\n font-weight: 600;\n color: $color-text;\n }\n\n &-close {\n width: 48rpx;\n height: 48rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &-icon {\n width: 32rpx;\n height: 32rpx;\n }\n\n &:active {\n opacity: 0.6;\n }\n }\n\n &-body {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 48rpx 32rpx 40rpx;\n }\n\n &-qrcode {\n width: 320rpx;\n height: 320rpx;\n margin-bottom: 28rpx;\n border: 4rpx solid $color-divider-light;\n border-radius: $radius-sm;\n padding: 16rpx;\n }\n\n &-device {\n font-size: 26rpx;\n color: $color-text;\n font-weight: 500;\n margin-bottom: 12rpx;\n }\n\n &-tip {\n font-size: 24rpx;\n color: $color-text-secondary;\n text-align: center;\n }\n }\n}\n\n// ==================== 动画 ====================\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: scale(0.92);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.deposit-setting__modal-content {\n animation: fadeIn 0.25s ease-out;\n}\n</style>"
},
"next": [
"添加图标占位检查",
"支付码弹窗可关闭",
"搜索逻辑已集成",
"复制功能已绑定",
"样式适配小程序"
],
"breakpoint": "xs"
}
```