/* pages/tixian/tixian.wxss - 终极优化版 */ page { background-color: #f5f7fb; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; height: 100%; } .app { display: flex; flex-direction: column; min-height: 100vh; padding: 0 24rpx 0; position: relative; z-index: 1; box-sizing: border-box; } /* 页面背景模糊极低,不影响阅读 */ .global-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.1; object-fit: cover; filter: blur(1rpx); } /* 资产区域整体与顶部保持间距 */ .assets-section { margin-top: 24rpx; flex-shrink: 0; } /* 主卡片玻璃质感 - 模糊加重避免抢眼,同时文字对比加强 */ .main-card { background: rgba(248, 250, 252, 0.88); /* 稍微降低透明度,让背景更柔和 */ backdrop-filter: blur(28rpx); /* 增强模糊,不抢眼 */ -webkit-backdrop-filter: blur(28rpx); border-radius: 48rpx; padding: 30rpx 28rpx 24rpx; /* 稍微缩小高度 */ margin-bottom: 20rpx; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04); border: 1rpx solid rgba(255, 255, 255, 0.4); background-size: cover; } /* 总余额 - 字体加深加粗,增加阴影提高可读性 */ .balance-wrap { text-align: center; margin-bottom: 20rpx; /* 减小间距,让卡片更紧凑 */ } .balance-label { font-size: 28rpx; color: #0f172a; /* 更深色 */ letter-spacing: 1px; display: block; margin-bottom: 10rpx; font-weight: 700; /* 加粗 */ text-shadow: 0 1rpx 2rpx rgba(255,255,255,0.8); } .balance-value { font-size: 68rpx; font-weight: 800; color: #0f172a; font-family: 'DIN', monospace; letter-spacing: -1rpx; text-shadow: 0 1rpx 2rpx rgba(255,255,255,0.6); } /* 内部分隔线(横杠)- 明显且保持层次 */ .inner-divider { width: 60%; height: 2rpx; background: linear-gradient(90deg, transparent, #64748b, #64748b, transparent); /* 加深颜色 */ margin: 0 auto 20rpx auto; border-radius: 2rpx; opacity: 0.9; } /* 左右滑动提示 - 字体明显 */ .assets-hint { display: block; text-align: center; font-size: 24rpx; color: #334155; /* 深灰 */ margin-bottom: 14rpx; font-weight: 600; } .assets-scroll { width: 100%; white-space: nowrap; } .assets-track { display: inline-flex; gap: 16rpx; } /* 资产小卡片 - 背景半透模糊,字体深色加粗 */ .asset-tile { width: 170rpx; background: rgba(255, 255, 255, 0.75); /* 稍微提高透明度,让模糊背景透出 */ backdrop-filter: blur(8rpx); /* 自身轻微模糊,不抢眼 */ border-radius: 28rpx; padding: 18rpx 12rpx; display: inline-flex; flex-direction: column; align-items: center; text-align: center; border: 1rpx solid rgba(255,255,255,0.5); box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02); transition: all 0.2s; white-space: normal; background-size: cover; background-position: center; } .asset-tile:active { background: rgba(255, 255, 255, 0.9); transform: scale(0.98); } .asset-name { font-size: 24rpx; font-weight: 700; /* 加粗 */ color: #1e293b; /* 深色 */ margin-bottom: 10rpx; text-shadow: 0 1rpx 1rpx rgba(255,255,255,0.5); } .asset-balance { font-size: 28rpx; font-weight: 800; /* 加粗 */ color: #2d6a4f; font-family: monospace; margin-bottom: 6rpx; text-shadow: 0 1rpx 1rpx rgba(255,255,255,0.3); } .asset-fee { font-size: 20rpx; font-weight: 600; /* 加粗并加深 */ color: #475569; text-shadow: 0 1rpx 1rpx rgba(255,255,255,0.3); } .assets-empty { width: 400rpx; text-align: center; color: #a0abb9; padding: 40rpx 0; } /* 外部层次分隔线 - 保持不变,保留分层 */ .divider-line { height: 2rpx; background: linear-gradient(90deg, transparent, #cbd5e1, #cbd5e1, transparent); margin: 16rpx 0 20rpx; width: 80%; margin-left: auto; margin-right: auto; } /* 提现记录区 - 无改动,自然贴底 */ .history-section { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 0; } .history-header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 8rpx 20rpx; flex-shrink: 0; } .history-title { font-size: 34rpx; font-weight: 600; color: #1e293b; } .history-settings { font-size: 28rpx; color: #3b82f6; } .history-scroll { flex: 1; width: 100%; padding: 0 20rpx; box-sizing: border-box; } .history-item { display: flex; align-items: center; padding: 28rpx 0; border-bottom: 1rpx solid rgba(0,0,0,0.05); } .history-info { width: 160rpx; } .history-amount { font-size: 36rpx; font-weight: 700; color: #1e293b; display: block; } .history-time { font-size: 22rpx; color: #94a3b8; } .history-detail { flex: 1; padding: 0 20rpx; } .history-method { font-size: 30rpx; color: #334155; display: block; margin-bottom: 6rpx; } .history-type { font-size: 24rpx; color: #94a3b8; } .history-status { text-align: right; } .status-badge { font-size: 26rpx; font-weight: 500; padding: 6rpx 14rpx; border-radius: 30rpx; display: inline-block; } .status-wait { color: #f59e0b; background: rgba(245,158,11,0.1); } .status-done { color: #10b981; background: rgba(16,185,129,0.1); } .status-fail { color: #ef4444; background: rgba(239,68,68,0.1); } .fail-link { margin-left: 8rpx; text-decoration: underline; } .load-tip, .more-tip { text-align: center; padding: 30rpx; font-size: 24rpx; color: #94a3b8; } .load-more-btn { margin: 16rpx 0 20rpx; padding: 20rpx; text-align: center; background: rgba(255,255,255,0.7); backdrop-filter: blur(8rpx); border-radius: 40rpx; font-size: 28rpx; color: #3b82f6; border: 1rpx solid rgba(255,255,255,0.5); } .load-more-btn:active { background: rgba(255,255,255,0.9); } .safe-bottom { height: 12rpx; flex-shrink: 0; } /* ========== 弹窗样式(完整保留) ========== */ .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-dialog { width: 600rpx; background: rgba(255,255,255,0.96); backdrop-filter: blur(20rpx); border-radius: 48rpx; overflow: hidden; box-shadow: 0 20rpx 40rpx rgba(0,0,0,0.1); border: 1rpx solid rgba(255,255,255,0.6); } .modal-header { padding: 36rpx 32rpx 20rpx; font-size: 36rpx; font-weight: 700; border-bottom: 1rpx solid rgba(0,0,0,0.05); } .modal-body { padding: 32rpx; } .info-row, .amount-row, .method-row { display: flex; justify-content: space-between; margin-bottom: 24rpx; font-size: 28rpx; } .amount-row input { border: 1rpx solid rgba(0,0,0,0.1); border-radius: 28rpx; padding: 16rpx 20rpx; width: 260rpx; background: rgba(255,255,255,0.9); } .quick-row { display: flex; gap: 16rpx; margin: 24rpx 0; } .quick-chip { flex: 1; background: rgba(241,245,249,0.8); text-align: center; padding: 12rpx; border-radius: 40rpx; font-size: 28rpx; } .fee-row { display: flex; justify-content: space-between; background: rgba(248,250,252,0.8); padding: 20rpx; border-radius: 28rpx; margin: 20rpx 0; } .link-text { color: #3b82f6; } .toggle-row { display: flex; gap: 20rpx; margin-bottom: 28rpx; } .toggle-item { flex: 1; text-align: center; padding: 20rpx; border: 1rpx solid rgba(0,0,0,0.08); border-radius: 30rpx; background: rgba(255,255,255,0.8); } .toggle-item.active { border-color: #3b82f6; background: #eff6ff; } .field-input { width: 100%; border: 1rpx solid rgba(0,0,0,0.08); border-radius: 28rpx; padding: 20rpx; margin-bottom: 20rpx; box-sizing: border-box; background: rgba(255,255,255,0.9); } .upload-trigger { background: rgba(241,245,249,0.8); border: 1rpx dashed #cbd5e1; border-radius: 28rpx; padding: 28rpx; text-align: center; } .image-preview { margin-top: 16rpx; position: relative; } .image-preview image { width: 100%; height: 200rpx; border-radius: 28rpx; } .image-actions { display: flex; justify-content: space-around; background: rgba(0,0,0,0.6); padding: 12rpx; position: absolute; bottom: 0; left: 0; right: 0; color: white; border-bottom-left-radius: 28rpx; border-bottom-right-radius: 28rpx; } .current-img { margin: 20rpx 0; } .current-img image { width: 100%; height: 140rpx; border-radius: 24rpx; } .modal-footer { display: flex; border-top: 1rpx solid rgba(0,0,0,0.05); } .modal-btn { flex: 1; text-align: center; padding: 28rpx; font-size: 30rpx; } .modal-btn.cancel { color: #8f9bb3; border-right: 1rpx solid rgba(0,0,0,0.05); } .modal-btn.confirm { color: #3b82f6; }