diff --git a/app/api/admin/withdrawals/route.ts b/app/api/admin/withdrawals/route.ts index 70347f1c..d3fbe63f 100644 --- a/app/api/admin/withdrawals/route.ts +++ b/app/api/admin/withdrawals/route.ts @@ -1,48 +1,45 @@ /** - * 后台提现管理 API - SQL 调试版 + * 后台提现 API + * GET: 查提现记录。PUT: 查库 + 更新提现状态 + 更新用户已提现金额（当前未接入微信打款） */ import { NextResponse } from 'next/server' import { query } from '@/lib/db' import { requireAdminResponse } from '@/lib/admin-auth' -export async function GET(request: Request) { - console.log('[Withdrawals Debug] ===== SQL Query Version Started =====') - - try { - // 1. 权限检查 - console.log('[Withdrawals Debug] 1. Checking Auth') - const authErr = requireAdminResponse(request) - if (authErr) { - console.log('[Withdrawals Debug] Auth Failed') - return authErr - } +/** 安全转数组，避免 undefined.length；绝不返回 undefined */ +function toArray(x: unknown): T[] { + if (x == null) return [] + if (Array.isArray(x)) return x as T[] + if (typeof x === 'object' && x !== null) return [x] as T[] + return [] +} + +/** 安全取数组长度，避免对 undefined 读 .length */ +function safeLength(x: unknown): number { + if (x == null) return 0 + if (Array.isArray(x)) return x.length + return 0 +} + +// ========== GET：只查提现记录 ========== +export async function GET(request: Request) { + console.log('[Withdrawals] GET 开始') + try { + const authErr = requireAdminResponse(request) + if (authErr) return authErr - // 2. 执行 SQL - console.log('[Withdrawals Debug] 2. Executing SQL Join') const sql = ` SELECT - w.id, - w.user_id, - w.amount, - w.status, - w.created_at, - u.nickname as user_nickname, - u.avatar as user_avatar + w.id, w.user_id, w.amount, w.status, w.created_at, + u.nickname as user_nickname, u.avatar as user_avatar FROM withdrawals w LEFT JOIN users u ON w.user_id = u.id ORDER BY w.created_at DESC LIMIT 100 ` - const result = await query(sql) - console.log('[Withdrawals Debug] result type:', typeof result) - console.log('[Withdrawals Debug] is array:', Array.isArray(result)) + const rows = toArray(result) - // 3. 安全转数组 - const rows = Array.isArray(result) ? result : (result ? [result] : []) - console.log('[Withdrawals Debug] count after safety conversion:', rows.length) - - // 4. 映射字段 (对应前端需要的 user_name, amount, status) const withdrawals = rows.map((w: any) => ({ id: w.id, user_id: w.user_id, @@ -51,134 +48,95 @@ export async function GET(request: Request) { amount: parseFloat(w.amount) || 0, status: w.status === 'success' ? 'completed' : (w.status === 'failed' ? 'rejected' : w.status), created_at: w.created_at, - method: 'wechat' // 默认值 + method: 'wechat', })) - console.log('[Withdrawals Debug] 3. Success, returning rows:', withdrawals.length) return NextResponse.json({ success: true, withdrawals, - stats: { total: withdrawals.length } + stats: { total: safeLength(withdrawals) }, }) - } catch (error: any) { - console.error('[Withdrawals Debug] !!! SQL Version Crashed !!!') - console.error('[Withdrawals Debug] Error Msg:', error.message) - + console.error('[Withdrawals] GET 失败:', error?.message) return NextResponse.json( - { - success: false, - error: 'SQL版崩溃: ' + error.message, - stack: error.stack - }, + { success: false, error: '获取提现记录失败: ' + (error?.message || String(error)) }, { status: 500 } ) } } +// ========== PUT：查库 + 更新状态 + 更新用户已提现，暂不调用微信打款 ========== export async function PUT(request: Request) { - const authErr = requireAdminResponse(request) - if (authErr) return authErr - + const STEP = '[Withdrawals PUT]' try { + console.log(STEP, '1. 开始') + const authErr = requireAdminResponse(request) + if (authErr) return authErr + console.log(STEP, '2. 鉴权通过') + const body = await request.json() - const { id, action, errorMessage, reason } = body - const rejectReason = errorMessage || reason || '管理员拒绝' + console.log(STEP, '3. body 已解析', typeof body, body ? 'ok' : 'null') + const id = body?.id + const action = body?.action + const rejectReason = body?.errorMessage || body?.reason || '管理员拒绝' if (!id || !action) { - return NextResponse.json({ success: false, error: '缺少参数 id 或 action' }, { status: 400 }) + return NextResponse.json({ success: false, error: '缺少 id 或 action' }, { status: 400 }) } + console.log(STEP, '4. id/action 有效', id, action) - // 1. 查询该提现单 - const result = await query(`SELECT * FROM withdrawals WHERE id = ?`, [id]) + console.log(STEP, '5. 即将 query SELECT') + const result = await query('SELECT * FROM withdrawals WHERE id = ?', [id]) + console.log(STEP, '6. query 返回', typeof result, 'length=', safeLength(result)) const rows = toArray(result) - - if (rows.length === 0) { + console.log(STEP, '7. toArray 后 length=', safeLength(rows)) + if (safeLength(rows) === 0) { return NextResponse.json({ success: false, error: '提现记录不存在' }, { status: 404 }) } + console.log(STEP, '8. 有记录') - const withdrawal = rows[0] - if (withdrawal.status !== 'pending') { + const row = rows[0] + console.log(STEP, '9. row', row ? 'ok' : 'null') + if (row.status !== 'pending') { return NextResponse.json({ success: false, error: '该记录已处理，不可重复审批' }, { status: 400 }) } + console.log(STEP, '10. 状态 pending') - const amount = parseFloat(withdrawal.amount) || 0 - const userId = withdrawal.user_id - const openid = withdrawal.wechat_openid + const amount = parseFloat(String(row.amount ?? 0)) || 0 + const userId = String(row.user_id ?? '') + console.log(STEP, '11. amount/userId', amount, userId) if (action === 'approve') { - // --- 真正的微信打款逻辑 --- - - if (openid && amount > 0) { - console.log(`[Withdrawals] 准备发起微信转账: OpenID=${openid}, 金额=${amount}`) - - try { - // 1. 调用微信转账接口 (单位为分) - const transferResult = await createTransfer({ - openid: openid, - amountFen: Math.round(amount * 100), - outDetailNo: id, - transferRemark: '佣金提现', - }) - - if (transferResult.success) { - // 2. 微信转账发起成功 (状态可能为 processing 或 success) - // 更新提现表，记录微信返回的单号 - await query( - `UPDATE withdrawals SET status = 'processing', transaction_id = ? WHERE id = ?`, - [transferResult.batchId || transferResult.outBatchNo || `wx_${Date.now()}`, id] - ) - - return NextResponse.json({ - success: true, - message: '微信转账已发起，请稍后在零钱查看' - }) - } else { - // 微信接口返回明确失败 - console.error('[Withdrawals] 微信转账失败:', transferResult.errorMessage) - return NextResponse.json({ - success: false, - error: `微信转账失败: ${transferResult.errorMessage || '请检查微信支付商户后台'}` - }, { status: 400 }) - } - } catch (transferErr: any) { - console.error('[Withdrawals] 调用微信接口异常:', transferErr) - return NextResponse.json({ - success: false, - error: '调用微信支付接口异常，请检查证书配置' - }, { status: 500 }) - } - } - - // --- 如果没有 OpenID，回退到线下手动打款逻辑 --- + console.log(STEP, '12. 执行 approve UPDATE withdrawals') await query( `UPDATE withdrawals SET status = 'success', processed_at = NOW(), transaction_id = ? WHERE id = ?`, [`manual_${Date.now()}`, id] ) + console.log(STEP, '13. 执行 approve UPDATE users') await query( `UPDATE users SET withdrawn_earnings = COALESCE(withdrawn_earnings, 0) + ? WHERE id = ?`, [amount, userId] ) - return NextResponse.json({ success: true, message: 'OpenID缺失，已标记为线下手动打款' }) + console.log(STEP, '14. 批准完成') + return NextResponse.json({ success: true, message: '已批准，已更新提现状态与用户已提现金额（未发起微信打款）' }) } if (action === 'reject') { - // --- 拒绝逻辑 --- + console.log(STEP, '15. 执行 reject UPDATE') await query( `UPDATE withdrawals SET status = 'failed', processed_at = NOW(), error_message = ? WHERE id = ?`, [rejectReason, id] ) - - console.log(`[Withdrawals] 提现拒绝: ID=${id}, 原因=${rejectReason}`) + console.log(STEP, '16. 拒绝完成') return NextResponse.json({ success: true, message: '已拒绝该提现申请' }) } - return NextResponse.json({ success: false, error: '无效的 action 类型' }, { status: 400 }) - + return NextResponse.json({ success: false, error: '无效的 action' }, { status: 400 }) } catch (error: any) { - console.error('[Withdrawals] PUT 处理失败:', error.message) + console.error(STEP, '!!! 崩溃 !!!', error?.message) + console.error(STEP, '堆栈:', error?.stack) return NextResponse.json( - { success: false, error: '审批操作失败: ' + error.message }, + { success: false, error: '审批操作失败: ' + (error?.message || String(error)) }, { status: 500 } ) } diff --git a/devlop.py b/devlop.py index 4fc9cbd7..5219b34d 100644 --- a/devlop.py +++ b/devlop.py @@ -37,7 +37,7 @@ except ImportError: # 端口统一从环境变量 DEPLOY_PORT 读取，未设置时使用此默认值（需与 Nginx proxy_pass、ecosystem.config.cjs 一致） DEPLOY_PM2_APP = "soul" DEFAULT_DEPLOY_PORT = 3006 -DEPLOY_PROJECT_PATH = "/www/wwwroot/soul" +DEPLOY_PROJECT_PATH = "/www/wwwroot/自营/soul" DEPLOY_SITE_URL = "https://soul.quwanzhi.com" # SSH 端口（支持环境变量 DEPLOY_SSH_PORT，未设置时默认为 22022） DEFAULT_SSH_PORT = int(os.environ.get("DEPLOY_SSH_PORT", "22022")) @@ -65,7 +65,7 @@ def get_cfg_devlop(): 实际运行目录为 dist_path（切换后新版本在 dist），宝塔 PM2 项目路径必须指向 dist_path， 否则会从错误目录启动导致 .next/static 等静态资源 404。""" cfg = get_cfg().copy() - cfg["base_path"] = os.environ.get("DEVOP_BASE_PATH", "/www/wwwroot/soul") + cfg["base_path"] = os.environ.get("DEVOP_BASE_PATH", DEPLOY_PROJECT_PATH) cfg["dist_path"] = cfg["base_path"] + "/dist" cfg["dist2_path"] = cfg["base_path"] + "/dist2" return cfg diff --git a/lib/admin-auth.ts b/lib/admin-auth.ts index 3d476249..78c10e26 100644 --- a/lib/admin-auth.ts +++ b/lib/admin-auth.ts @@ -43,6 +43,7 @@ export function verifyAdminToken(token: string | null | undefined): boolean { const exp = parseInt(payload, 10) if (Number.isNaN(exp) || exp < Math.floor(Date.now() / 1000)) return false const expected = sign(payload) + if (typeof expected !== 'string' || typeof sig !== 'string') return false if (sig.length !== expected.length) return false try { return timingSafeEqual(Buffer.from(sig, 'base64url'), Buffer.from(expected, 'base64url')) diff --git a/lib/db.ts b/lib/db.ts index 33eae465..5f5a09ff 100644 --- a/lib/db.ts +++ b/lib/db.ts @@ -61,8 +61,12 @@ export async function query(sql: string, params?: any[]) { if (!connection) { throw new Error('数据库未配置或已跳过 (SKIP_DB)') } + // mysql2 内部会读 params.length，不能传 undefined + const safeParams = Array.isArray(params) ? params : [] + console.log('[DB Query] SQL:', sql.slice(0, 100)) + console.log('[DB Query] Params Type:', typeof params, '| Is Array:', Array.isArray(params), '| safeParams:', safeParams) try { - const [results] = await connection.execute(sql, params) + const [results] = await connection.execute(sql, safeParams) // 确保调用方拿到的始终是数组，避免 undefined.length 报错 if (Array.isArray(results)) return results if (results != null) return [results] diff --git a/miniprogram/pages/my/my.js b/miniprogram/pages/my/my.js index 262aab7c..819e6db7 100644 --- a/miniprogram/pages/my/my.js +++ b/miniprogram/pages/my/my.js @@ -98,7 +98,7 @@ Page({ // 初始化用户状态 initUserStatus() { - const { isLoggedIn, userInfo, hasFullBook, purchasedSections } = app.globalData + const { isLoggedIn, userInfo } = app.globalData if (isLoggedIn && userInfo) { const readIds = app.globalData.readSectionIds || [] @@ -107,17 +107,11 @@ Page({ title: `章节 ${id}` })) - // 截短用户ID显示 const userId = userInfo.id || '' const userIdShort = userId.length > 20 ? userId.slice(0, 10) + '...' + userId.slice(-6) : userId - - // 获取微信号（优先显示） const userWechat = wx.getStorageSync('user_wechat') || userInfo.wechat || '' - // 格式化收益金额（保留两位小数） - const earnings = Number(userInfo.earnings || 0) - const pendingEarnings = Number(userInfo.pendingEarnings || 0) - + // 先设基础信息；收益数据由 loadReferralEarnings 从推广中心同源接口拉取并覆盖 this.setData({ isLoggedIn: true, userInfo, @@ -125,11 +119,12 @@ Page({ userWechat, readCount: Math.min(app.getReadCount(), this.data.totalSections || 62), referralCount: userInfo.referralCount || 0, - earnings: earnings.toFixed(2), - pendingEarnings: pendingEarnings.toFixed(2), + earnings: '0.00', + pendingEarnings: '0.00', recentChapters: recentList, totalReadTime: Math.floor(Math.random() * 200) + 50 }) + this.loadReferralEarnings() } else { this.setData({ isLoggedIn: false, @@ -143,6 +138,33 @@ Page({ }) } }, + + // 从与推广中心相同的接口拉取收益数据并更新展示（累计收益 = totalCommission，可提现 = 累计-已提现-待审核） + async loadReferralEarnings() { + const userInfo = app.globalData.userInfo + if (!app.globalData.isLoggedIn || !userInfo || !userInfo.id) return + + const formatMoney = (num) => (typeof num === 'number' ? num.toFixed(2) : '0.00') + + try { + const res = await app.request('/api/referral/data?userId=' + userInfo.id) + if (!res || !res.success || !res.data) return + + const d = res.data + const totalCommissionNum = d.totalCommission || 0 + const withdrawnNum = d.withdrawnEarnings || 0 + const pendingWithdrawNum = d.pendingWithdrawAmount || 0 + const availableEarningsNum = totalCommissionNum - withdrawnNum - pendingWithdrawNum + + this.setData({ + earnings: formatMoney(totalCommissionNum), + pendingEarnings: formatMoney(availableEarningsNum), + referralCount: d.referralCount || d.stats?.totalBindings || this.data.referralCount + }) + } catch (e) { + console.log('[My] 拉取推广收益失败:', e && e.message) + } + }, // 微信原生获取头像（button open-type="chooseAvatar" 回调） async onChooseAvatar(e) { diff --git a/miniprogram/pages/my/my.wxml b/miniprogram/pages/my/my.wxml index 82dea2ba..5895e8c2 100644 --- a/miniprogram/pages/my/my.wxml +++ b/miniprogram/pages/my/my.wxml @@ -64,7 +64,7 @@ 推荐好友 - {{earnings > 0 ? '¥' + earnings : '--'}} + {{pendingEarnings > 0 ? '¥' + pendingEarnings : '--'}} 待领收益 diff --git a/miniprogram/pages/referral/referral.wxss b/miniprogram/pages/referral/referral.wxss index 85bf6ac7..73ee15a7 100644 --- a/miniprogram/pages/referral/referral.wxss +++ b/miniprogram/pages/referral/referral.wxss @@ -1,549 +1,300 @@ -/* ???????? - 1:1??Web?? */ -.page { min-height: 100vh; background: #000; padding-bottom: 64rpx; } - -/* ??? */ -.nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0,0,0,0.9); backdrop-filter: blur(40rpx); display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; height: 88rpx; } -.nav-left { display: flex; gap: 16rpx; align-items: center; } -.nav-back { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; } -.nav-icon { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); } -.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; flex: 1; text-align: center; } -.nav-right-placeholder { width: 144rpx; } -.nav-btn { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; } - -.content { padding: 24rpx; width: 100%; box-sizing: border-box; } - -/* ?????? */ -.expiring-banner { display: flex; align-items: center; gap: 24rpx; padding: 24rpx; background: rgba(255,165,0,0.1); border: 2rpx solid rgba(255,165,0,0.3); border-radius: 24rpx; margin-bottom: 24rpx; } -.banner-icon { width: 80rpx; height: 80rpx; background: rgba(255,165,0,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } -.icon-bell-warning { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(64%) sepia(89%) saturate(1363%) hue-rotate(4deg) brightness(101%) contrast(102%); } -.banner-content { flex: 1; } -.banner-title { font-size: 28rpx; font-weight: 500; color: #fff; display: block; } -.banner-desc { font-size: 24rpx; color: rgba(255,165,0,0.8); margin-top: 4rpx; display: block; } - -/* ???? - ?? Next.js */ -.earnings-card { position: relative; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 48rpx; margin-bottom: 24rpx; overflow: hidden; width: 100%; box-sizing: border-box; } -.earnings-bg { position: absolute; top: 0; right: 0; width: 256rpx; height: 256rpx; background: rgba(0,206,209,0.15); border-radius: 50%; filter: blur(100rpx); } -.earnings-main { position: relative; } -.earnings-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32rpx; } -.earnings-left { display: flex; align-items: center; gap: 16rpx; } -.wallet-icon { width: 80rpx; height: 80rpx; background: rgba(0,206,209,0.2); border-radius: 20rpx; display: flex; align-items: center; justify-content: center; } -.icon-wallet { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); } -.earnings-info { display: flex; flex-direction: column; gap: 8rpx; } -.earnings-label { font-size: 24rpx; color: rgba(255,255,255,0.6); } -.commission-rate { font-size: 24rpx; color: #00CED1; font-weight: 500; } -.earnings-right { text-align: right; } -.earnings-value { font-size: 60rpx; font-weight: 700; color: #fff; display: block; line-height: 1; } -.pending-text { font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 8rpx; display: block; } - -.withdraw-btn { padding: 28rpx; background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); color: #fff; font-size: 32rpx; font-weight: 600; text-align: center; border-radius: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,206,209,0.3); } -.withdraw-btn.btn-disabled { background: rgba(0,206,209,0.2); color: rgba(255,255,255,0.3); box-shadow: none; } - -/* ???? - ?? Next.js 4??? */ -.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } -.stat-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; padding: 24rpx 12rpx; text-align: center; } -.stat-value { font-size: 40rpx; font-weight: 700; color: #fff; display: block; } -.stat-value.orange { color: #FFA500; } -.stat-label { font-size: 20rpx; color: rgba(255,255,255,0.6); margin-top: 8rpx; display: block; } - -/* ????? */ -.visit-stat { display: flex; align-items: center; justify-content: center; gap: 12rpx; padding: 20rpx 32rpx; background: rgba(255,255,255,0.05); border-radius: 16rpx; margin-bottom: 24rpx; } -.visit-label { font-size: 24rpx; color: rgba(255,255,255,0.5); } -.visit-value { font-size: 32rpx; font-weight: 700; color: #00CED1; } -.visit-tip { font-size: 24rpx; color: rgba(255,255,255,0.5); } - -/* ???? - ?? Next.js */ -.rules-card { background: rgba(0,206,209,0.05); border: 2rpx solid rgba(0,206,209,0.2); border-radius: 24rpx; padding: 32rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } -.rules-header { display: flex; align-items: center; gap: 16rpx; margin-bottom: 16rpx; } -.rules-icon { width: 64rpx; height: 64rpx; background: rgba(0,206,209,0.2); border-radius: 16rpx; display: flex; align-items: center; justify-content: center; } -.icon-alert { width: 32rpx; height: 32rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); } -.rules-title { font-size: 28rpx; font-weight: 500; color: #fff; } -.rules-list { padding-left: 8rpx; } -.rule-item { font-size: 24rpx; color: rgba(255,255,255,0.6); line-height: 2; display: block; margin-bottom: 4rpx; } -.rule-item .gold { color: #FFD700; font-weight: 500; } -.rule-item .brand { color: #00CED1; font-weight: 500; } -.rule-item .orange { color: #FFA500; font-weight: 500; } - -/* ?????? - ?? Next.js */ -.binding-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } -.binding-header { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); } -.binding-title { display: flex; align-items: center; gap: 12rpx; } -.binding-icon-img { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); } -.title-text { font-size: 30rpx; font-weight: 600; color: #fff; } -.binding-count { font-size: 26rpx; color: rgba(255,255,255,0.5); } -.toggle-icon { font-size: 24rpx; color: rgba(255,255,255,0.5); } - -/* Tab?? */ -.binding-tabs { display: flex; border-bottom: 2rpx solid rgba(255,255,255,0.05); } -.tab-item { flex: 1; padding: 24rpx 0; text-align: center; font-size: 26rpx; color: rgba(255,255,255,0.5); position: relative; } -.tab-item.tab-active { color: #00CED1; } -.tab-item.tab-active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80rpx; height: 4rpx; background: #00CED1; border-radius: 4rpx; } - -/* ???? */ -.binding-list { max-height: 640rpx; overflow-y: auto; } -.empty-state { padding: 80rpx 0; text-align: center; } -.empty-icon { font-size: 64rpx; display: block; margin-bottom: 16rpx; } -.empty-text { font-size: 26rpx; color: rgba(255,255,255,0.5); } - -/* ?????? - ??? */ -.binding-item { display: flex; align-items: center; padding: 24rpx 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); gap: 24rpx; } -.binding-item:last-child { border-bottom: none; } - -/* ?? */ -.user-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 600; color: #00CED1; flex-shrink: 0; } -.user-avatar.avatar-converted { background: rgba(76,175,80,0.2); color: #4CAF50; } -.user-avatar.avatar-expired { background: rgba(158,158,158,0.2); color: #9E9E9E; } - -/* ???? */ -.user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4rpx; } -.user-name { font-size: 28rpx; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.user-time { font-size: 22rpx; color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - -/* ???? */ -.user-status { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4rpx; min-width: 100rpx; } -.status-amount { font-size: 28rpx; color: #4CAF50; font-weight: 600; white-space: nowrap; } -.status-order { font-size: 20rpx; color: rgba(255,255,255,0.5); white-space: nowrap; } -.status-time { font-size: 20rpx; color: rgba(255,255,255,0.5); white-space: nowrap; } - -/* ???? */ -.status-tag { font-size: 24rpx; font-weight: 600; padding: 6rpx 16rpx; border-radius: 16rpx; white-space: nowrap; } -.status-tag.tag-green { background: rgba(76,175,80,0.2); color: #4CAF50; } -.status-tag.tag-orange { background: rgba(255,165,0,0.2); color: #FFA500; } -.status-tag.tag-red { background: rgba(244,67,54,0.2); color: #F44336; } -.status-tag.tag-gray { background: rgba(158,158,158,0.2); color: #9E9E9E; } - -/* ????? - ?? Next.js */ -.invite-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 40rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } -.invite-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; } -.invite-title { font-size: 30rpx; font-weight: 600; color: #fff; } -.invite-code-box { background: rgba(0,206,209,0.2); padding: 12rpx 24rpx; border-radius: 16rpx; } -.invite-code { font-size: 28rpx; font-weight: 600; color: #00CED1; font-family: 'Courier New', monospace; letter-spacing: 2rpx; } -.invite-tip { font-size: 24rpx; color: rgba(255,255,255,0.6); line-height: 1.5; display: block; } -.invite-tip .gold { color: #FFD700; } -.invite-tip .brand { color: #00CED1; } - -/* ?????? - ??? */ -.earnings-detail-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } -.detail-header { padding: 40rpx 40rpx 24rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); } -.detail-title { font-size: 30rpx; font-weight: 600; color: #fff; } -.detail-list { max-height: 480rpx; overflow-y: auto; padding: 16rpx 0; } - -/* ??????? */ -.earnings-detail-card .detail-item { display: flex; align-items: center; gap: 24rpx; padding: 24rpx 40rpx; background: transparent; border-bottom: 2rpx solid rgba(255,255,255,0.03); } -.earnings-detail-card .detail-item:last-child { border-bottom: none; } -.earnings-detail-card .detail-item:active { background: rgba(255, 255, 255, 0.05); } - -/* ???? */ -.earnings-detail-card .detail-avatar-wrap { width: 88rpx; height: 88rpx; flex-shrink: 0; } -.earnings-detail-card .detail-avatar { width: 100%; height: 100%; border-radius: 50%; border: 2rpx solid rgba(56, 189, 172, 0.2); } -.earnings-detail-card .detail-avatar-text { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #38bdac 0%, #2da396 100%); display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 700; color: #ffffff; } - -/* ???? */ -.earnings-detail-card .detail-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; } -.earnings-detail-card .detail-top { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; } -.earnings-detail-card .detail-buyer { font-size: 28rpx; font-weight: 500; color: #ffffff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.earnings-detail-card .detail-amount { font-size: 32rpx; font-weight: 700; color: #38bdac; flex-shrink: 0; white-space: nowrap; } - -/* ???? */ -.earnings-detail-card .detail-product { display: flex; align-items: baseline; gap: 4rpx; font-size: 24rpx; color: rgba(255, 255, 255, 0.6); min-width: 0; overflow: hidden; } -.earnings-detail-card .detail-book { color: rgba(255, 255, 255, 0.7); font-weight: 500; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.earnings-detail-card .detail-chapter { color: rgba(255, 255, 255, 0.5); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.earnings-detail-card .detail-time { font-size: 22rpx; color: rgba(255, 255, 255, 0.4); } - -/* ???? - ?? Next.js */ -.share-section { display: flex; flex-direction: column; gap: 12rpx; width: 100%; margin-bottom: 24rpx; } -.share-item { display: flex; align-items: center; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; padding: 32rpx; border: none; margin: 0; text-align: left; width: 100%; box-sizing: border-box; } -.share-item::after { border: none; } -.share-icon { width: 96rpx; height: 96rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 24rpx; flex-shrink: 0; } -.share-icon.poster { background: rgba(103,58,183,0.2); } -.share-icon.wechat { background: rgba(7,193,96,0.2); } -.share-icon.link { background: rgba(158,158,158,0.2); } -.icon-share-btn { width: 48rpx; height: 48rpx; display: block; } -.share-icon.poster .icon-share-btn { filter: brightness(0) saturate(100%) invert(37%) sepia(73%) saturate(2296%) hue-rotate(252deg) brightness(96%) contrast(92%); } -.share-icon.wechat .icon-share-btn { filter: brightness(0) saturate(100%) invert(58%) sepia(91%) saturate(1255%) hue-rotate(105deg) brightness(96%) contrast(97%); } -.share-icon.link .icon-share-btn { filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); } -.share-info { flex: 1; text-align: left; } -.share-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; text-align: left; } -.share-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; text-align: left; } -.share-arrow-icon { width: 40rpx; height: 40rpx; display: block; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); } -.share-btn-wechat { line-height: normal; font-size: inherit; padding: 24rpx 32rpx !important; margin: 0 !important; width: 100% !important; } - -/* ?????????????? + ???? + ???????? */ -/* ???????? backdrop-filter??????????????? */ -.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 32rpx; box-sizing: border-box; } - -.poster-dialog { width: 686rpx; border-radius: 24rpx; overflow: hidden; position: relative; background: transparent; } -.poster-close { position: absolute; top: 20rpx; right: 20rpx; width: 56rpx; height: 56rpx; border-radius: 28rpx; background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 28rpx; } - -/* ???? */ -.poster-card { position: relative; background: linear-gradient(135deg, #0a1628 0%, #0f2137 50%, #1a3a5c 100%); color: #fff; padding: 44rpx 40rpx 36rpx; } -.poster-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; } - -/* ???? */ -/* ???????? filter: blur ??????????????? + ???? */ -.poster-glow { position: absolute; width: 320rpx; height: 320rpx; border-radius: 50%; opacity: 0.6; z-index: 1; } -.poster-glow-left { top: -120rpx; left: -160rpx; background: rgba(0,206,209,0.12); box-shadow: 0 0 140rpx 40rpx rgba(0,206,209,0.18); } -.poster-glow-right { bottom: -140rpx; right: -160rpx; background: rgba(255,215,0,0.10); box-shadow: 0 0 160rpx 50rpx rgba(255,215,0,0.14); } -.poster-ring { position: absolute; width: 520rpx; height: 520rpx; border-radius: 50%; border: 2rpx solid rgba(0,206,209,0.06); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; } - -/* ???? */ -.poster-badges { display: flex; gap: 16rpx; margin-bottom: 24rpx; } -.poster-badge { padding: 10rpx 22rpx; font-size: 20rpx; font-weight: 700; border-radius: 999rpx; border: 2rpx solid transparent; } -.poster-badge-gold { background: rgba(255,215,0,0.18); color: #FFD700; border-color: rgba(255,215,0,0.28); } -.poster-badge-brand { background: rgba(0,206,209,0.18); color: #00CED1; border-color: rgba(0,206,209,0.28); } - -/* ?? */ -.poster-title { margin-bottom: 8rpx; } -.poster-title-line1 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #00CED1; } -.poster-title-line2 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #fff; margin-top: 6rpx; } -.poster-subtitle { display: block; font-size: 22rpx; color: rgba(255,255,255,0.6); margin-bottom: 28rpx; } - -/* ???? */ -.poster-stats { width: 100%; display: flex; gap: 16rpx; justify-content: center; margin-bottom: 24rpx; } -.poster-stat { flex: 1; max-width: 190rpx; background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 16rpx; padding: 18rpx 10rpx; } -.poster-stat-value { display: block; font-size: 44rpx; font-weight: 900; line-height: 1; } -.poster-stat-label { display: block; font-size: 20rpx; color: rgba(255,255,255,0.5); margin-top: 8rpx; } -.poster-stat-gold { color: #FFD700; } -.poster-stat-brand { color: #00CED1; } -.poster-stat-pink { color: #E91E63; } - -/* ?? */ -.poster-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10rpx; margin: 0 24rpx 26rpx; } -.poster-tag { font-size: 20rpx; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 12rpx; padding: 6rpx 14rpx; } - -/* ??? */ -.poster-recommender { display: flex; align-items: center; gap: 12rpx; background: rgba(0,206,209,0.10); border: 2rpx solid rgba(0,206,209,0.20); border-radius: 999rpx; padding: 12rpx 22rpx; margin-bottom: 22rpx; } -.poster-avatar { width: 44rpx; height: 44rpx; border-radius: 22rpx; background: rgba(0,206,209,0.30); display: flex; align-items: center; justify-content: center; } -.poster-avatar-text { font-size: 20rpx; font-weight: 800; color: #00CED1; } -.poster-recommender-text { font-size: 22rpx; color: #00CED1; } - -/* ??? */ -.poster-discount { width: 100%; background: linear-gradient(90deg, rgba(255,215,0,0.10) 0%, rgba(233,30,99,0.10) 100%); border: 2rpx solid rgba(255,215,0,0.20); border-radius: 18rpx; padding: 18rpx 18rpx; margin-bottom: 26rpx; } -.poster-discount-text { font-size: 22rpx; color: rgba(255,255,255,0.80); } -.poster-discount-highlight { color: #00CED1; font-weight: 800; } - -/* ??? */ -.poster-qr-wrap { background: #fff; padding: 14rpx; border-radius: 16rpx; margin-bottom: 12rpx; box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.35); } -.poster-qr-img { width: 240rpx; height: 240rpx; display: block; } -.poster-qr-tip { font-size: 20rpx; color: rgba(255,255,255,0.40); margin-bottom: 8rpx; } -.poster-code { font-size: 22rpx; font-family: monospace; letter-spacing: 2rpx; color: rgba(0,206,209,0.80); } - -/* ??????? */ -.poster-footer { background: #fff; padding: 28rpx 28rpx 32rpx; display: flex; flex-direction: column; gap: 18rpx; } -.poster-footer-tip { font-size: 22rpx; color: rgba(0,0,0,0.55); text-align: center; } -.poster-footer-btn { height: 72rpx; border-radius: 18rpx; border: 2rpx solid rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: rgba(0,0,0,0.75); background: #fff; } - - - -/* ????- ?? Next.js */ -.empty-earnings { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 64rpx 40rpx; text-align: center; margin-bottom: 24rpx; } -.empty-icon-wrapper { width: 128rpx; height: 128rpx; border-radius: 50%; background: rgba(28, 28, 30, 0.8); display: flex; align-items: center; justify-content: center; margin: 0 auto 32rpx; } -.empty-gift-icon { width: 64rpx; height: 64rpx; display: block; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); } -.empty-title { font-size: 30rpx; font-weight: 500; color: #fff; display: block; margin-bottom: 16rpx; } -.empty-desc { font-size: 26rpx; color: rgba(255,255,255,0.6); display: block; line-height: 1.5; } - - - - -/* ===== T??rGm?5?? ?===== */ - -.loading-overlay { - - position: fixed; - - top: 0; - - left: 0; - - right: 0; - - bottom: 0; - - background: rgba(0, 0, 0, 0.7); - - backdrop-filter: blur(10rpx); - - z-index: 999; - - display: flex; - - align-items: center; - - justify-content: center; - -} - - - -.loading-content { - - display: flex; - - flex-direction: column; - - align-items: center; - - gap: 24rpx; - -} - - - -.loading-spinner { - - width: 80rpx; - - height: 80rpx; - - border: 6rpx solid rgba(56, 189, 172, 0.2); - - border-top-color: #38bdac; - - border-radius: 50%; - - animation: spin 1s linear infinite; - -} - - - -@keyframes spin { - - 0% { transform: rotate(0deg); } - - 100% { transform: rotate(360deg); } - -} - - - -.loading-text { - - font-size: 28rpx; - - color: rgba(255, 255, 255, 0.8); - - font-weight: 500; - -} - - - -.content-loading { - - opacity: 0.3; - - pointer-events: none; - -} - - - -/* ===== ??AR?l??^?|?o?p?]??\!} ===== */ - -.detail-item { - - display: flex; - - align-items: center; - - gap: 24rpx; - - padding: 24rpx; - - background: rgba(255, 255, 255, 0.02); - - border-radius: 16rpx; - - margin-bottom: 16rpx; - - transition: all 0.3s; - -} - - - -.detail-item:active { - - background: rgba(255, 255, 255, 0.05); - -} - - - -.detail-avatar-wrap { - - flex-shrink: 0; - -} - - - -.detail-avatar { - - width: 88rpx; - - height: 88rpx; - - border-radius: 50%; - - border: 2rpx solid rgba(56, 189, 172, 0.2); - -} - - - -.detail-avatar-text { - - width: 88rpx; - - height: 88rpx; - - border-radius: 50%; - - background: linear-gradient(135deg, #38bdac 0%, #2da396 100%); - - display: flex; - - align-items: center; - - justify-content: center; - - font-size: 36rpx; - - font-weight: 700; - - color: #ffffff; - -} - - - -.detail-content { - - flex: 1; - - display: flex; - - flex-direction: column; - - gap: 8rpx; - - min-width: 0; - -} - - - -.detail-top { - - display: flex; - - align-items: center; - - justify-content: space-between; - - gap: 16rpx; - -} - - - -.detail-buyer { - - font-size: 28rpx; - - font-weight: 500; - - color: #ffffff; - - flex-shrink: 0; - -} - - - -.detail-amount { - - font-size: 32rpx; - - font-weight: 700; - - color: #38bdac; - - flex-shrink: 0; - -} - - - -.detail-product { - - display: flex; - - align-items: center; - - font-size: 24rpx; - - color: rgba(255, 255, 255, 0.6); - - overflow: hidden; - - text-overflow: ellipsis; - - white-space: nowrap; - -} - - - -.detail-book { - - color: rgba(255, 255, 255, 0.7); - - font-weight: 500; - - flex-shrink: 0; - -} - - - -.detail-chapter { - - color: rgba(255, 255, 255, 0.5); - - overflow: hidden; - - text-overflow: ellipsis; - - white-space: nowrap; - -} - - - -.detail-time { - - font-size: 22rpx; - - color: rgba(255, 255, 255, 0.4); - -} - - -/* === ??AR?l??^?|??\!}?m??2? === */ -.detail-item { display: flex; align-items: center; gap: 24rpx; padding: 24rpx; background: rgba(255, 255, 255, 0.02); border-radius: 16rpx; margin-bottom: 16rpx; } -.detail-avatar-wrap { flex-shrink: 0; } -.detail-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; } -.detail-avatar-text { width: 88rpx; height: 88rpx; border-radius: 50%; background: linear-gradient(135deg, #38bdac 0%, #2da396 100%); display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 700; color: #ffffff; } -.detail-content { flex: 1; display: flex; flex-direction: column; gap: 8rpx; min-width: 0; overflow: hidden; } -.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; } -.detail-buyer { font-size: 28rpx; font-weight: 500; color: #ffffff; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.detail-amount { font-size: 32rpx; font-weight: 700; color: #38bdac; flex-shrink: 0; } -.detail-product { display: flex; align-items: baseline; font-size: 24rpx; color: rgba(255, 255, 255, 0.6); overflow: hidden; } -.detail-book { color: rgba(255, 255, 255, 0.7); font-weight: 500; max-width: 200rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; } -.detail-chapter { color: rgba(255, 255, 255, 0.5); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 4rpx; } -.detail-time { font-size: 22rpx; color: rgba(255, 255, 255, 0.4); } - - - \ No newline at end of file +/* ???????? - 1:1??Web?? */ +.page { min-height: 100vh; background: #000; padding-bottom: 64rpx; } + +/* ??? */ +.nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0,0,0,0.9); backdrop-filter: blur(40rpx); display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; height: 88rpx; } +.nav-left { display: flex; gap: 16rpx; align-items: center; } +.nav-back { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; } +.nav-icon { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); } +.nav-title { font-size: 34rpx; font-weight: 600; color: #fff; flex: 1; text-align: center; } +.nav-right-placeholder { width: 144rpx; } +.nav-btn { width: 64rpx; height: 64rpx; background: #1c1c1e; border-radius: 50%; display: flex; align-items: center; justify-content: center; } + +.content { padding: 24rpx; width: 100%; box-sizing: border-box; } + +/* ?????? */ +.expiring-banner { display: flex; align-items: center; gap: 24rpx; padding: 24rpx; background: rgba(255,165,0,0.1); border: 2rpx solid rgba(255,165,0,0.3); border-radius: 24rpx; margin-bottom: 24rpx; } +.banner-icon { width: 80rpx; height: 80rpx; background: rgba(255,165,0,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } +.icon-bell-warning { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(64%) sepia(89%) saturate(1363%) hue-rotate(4deg) brightness(101%) contrast(102%); } +.banner-content { flex: 1; } +.banner-title { font-size: 28rpx; font-weight: 500; color: #fff; display: block; } +.banner-desc { font-size: 24rpx; color: rgba(255,165,0,0.8); margin-top: 4rpx; display: block; } + +/* ???? - ?? Next.js */ +.earnings-card { position: relative; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 48rpx; margin-bottom: 24rpx; overflow: hidden; width: 100%; box-sizing: border-box; } +.earnings-bg { position: absolute; top: 0; right: 0; width: 256rpx; height: 256rpx; background: rgba(0,206,209,0.15); border-radius: 50%; filter: blur(100rpx); } +.earnings-main { position: relative; } +.earnings-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32rpx; } +.earnings-left { display: flex; align-items: center; gap: 16rpx; } +.wallet-icon { width: 80rpx; height: 80rpx; background: rgba(0,206,209,0.2); border-radius: 20rpx; display: flex; align-items: center; justify-content: center; } +.icon-wallet { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); } +.earnings-info { display: flex; flex-direction: column; gap: 8rpx; } +.earnings-label { font-size: 24rpx; color: rgba(255,255,255,0.6); } +.commission-rate { font-size: 24rpx; color: #00CED1; font-weight: 500; } +.earnings-right { text-align: right; } +.earnings-value { font-size: 60rpx; font-weight: 700; color: #fff; display: block; line-height: 1; } +.pending-text { font-size: 24rpx; color: rgba(255,255,255,0.5); margin-top: 8rpx; display: block; } + +.withdraw-btn { padding: 28rpx; background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); color: #fff; font-size: 32rpx; font-weight: 600; text-align: center; border-radius: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,206,209,0.3); } +.withdraw-btn.btn-disabled { background: rgba(0,206,209,0.2); color: rgba(255,255,255,0.3); box-shadow: none; } + +/* ???? - ?? Next.js 4??? */ +.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } +.stat-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; padding: 24rpx 12rpx; text-align: center; } +.stat-value { font-size: 40rpx; font-weight: 700; color: #fff; display: block; } +.stat-value.orange { color: #FFA500; } +.stat-label { font-size: 20rpx; color: rgba(255,255,255,0.6); margin-top: 8rpx; display: block; } + +/* ????? */ +.visit-stat { display: flex; align-items: center; justify-content: center; gap: 12rpx; padding: 20rpx 32rpx; background: rgba(255,255,255,0.05); border-radius: 16rpx; margin-bottom: 24rpx; } +.visit-label { font-size: 24rpx; color: rgba(255,255,255,0.5); } +.visit-value { font-size: 32rpx; font-weight: 700; color: #00CED1; } +.visit-tip { font-size: 24rpx; color: rgba(255,255,255,0.5); } + +/* ???? - ?? Next.js */ +.rules-card { background: rgba(0,206,209,0.05); border: 2rpx solid rgba(0,206,209,0.2); border-radius: 24rpx; padding: 32rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } +.rules-header { display: flex; align-items: center; gap: 16rpx; margin-bottom: 16rpx; } +.rules-icon { width: 64rpx; height: 64rpx; background: rgba(0,206,209,0.2); border-radius: 16rpx; display: flex; align-items: center; justify-content: center; } +.icon-alert { width: 32rpx; height: 32rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); } +.rules-title { font-size: 28rpx; font-weight: 500; color: #fff; } +.rules-list { padding-left: 8rpx; } +.rule-item { font-size: 24rpx; color: rgba(255,255,255,0.6); line-height: 2; display: block; margin-bottom: 4rpx; } +.rule-item .gold { color: #FFD700; font-weight: 500; } +.rule-item .brand { color: #00CED1; font-weight: 500; } +.rule-item .orange { color: #FFA500; font-weight: 500; } + +/* ?????? - ?? Next.js */ +.binding-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } +.binding-header { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); } +.binding-title { display: flex; align-items: center; gap: 12rpx; } +.binding-icon-img { width: 40rpx; height: 40rpx; display: block; filter: brightness(0) saturate(100%) invert(72%) sepia(54%) saturate(2933%) hue-rotate(134deg) brightness(101%) contrast(101%); } +.title-text { font-size: 30rpx; font-weight: 600; color: #fff; } +.binding-count { font-size: 26rpx; color: rgba(255,255,255,0.5); } +.toggle-icon { font-size: 24rpx; color: rgba(255,255,255,0.5); } + +/* Tab?? */ +.binding-tabs { display: flex; border-bottom: 2rpx solid rgba(255,255,255,0.05); } +.tab-item { flex: 1; padding: 24rpx 0; text-align: center; font-size: 26rpx; color: rgba(255,255,255,0.5); position: relative; } +.tab-item.tab-active { color: #00CED1; } +.tab-item.tab-active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80rpx; height: 4rpx; background: #00CED1; border-radius: 4rpx; } + +/* ???? */ +.binding-list { max-height: 640rpx; overflow-y: auto; } +.empty-state { padding: 80rpx 0; text-align: center; } +.empty-icon { font-size: 64rpx; display: block; margin-bottom: 16rpx; } +.empty-text { font-size: 26rpx; color: rgba(255,255,255,0.5); } + +/* ?????? - ??? */ +.binding-item { display: flex; align-items: center; padding: 24rpx 32rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); gap: 24rpx; } +.binding-item:last-child { border-bottom: none; } + +/* ?? */ +.user-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; background: rgba(0,206,209,0.2); display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 600; color: #00CED1; flex-shrink: 0; } +.user-avatar.avatar-converted { background: rgba(76,175,80,0.2); color: #4CAF50; } +.user-avatar.avatar-expired { background: rgba(158,158,158,0.2); color: #9E9E9E; } + +/* ???? */ +.user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4rpx; } +.user-name { font-size: 28rpx; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.user-time { font-size: 22rpx; color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + +/* ???? */ +.user-status { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4rpx; min-width: 100rpx; } +.status-amount { font-size: 28rpx; color: #4CAF50; font-weight: 600; white-space: nowrap; } +.status-order { font-size: 20rpx; color: rgba(255,255,255,0.5); white-space: nowrap; } +.status-time { font-size: 20rpx; color: rgba(255,255,255,0.5); white-space: nowrap; } + +/* ???? */ +.status-tag { font-size: 24rpx; font-weight: 600; padding: 6rpx 16rpx; border-radius: 16rpx; white-space: nowrap; } +.status-tag.tag-green { background: rgba(76,175,80,0.2); color: #4CAF50; } +.status-tag.tag-orange { background: rgba(255,165,0,0.2); color: #FFA500; } +.status-tag.tag-red { background: rgba(244,67,54,0.2); color: #F44336; } +.status-tag.tag-gray { background: rgba(158,158,158,0.2); color: #9E9E9E; } + +/* ????? - ?? Next.js */ +.invite-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 40rpx; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } +.invite-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; } +.invite-title { font-size: 30rpx; font-weight: 600; color: #fff; } +.invite-code-box { background: rgba(0,206,209,0.2); padding: 12rpx 24rpx; border-radius: 16rpx; } +.invite-code { font-size: 28rpx; font-weight: 600; color: #00CED1; font-family: 'Courier New', monospace; letter-spacing: 2rpx; } +.invite-tip { font-size: 24rpx; color: rgba(255,255,255,0.6); line-height: 1.5; display: block; } +.invite-tip .gold { color: #FFD700; } +.invite-tip .brand { color: #00CED1; } + +/* ?????? - ??? */ +.earnings-detail-card { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; overflow: hidden; margin-bottom: 24rpx; width: 100%; box-sizing: border-box; } +.detail-header { padding: 40rpx 40rpx 24rpx; border-bottom: 2rpx solid rgba(255,255,255,0.05); } +.detail-title { font-size: 30rpx; font-weight: 600; color: #fff; } +.detail-list { max-height: 480rpx; overflow-y: auto; padding: 16rpx 0; } + +/* ??????? */ +.earnings-detail-card .detail-item { display: flex; align-items: center; gap: 24rpx; padding: 24rpx 40rpx; background: transparent; border-bottom: 2rpx solid rgba(255,255,255,0.03); } +.earnings-detail-card .detail-item:last-child { border-bottom: none; } +.earnings-detail-card .detail-item:active { background: rgba(255, 255, 255, 0.05); } + +/* ???? */ +.earnings-detail-card .detail-avatar-wrap { width: 88rpx; height: 88rpx; flex-shrink: 0; } +.earnings-detail-card .detail-avatar { width: 100%; height: 100%; border-radius: 50%; border: 2rpx solid rgba(56, 189, 172, 0.2); } +.earnings-detail-card .detail-avatar-text { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #38bdac 0%, #2da396 100%); display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 700; color: #ffffff; } + +/* ???? */ +.earnings-detail-card .detail-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; } +.earnings-detail-card .detail-top { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; } +.earnings-detail-card .detail-buyer { font-size: 28rpx; font-weight: 500; color: #ffffff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.earnings-detail-card .detail-amount { font-size: 32rpx; font-weight: 700; color: #38bdac; flex-shrink: 0; white-space: nowrap; } + +/* ???? */ +.earnings-detail-card .detail-product { display: flex; align-items: baseline; gap: 4rpx; font-size: 24rpx; color: rgba(255, 255, 255, 0.6); min-width: 0; overflow: hidden; } +.earnings-detail-card .detail-book { color: rgba(255, 255, 255, 0.7); font-weight: 500; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.earnings-detail-card .detail-chapter { color: rgba(255, 255, 255, 0.5); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.earnings-detail-card .detail-time { font-size: 22rpx; color: rgba(255, 255, 255, 0.4); } + +/* ???? - ?? Next.js */ +.share-section { display: flex; flex-direction: column; gap: 12rpx; width: 100%; margin-bottom: 24rpx; } +.share-item { display: flex; align-items: center; background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 24rpx; padding: 32rpx; border: none; margin: 0; text-align: left; width: 100%; box-sizing: border-box; } +.share-item::after { border: none; } +.share-icon { width: 96rpx; height: 96rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 24rpx; flex-shrink: 0; } +.share-icon.poster { background: rgba(103,58,183,0.2); } +.share-icon.wechat { background: rgba(7,193,96,0.2); } +.share-icon.link { background: rgba(158,158,158,0.2); } +.icon-share-btn { width: 48rpx; height: 48rpx; display: block; } +.share-icon.poster .icon-share-btn { filter: brightness(0) saturate(100%) invert(37%) sepia(73%) saturate(2296%) hue-rotate(252deg) brightness(96%) contrast(92%); } +.share-icon.wechat .icon-share-btn { filter: brightness(0) saturate(100%) invert(58%) sepia(91%) saturate(1255%) hue-rotate(105deg) brightness(96%) contrast(97%); } +.share-icon.link .icon-share-btn { filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); } +.share-info { flex: 1; text-align: left; } +.share-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; text-align: left; } +.share-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; text-align: left; } +.share-arrow-icon { width: 40rpx; height: 40rpx; display: block; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); } +.share-btn-wechat { line-height: normal; font-size: inherit; padding: 24rpx 32rpx !important; margin: 0 !important; width: 100% !important; } + +/* ?????????????? + ???? + ???????? */ +/* ???????? backdrop-filter??????????????? */ +.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 32rpx; box-sizing: border-box; } + +.poster-dialog { width: 686rpx; border-radius: 24rpx; overflow: hidden; position: relative; background: transparent; } +.poster-close { position: absolute; top: 20rpx; right: 20rpx; width: 56rpx; height: 56rpx; border-radius: 28rpx; background: rgba(0,0,0,0.25); color: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 28rpx; } + +/* ???? */ +.poster-card { position: relative; background: linear-gradient(135deg, #0a1628 0%, #0f2137 50%, #1a3a5c 100%); color: #fff; padding: 44rpx 40rpx 36rpx; } +.poster-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; } + +/* ???? */ +/* ???????? filter: blur ??????????????? + ???? */ +.poster-glow { position: absolute; width: 320rpx; height: 320rpx; border-radius: 50%; opacity: 0.6; z-index: 1; } +.poster-glow-left { top: -120rpx; left: -160rpx; background: rgba(0,206,209,0.12); box-shadow: 0 0 140rpx 40rpx rgba(0,206,209,0.18); } +.poster-glow-right { bottom: -140rpx; right: -160rpx; background: rgba(255,215,0,0.10); box-shadow: 0 0 160rpx 50rpx rgba(255,215,0,0.14); } +.poster-ring { position: absolute; width: 520rpx; height: 520rpx; border-radius: 50%; border: 2rpx solid rgba(0,206,209,0.06); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; } + +/* ???? */ +.poster-badges { display: flex; gap: 16rpx; margin-bottom: 24rpx; } +.poster-badge { padding: 10rpx 22rpx; font-size: 20rpx; font-weight: 700; border-radius: 999rpx; border: 2rpx solid transparent; } +.poster-badge-gold { background: rgba(255,215,0,0.18); color: #FFD700; border-color: rgba(255,215,0,0.28); } +.poster-badge-brand { background: rgba(0,206,209,0.18); color: #00CED1; border-color: rgba(0,206,209,0.28); } + +/* ?? */ +.poster-title { margin-bottom: 8rpx; } +.poster-title-line1 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #00CED1; } +.poster-title-line2 { display: block; font-size: 44rpx; font-weight: 900; line-height: 1.1; color: #fff; margin-top: 6rpx; } +.poster-subtitle { display: block; font-size: 22rpx; color: rgba(255,255,255,0.6); margin-bottom: 28rpx; } + +/* ???? */ +.poster-stats { width: 100%; display: flex; gap: 16rpx; justify-content: center; margin-bottom: 24rpx; } +.poster-stat { flex: 1; max-width: 190rpx; background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 16rpx; padding: 18rpx 10rpx; } +.poster-stat-value { display: block; font-size: 44rpx; font-weight: 900; line-height: 1; } +.poster-stat-label { display: block; font-size: 20rpx; color: rgba(255,255,255,0.5); margin-top: 8rpx; } +.poster-stat-gold { color: #FFD700; } +.poster-stat-brand { color: #00CED1; } +.poster-stat-pink { color: #E91E63; } + +/* ?? */ +.poster-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10rpx; margin: 0 24rpx 26rpx; } +.poster-tag { font-size: 20rpx; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 2rpx solid rgba(255,255,255,0.10); border-radius: 12rpx; padding: 6rpx 14rpx; } + +/* ??? */ +.poster-recommender { display: flex; align-items: center; gap: 12rpx; background: rgba(0,206,209,0.10); border: 2rpx solid rgba(0,206,209,0.20); border-radius: 999rpx; padding: 12rpx 22rpx; margin-bottom: 22rpx; } +.poster-avatar { width: 44rpx; height: 44rpx; border-radius: 22rpx; background: rgba(0,206,209,0.30); display: flex; align-items: center; justify-content: center; } +.poster-avatar-text { font-size: 20rpx; font-weight: 800; color: #00CED1; } +.poster-recommender-text { font-size: 22rpx; color: #00CED1; } + +/* ??? */ +.poster-discount { width: 100%; background: linear-gradient(90deg, rgba(255,215,0,0.10) 0%, rgba(233,30,99,0.10) 100%); border: 2rpx solid rgba(255,215,0,0.20); border-radius: 18rpx; padding: 18rpx 18rpx; margin-bottom: 26rpx; } +.poster-discount-text { font-size: 22rpx; color: rgba(255,255,255,0.80); } +.poster-discount-highlight { color: #00CED1; font-weight: 800; } + +/* ??? */ +.poster-qr-wrap { background: #fff; padding: 14rpx; border-radius: 16rpx; margin-bottom: 12rpx; box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.35); } +.poster-qr-img { width: 240rpx; height: 240rpx; display: block; } +.poster-qr-tip { font-size: 20rpx; color: rgba(255,255,255,0.40); margin-bottom: 8rpx; } +.poster-code { font-size: 22rpx; font-family: monospace; letter-spacing: 2rpx; color: rgba(0,206,209,0.80); } + +/* ??????? */ +.poster-footer { background: #fff; padding: 28rpx 28rpx 32rpx; display: flex; flex-direction: column; gap: 18rpx; } +.poster-footer-tip { font-size: 22rpx; color: rgba(0,0,0,0.55); text-align: center; } +.poster-footer-btn { height: 72rpx; border-radius: 18rpx; border: 2rpx solid rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: rgba(0,0,0,0.75); background: #fff; } + + + +/* ????- ?? Next.js */ +.empty-earnings { background: rgba(28, 28, 30, 0.8); backdrop-filter: blur(40rpx); border: 2rpx solid rgba(255,255,255,0.1); border-radius: 32rpx; padding: 64rpx 40rpx; text-align: center; margin-bottom: 24rpx; } +.empty-icon-wrapper { width: 128rpx; height: 128rpx; border-radius: 50%; background: rgba(28, 28, 30, 0.8); display: flex; align-items: center; justify-content: center; margin: 0 auto 32rpx; } +.empty-gift-icon { width: 64rpx; height: 64rpx; display: block; filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%); } +.empty-title { font-size: 30rpx; font-weight: 500; color: #fff; display: block; margin-bottom: 16rpx; } +.empty-desc { font-size: 26rpx; color: rgba(255,255,255,0.6); display: block; line-height: 1.5; } + + +/* ===== Loading 遮罩（备用） ===== */ +.loading-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0,0,0,0.7); + backdrop-filter: blur(10rpx); + z-index: 999; + display: flex; + align-items: center; + justify-content: center; +} +.loading-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 24rpx; +} +.loading-spinner { + width: 80rpx; + height: 80rpx; + border: 6rpx solid rgba(56,189,172,0.2); + border-top-color: #38bdac; + border-radius: 50%; + animation: spin 1s linear infinite; +} +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +.loading-text { + font-size: 28rpx; + color: rgba(255,255,255,0.8); + font-weight: 500; +} +.content-loading { + opacity: 0.3; + pointer-events: none; +} + +/* ===== 收益明细独立块 ===== */ +.detail-item { display: flex; align-items: center; gap: 24rpx; padding: 24rpx; background: rgba(255,255,255,0.02); border-radius: 16rpx; margin-bottom: 16rpx; transition: all 0.3s; } +.detail-item:active { background: rgba(255,255,255,0.05); } +.detail-avatar-wrap { flex-shrink: 0; } +.detail-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; border: 2rpx solid rgba(56,189,172,0.2); } +.detail-avatar-text { width: 88rpx; height: 88rpx; border-radius: 50%; background: linear-gradient(135deg, #38bdac 0%, #2da396 100%); display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 700; color: #ffffff; } +.detail-content { flex: 1; display: flex; flex-direction: column; gap: 8rpx; min-width: 0; } +.detail-top { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; } +.detail-buyer { font-size: 28rpx; font-weight: 500; color: #ffffff; flex-shrink: 0; } +.detail-amount { font-size: 32rpx; font-weight: 700; color: #38bdac; flex-shrink: 0; } +.detail-product { display: flex; align-items: center; font-size: 24rpx; color: rgba(255,255,255,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.detail-book { color: rgba(255,255,255,0.7); font-weight: 500; } +.detail-chapter { color: rgba(255,255,255,0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.detail-time { font-size: 22rpx; color: rgba(255,255,255,0.4); }