From c35e211123c7b3fac4df4da1d57e1bd2aa1eb21e Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Tue, 15 Sep 2026 08:39:12 +0800 Subject: [PATCH] feat(points): apps/web/src/pages/points/Points.css --- apps/web/src/pages/points/Points.css | 88 ++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 apps/web/src/pages/points/Points.css diff --git a/apps/web/src/pages/points/Points.css b/apps/web/src/pages/points/Points.css new file mode 100644 index 000000000..2b3ccda04 --- /dev/null +++ b/apps/web/src/pages/points/Points.css @@ -0,0 +1,88 @@ +/* 积分中心 & 明细 & 规则页通用样式 */ +.xx-points-page { + max-width: 1100px; + margin: 0 auto; + padding: 24px 0; +} + +/* Hero 渐变卡 */ +.xx-points-hero { + background: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f59e0b 100%); + border-radius: 16px; + color: #fff; + overflow: hidden; + position: relative; +} + +.xx-points-hero::before { + content: ""; + position: absolute; + right: -60px; + top: -60px; + width: 220px; + height: 220px; + background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); + border-radius: 50%; +} + +.xx-points-hero .ant-card-body { + padding: 28px 32px; + position: relative; +} + +.xx-points-hero-balance { + display: flex; + align-items: baseline; + gap: 10px; + font-size: 52px; + font-weight: 800; + color: #fff; + line-height: 1; + font-variant-numeric: tabular-nums; +} + +.xx-points-hero-balance .anticon { + font-size: 32px; +} + +.xx-points-free-quota { + background: rgba(255, 255, 255, 0.15); + border-radius: 12px; + padding: 14px 16px; + backdrop-filter: blur(8px); +} + +.xx-points-free-title { + font-size: 13px; + margin-bottom: 8px; + color: rgba(255, 255, 255, 0.95); +} + +.xx-points-free-quota .ant-progress-text { + color: #fff !important; +} + +/* 列表筛选 */ +.xx-points-filters { + margin-bottom: 16px; +} + +.xx-tx-earn { + color: #10b981; + font-weight: 700; +} + +.xx-tx-spend { + color: #ef4444; + font-weight: 700; +} + +.xx-tx-refund { + color: #3b82f6; + font-weight: 700; +} + +/* 规则页 */ +.xx-rules-table .ant-descriptions-item-label { + width: 160px; +}