/* ============================================================ dist-ui.css — 分销中心 / 代理中心 统一设计系统（2026-10-15 一期改版） 取代代理中心内联字号放大补丁，两个中心共用。 设计语言：浅灰底 #F5F6F8、白卡、橙主色 #FF6A2B、语义色编码。 ============================================================ */ :root { --du-orange: #FF6A2B; --du-orange-d: #E8541A; --du-orange-l: #FFF1E8; --du-page: #F5F6F8; --du-coral: #D85A30; --du-coral-l: #FAECE7; --du-green: #639922; --du-green-l: #EAF3DE; --du-amber: #BA7517; --du-amber-l: #FAEEDA; --du-blue: #378ADD; --du-blue-l: #EAF2FD; --du-purple:#7F77DD; --du-purple-l:#F0EEFB; --du-teal: #1D9E75; --du-teal-l: #E1F5EE; --du-red: #E5484D; --du-red-l: #FCEBEB; } /* ---------- 橙色 Hero 余额卡 ---------- */ .du-hero { display: flex; align-items: center; justify-content: space-between; background: var(--du-orange); color: #fff; border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; } .du-hero-main { min-width: 0; } .du-hero-label { display: flex; align-items: center; gap: 7px; font-size: 13px; opacity: .92; } .du-hero-coin { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .du-hero-num { font-size: 32px; font-weight: 500; margin: 4px 0 8px; line-height: 1.1; font-variant-numeric: tabular-nums; } .du-hero-sub { display: flex; gap: 18px; font-size: 11.5px; opacity: .92; } .du-hero-btn { flex-shrink: 0; background: #fff; color: var(--du-orange); border: none; border-radius: 18px; padding: 9px 22px; font-size: 13px; font-weight: 500; cursor: pointer; transition: transform .12s; } .du-hero-btn:hover { transform: translateY(-1px); } .du-hero-btn:active { transform: translateY(0); } /* 「立即提现」弱化为线框（首页引流卡出现后，主视觉让给「立即兑换」；仅分销首页用 .ghost，代理中心不受影响） */ .du-hero-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.72); } .du-hero-btn.ghost:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); } /* ---------- 首页 Hero · 一键兑换积分引流卡（2026-10-15 新增） ---------- */ .du-hero-cv { flex-shrink: 0; margin: 0 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.42); border-radius: 12px; padding: 9px 20px; text-align: center; } .du-hero-cv-row1 { font-size: 12px; color: rgba(255,255,255,.95); white-space: nowrap; } .du-hero-cv-row1 b { font-size: 21px; font-weight: 600; margin: 0 3px; font-variant-numeric: tabular-nums; } .du-hero-cv-btn { background: #fff; color: var(--du-orange); border: none; border-radius: 16px; padding: 6px 30px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 3px 10px rgba(120,40,0,.18); transition: transform .12s, box-shadow .12s; white-space: nowrap; } .du-hero-cv-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(120,40,0,.24); } .du-hero-cv-btn:active { transform: translateY(0); } /* 禁用态（2026-10-25：0 佣金也展示入口，按钮变「暂无可兑换」）—— 不能只降透明度：白底橙字看起来仍然可点，改为淡白底 + 深棕字，一眼能看出不可点。 */ .du-hero-cv-btn:disabled { opacity: 1; cursor: default; transform: none; box-shadow: none; background: rgba(255,255,255,.5); color: #8A4A12; } .du-hero-cv-badge { font-size: 11px; font-weight: 500; color: #7A3B00; background: #FFE9A8; border-radius: 9px; padding: 2px 9px; white-space: nowrap; } .du-hero-cv-tip { font-size: 10.5px; color: rgba(255,255,255,.92); white-space: nowrap; } /* ---------- 三色须知块 ---------- */ .du-notice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } .du-notice-item { border-radius: 10px; padding: 11px 15px; } .du-notice-item.coral { background: var(--du-coral-l); } .du-notice-item.green { background: var(--du-green-l); } .du-notice-item.amber { background: var(--du-amber-l); } .du-notice-h { font-size: 12px; color: #6B6259; } .du-notice-v { font-size: 17px; font-weight: 500; margin-top: 2px; } .du-notice-item.coral .du-notice-v { color: var(--du-coral); } .du-notice-item.green .du-notice-v { color: var(--du-green); } .du-notice-item.amber .du-notice-v { color: var(--du-amber); } .du-notice-t { font-size: 11px; color: #9A9088; margin-top: 2px; } /* ---------- 彩条指标卡 ---------- */ .du-metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } /* 2026-10-15（用户要求）：提现页指标卡行由 4 张变 5 张（新增「佣金余额」，冻结中佣金后移）， 加 .du-metric-5 走 5 列栅格；不带该类仍是 4 列，其他页不受影响。 */ .du-metric-grid.du-metric-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* 2026-10-17（用户要求）：团队/渠道概览 10 卡按 3+3+4 三行排布—— 行1 用户数 3 张 / 行2 会员数 3 张 / 行3 佣金 4 张。12 栅格：前 6 张各占 4 列、后 4 张各占 3 列。 卡片 DOM 顺序即「用户→会员→佣金」，JS 无需改；仅容器加 team-grid-334 类。 */ .du-metric-grid.team-grid-334 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .du-metric-grid.team-grid-334 > :nth-child(-n+6) { grid-column: span 4; } .du-metric-grid.team-grid-334 > :nth-child(n+7) { grid-column: span 3; } .du-metric { background: #fff; border: 0.5px solid var(--color-border-tertiary, #EBEDF0); border-left: 3px solid var(--du-blue); border-radius: 8px; padding: 11px 13px; cursor: default; transition: box-shadow .15s; } .du-metric.stat-link { cursor: pointer; } .du-metric.stat-link:hover { box-shadow: 0 4px 14px rgba(46,108,236,.10); } .du-metric-label { font-size: 11.5px; color: #8F959E; } .du-metric-val { font-size: 20px; font-weight: 500; color: #1D2129; margin-top: 3px; font-variant-numeric: tabular-nums; } .du-metric-sub { font-size: 11px; color: #A9AEB8; margin-top: 3px; } .du-metric.coral { border-left-color: var(--du-coral); } .du-metric.green { border-left-color: var(--du-green); } .du-metric.amber { border-left-color: var(--du-amber); } .du-metric.blue { border-left-color: var(--du-blue); } .du-metric.purple { border-left-color: var(--du-purple); } .du-metric.teal { border-left-color: var(--du-teal); } .du-metric.red { border-left-color: var(--du-red); background: #FEF6F6; } .du-metric.red .du-metric-label { color: var(--du-red); } /* ---------- 时间筛选 chips（提现/订单表格通用） ---------- */ .du-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; } .du-chip { border: 0.5px solid var(--color-border-secondary, #D7DBE0); background: #fff; border-radius: 14px; padding: 4px 13px; font-size: 12.5px; color: #4E5460; cursor: pointer; transition: all .12s; } .du-chip:hover { border-color: var(--du-orange); color: var(--du-orange); } .du-chip.on { background: var(--du-orange-l); border-color: var(--du-orange); color: var(--du-orange); } /* ---------- 通用卡片标题（替代 section 标题的散乱字号） ---------- */ .du-sec-title { font-size: 15px; font-weight: 500; color: #1D2129; margin: 0 0 4px; } .du-sec-hint { font-size: 13px; color: #8F959E; margin: 0 0 12px; line-height: 1.6; } /* ---------- 数据看板（二期：趋势图 + TOP10 榜单） ---------- */ .du-dash { margin-top: 14px; } .du-dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .du-dash-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; } .du-card { background: #fff; border: 0.5px solid var(--color-border-tertiary, #EBEDF0); border-radius: 10px; padding: 13px 15px; } .du-card-head { font-size: 13.5px; font-weight: 500; color: #1D2129; margin-bottom: 12px; } .du-card-sub { font-size: 11.5px; font-weight: 400; color: #A9AEB8; margin-left: 6px; } .du-chart { position: relative; height: 150px; display: flex; align-items: flex-end; gap: 6px; } .du-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; } .du-bar { width: 70%; background: #FF6A2B; border-radius: 3px 3px 0 0; transition: height .2s; } .du-bar-val { font-size: 10px; color: #8F959E; margin-bottom: 2px; white-space: nowrap; } .du-bar-x { font-size: 9.5px; color: #B4B2A9; margin-top: 4px; transform: rotate(-30deg); transform-origin: top center; } .du-chart-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .du-rank { display: flex; flex-direction: column; gap: 11px; } .du-rank-row { display: flex; align-items: center; gap: 9px; } .du-rank-no { width: 18px; height: 18px; border-radius: 50%; background: #F1EFE8; color: #888780; font-size: 10.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .du-rank-row.top1 .du-rank-no { background: #FF6A2B; color: #fff; } .du-rank-row.top2 .du-rank-no { background: #F0997B; color: #fff; } .du-rank-row.top3 .du-rank-no { background: #FAC775; color: #fff; } .du-rank-main { flex: 1; min-width: 0; } .du-rank-name { font-size: 12px; color: #1D2129; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .du-rank-bar { height: 5px; border-radius: 3px; background: #F5F6F8; } .du-rank-bar > i { display: block; height: 100%; border-radius: 3px; background: #FF6A2B; } .du-rank-amt { font-size: 12px; color: #FF6A2B; font-weight: 500; flex-shrink: 0; font-variant-numeric: tabular-nums; } .du-rank-empty { font-size: 12.5px; color: #A9AEB8; padding: 20px 0; text-align: center; } .dark .du-dash-grid .du-card { background: #181B21; border-color: #2A2E36; } .dark .du-card-head { color: #E6E8EB; } .dark .du-bar-x, .dark .du-bar-val { color: #7B828C; } .dark .du-rank-name { color: #E6E8EB; } .dark .du-rank-bar { background: #23272F; } .dark .du-rank-empty { color: #7B828C; } @media (max-width: 1100px) { .du-dash-grid { grid-template-columns: 1fr; } } /* ---------- 2026-10-16（用户要求）：仪表盘去掉右侧滚动条 ---------- 根因（Edge 实测）：.admin-content 是 flex:1 + overflow-y:auto 的独立滚动容器， 总高 ＝ topbar 79 + overview 内容 ~1016 + 底部幽灵留白 100（.dist-stage 40 已砍 + .admin-content 60→48） ⇒ 1080P/1200P 视口放不下，滚动条出现。本块只收紧 overview 分区的垂直节奏 （padding/margin 微调，不动任何内容、不动其他分区；图表只降高度不改盒模型，保证折线与柱对齐） */ .dist-sec[data-sec="overview"] { gap: 11px; } .dist-sec[data-sec="overview"] .du-hero { padding: 13px 20px; margin-bottom: 10px; } .dist-sec[data-sec="overview"] .du-hero-num { margin: 2px 0 6px; } .dist-sec[data-sec="overview"] .du-notice { margin-bottom: 10px; } .dist-sec[data-sec="overview"] .du-notice-item { padding: 8px 14px; } .dist-sec[data-sec="overview"] .du-dash { margin-top: 10px; } .dist-sec[data-sec="overview"] .du-dash-head { margin-bottom: 8px; } .dist-sec[data-sec="overview"] .du-card { padding: 11px 14px; } .dist-sec[data-sec="overview"] .du-card-head { margin-bottom: 10px; } .dist-sec[data-sec="overview"] .du-chart { height: 132px; } .dist-sec[data-sec="overview"] .card-head { padding: 12px 16px 6px; } .dist-sec[data-sec="overview"] .card-body { padding: 6px 16px 10px; } /* ---------- 深色主题 ---------- */ .dark .du-hero { background: #C8521A; } .dark .du-metric { background: #181B21; border-color: #2A2E36; } .dark .du-metric-val { color: #E6E8EB; } .dark .du-metric-sub { color: #7B828C; } .dark .du-notice-item.coral { background: #3A271F; } .dark .du-notice-h { color: #C9BBAE; } .dark .du-notice-t { color: #8C7E72; } .dark .du-notice-item.green { background: #23311C; } .dark .du-notice-item.green .du-notice-v { color: #97C459; } .dark .du-notice-item.amber { background: #382C18; } .dark .du-notice-item.amber .du-notice-v { color: #EF9F27; } .dark .du-chip { background: #181B21; border-color: #2A2E36; color: #C5CAD2; } .dark .du-chip:hover, .dark .du-chip.on { border-color: var(--du-orange); color: #FF9A6A; background: #2E1C12; } .dark .du-metric.red { background: #2A1E1F; } @media (max-width: 980px) { .du-metric-grid { grid-template-columns: repeat(2, 1fr); } /* 窄屏：5 卡回落 2 列（第 5 张独占一行），避免 5 列挤压 */ .du-metric-grid.du-metric-5 { grid-template-columns: repeat(2, 1fr); } /* 窄屏：3+3+4 回落 2 列（span 重置为 auto，否则 12 栅格下卡片被压窄） */ .du-metric-grid.team-grid-334 { grid-template-columns: repeat(2, 1fr); } .du-metric-grid.team-grid-334 > * { grid-column: auto; } .du-notice { grid-template-columns: 1fr; } .du-hero-num { font-size: 26px; } /* 窄屏：Hero 换行，兑换引流卡独占一行铺满，避免与「立即提现」挤在一行 */ .du-hero { flex-wrap: wrap; row-gap: 12px; } /* 2026-10-25：独占一行后内容改横向居中（原来竖排会被拉成一大片留白，0 佣金常驻时尤其空） */ .du-hero-cv { order: 3; flex: 0 0 100%; margin: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 16px; } .du-hero-cv-row1 b { font-size: 19px; } } /* ---------- 指标卡可点击（点开佣金构成明细） ---------- */ .du-metric-click { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .du-metric-click:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(255,106,43,.16); } .du-metric-click::after { content: '查看明细 ›'; display: block; margin-top: 6px; font-size: 12px; color: var(--du-orange); opacity: 0; transition: opacity .12s ease; } .du-metric-click:hover::after { opacity: 1; } .dark .du-metric-click:hover { box-shadow: 0 6px 18px rgba(0,0,0,.5); } /* ---------- 佣金兑换积分弹窗（2026-10-15 新增：全额 / 部分二选一） ---------- */ .du-cv-mask { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(20,16,12,.46); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; padding: 18px; } .du-cv-mask.show { opacity: 1; } .du-cv-modal { width: min(92vw, 372px); background: #fff; border-radius: 16px; padding: 22px 22px 20px; position: relative; box-shadow: 0 18px 60px rgba(90,40,0,.28); transform: translateY(8px) scale(.98); transition: transform .18s ease; } .du-cv-mask.show .du-cv-modal { transform: translateY(0) scale(1); } .du-cv-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border: none; background: #F2F3F5; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; color: #8A8F99; } .du-cv-close:hover { background: #E7E9EC; } .du-cv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .du-cv-title { font-size: 17px; font-weight: 600; color: #1D2129; } .du-cv-gain { font-size: 11.5px; font-weight: 600; color: #7A3B00; background: #FFE9A8; border-radius: 9px; padding: 2px 9px; white-space: nowrap; } .du-cv-seg { display: flex; background: #F2F3F5; border-radius: 10px; padding: 3px; margin-bottom: 16px; } .du-cv-seg-btn { flex: 1; border: none; background: transparent; border-radius: 8px; padding: 8px 0; font-size: 13.5px; color: #5A6068; cursor: pointer; transition: all .12s; } .du-cv-seg-btn.on { background: #fff; color: var(--du-orange); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.08); } .du-cv-panel { margin-bottom: 14px; } .du-cv-amount-label { font-size: 12px; color: #8F959E; margin-bottom: 6px; } .du-cv-amount-val { font-size: 26px; font-weight: 600; color: #1D2129; font-variant-numeric: tabular-nums; } .du-cv-input-wrap { display: flex; align-items: center; background: #F7F8FA; border: 1.5px solid #E5E7EB; border-radius: 10px; padding: 0 12px; transition: border-color .12s, background .12s; } .du-cv-input-wrap:focus-within { border-color: var(--du-orange); background: #fff; } .du-cv-input-wrap.err { border-color: var(--du-red); background: #FFF6F6; } .du-cv-yen { font-size: 18px; color: #8A8F99; font-weight: 500; } .du-cv-input { flex: 1; border: none; background: transparent; outline: none; font-size: 22px; font-weight: 600; color: #1D2129; padding: 11px 8px; width: 100%; font-variant-numeric: tabular-nums; } .du-cv-input::placeholder { color: #C2C6CD; font-weight: 400; font-size: 18px; } .du-cv-all { border: none; background: var(--du-orange-l); color: var(--du-orange); border-radius: 7px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .du-cv-all:hover { background: #FFE4D6; } .du-cv-avail { font-size: 12px; color: #8F959E; margin-top: 7px; } .du-cv-avail b { color: #1D2129; font-weight: 600; } .du-cv-err { font-size: 12px; color: var(--du-red); margin-top: 6px; min-height: 0; } .du-cv-result { background: linear-gradient(135deg, #FFF3EC, #FFE9DC); border: 1px solid #FFD9C2; border-radius: 12px; padding: 14px 16px; text-align: center; margin-bottom: 12px; } .du-cv-result-num { font-size: 13px; color: #8A5A3C; } .du-cv-result-num b { font-size: 30px; font-weight: 700; color: var(--du-orange-d); margin: 0 4px; font-variant-numeric: tabular-nums; } .du-cv-result-break { font-size: 12px; color: #B07A57; margin-top: 4px; } .du-cv-warn { font-size: 11.5px; color: #A9AEB8; text-align: center; margin-bottom: 14px; } .du-cv-submit { width: 100%; border: none; border-radius: 12px; background: var(--du-orange); color: #fff; font-size: 15px; font-weight: 600; padding: 13px 0; cursor: pointer; transition: background .12s, transform .12s; } .du-cv-submit:hover:not(:disabled) { background: var(--du-orange-d); } .du-cv-submit:active:not(:disabled) { transform: translateY(1px); } .du-cv-submit:disabled { background: #F2C9B6; cursor: default; } .dark .du-cv-modal { background: #1C2026; box-shadow: 0 18px 60px rgba(0,0,0,.5); } .dark .du-cv-title { color: #E6E8EB; } .dark .du-cv-amount-val, .dark .du-cv-result-num b { color: #E6E8EB; } .dark .du-cv-seg { background: #23272F; } .dark .du-cv-seg-btn { color: #A9AEB8; } .dark .du-cv-seg-btn.on { background: #2E1C12; } .dark .du-cv-input-wrap { background: #23272F; border-color: #2A2E36; } .dark .du-cv-input-wrap:focus-within { background: #1C2026; } .dark .du-cv-input { color: #E6E8EB; } .dark .du-cv-input::placeholder { color: #6B7280; } .dark .du-cv-avail b { color: #E6E8EB; } .dark .du-cv-result { background: linear-gradient(135deg, #2E2118, #2A1D14); border-color: #4A3325; } .dark .du-cv-result-num, .dark .du-cv-result-break { color: #D9A987; } .dark .du-cv-close { background: #2A2E36; color: #A9AEB8; } .dark .du-cv-close:hover { background: #353A44; } /* ===== 提现页改版（2026-10-15）：操作区两卡 + 转提记录分段筛选 ===== */ .du-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .du-2col .du-card .du-card-head { display: flex; align-items: center; } .du-seg { float: right; display: inline-flex; gap: 4px; margin: -2px 0 0 0; } .du-seg-btn { font-size: 12px; line-height: 1; padding: 5px 14px; border: 0.5px solid var(--color-border-secondary, #EBEDF0); background: #fff; color: #5F5E5A; border-radius: 999px; cursor: pointer; } .du-seg-btn.on { background: var(--du-orange); color: #fff; border-color: var(--du-orange); } @media (max-width: 980px) { .du-2col { grid-template-columns: 1fr; } } .dark .du-seg-btn { background: #181B21; color: #C9CDD4; border-color: #2A2E36; } .dark .du-seg-btn.on { background: #C8521A; color: #fff; border-color: #C8521A; } #wdRecords { overflow-x: auto; } #wdRecords .dist-table { min-width: 660px; } /* ===== 分销数据总表·表格皮肤（2026-10-16） ===== portal.html（代理中心）不加载 dist.css，而 .dist-table 系列只写在 dist.css 里 ⇒ 这里给出同款 .du-table（配色直接写字面值，不依赖 dist.css 的变量），供代理中心的分销数据总表使用。 */ .du-table-wrap { overflow-x: auto; } .du-table { width: 100%; border-collapse: collapse; font-size: 14px; } .du-table th, .du-table td { padding: 8px 10px; border-bottom: 1px solid #EBEDF0; text-align: left; white-space: nowrap; } .du-table th { color: #8F959E; font-weight: 600; background: #F7F8FA; } .du-table .du-empty { color: #9296A0; } /* 2026-10-16：代理中心卡片「点击查看明细」的手型与悬停反馈（分销中心由 dist.css 提供同名规则） */ .du-metric-click { cursor: pointer; } /* 2026-10-15（用户要求）：提现页三处标题（提现申请 / 收款设置 / 转提记录）字号加大两号：13.5px → 15.5px。 仅作用于提现板块（[data-sec="withdraw"]），不改分销首页等其他 .du-card-head。 */ [data-sec="withdraw"] .du-card-head { font-size: 15.5px; } /* ===== 提现页操作区优化（2026-10-15 第二批；分销中心 / 代理中心两页共用） ===== 用户要求：①「提交提现申请」下移，与右侧「保存收款码」水平平行；② 金额输入框加长，让占位提示 （最低 X 元起，最高 Y 元）完整可见；③ 按钮下移后的中部空白用「提现流程 + 温馨提示」填充； ④ 规则标签改为一行两个（2 列栅格），并新增「人工审核」标签。 本段写在 dist-ui.css（dist.html 与 portal.html 都加载它），用 [data-sec="withdraw"] 限定作用域； 优先级 (0,2,0) 高于 dist.css / portal.html 内联的同名 .wd-* 规则 (0,1,0)，无需改动那两处。 */ /* 2026-10-15（用户要求）：「提交提现申请」按钮水平居中（分销中心 / 代理中心两页共用） */ [data-sec="withdraw"] .wd-apply-actions { display: flex; justify-content: center; } /* ② 金额输入框：撑满标签右侧的剩余宽度（原来固定 130px，占位文案被截断成「最低 10 元起，最」） */ [data-sec="withdraw"] .wd-amount-field { display: flex; align-items: center; gap: 10px; } [data-sec="withdraw"] .wd-amount-field > label { flex: 0 0 auto; white-space: nowrap; } [data-sec="withdraw"] .wd-amount-input { flex: 1 1 auto; width: auto; min-width: 0; } /* ④ 规则标签：一行两个的等宽栅格（5 个标签自然排成 2/2/1 三行），文字居中、纵向对齐 */ [data-sec="withdraw"] .wd-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } [data-sec="withdraw"] .wd-rule-tag { justify-content: center; text-align: center; } /* ① 提现申请卡：竖向弹性布局，提交按钮沉底（margin-top:auto）+ 与右卡同一水平线。 右卡「保存收款码」距卡片下边框 = .du-card padding-bottom 13px + .wd-qr-panel margin-bottom 16px + 面板 padding 14px = 43px；故左卡按钮补 margin-bottom 30px（13 + 30 = 43px）严格对齐。 右卡同样竖向布局并把收款码面板沉底（margin-top:auto）—— 两卡内容高度受「收款码是否已上传」影响 （未上传时右卡矮 80px，已上传时两卡几乎等高），沉底后无论哪种状态两按钮都恒在同一水平线。 仅在两卡并排（>980px，.du-2col 的断点）时生效，窄屏回落单列后按普通顺序流排布。 */ @media (min-width: 981px) { [data-sec="withdraw"] .wd-apply-card, [data-sec="withdraw"] .wd-qr-card { display: flex; flex-direction: column; } [data-sec="withdraw"] .wd-apply-actions { margin-top: auto; margin-bottom: 30px; } [data-sec="withdraw"] .wd-qr-card > .wd-qr-panel { margin-top: auto; } /* 填充块吃掉剩余空隙（居中分布），避免任一状态下留下明显空白带 */ [data-sec="withdraw"] .wd-apply-extra { flex: 1 1 auto; justify-content: center; } } /* ③ 提现流程（3 步）+ 温馨提示：填充按钮沉底后卡片中部的空白，同时把审核 / 打款口径讲清楚。 整体包在 .wd-apply-extra 里：它是弹性块，卡片有富余高度时把空隙平摊到内容上下，不出现空白带。 */ .wd-apply-extra { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 0; } .wd-flow-title { font-size: 13px; font-weight: 600; color: #1D2129; margin-bottom: 8px; } .wd-flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .wd-flow-step { position: relative; min-width: 0; background: #F7F8FA; border: 0.5px solid #EBEDF0; border-radius: 8px; padding: 8px 6px; text-align: center; } .wd-flow-step:not(:last-child)::after { content: '›'; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); color: #C9CDD4; font-size: 15px; line-height: 1; } .wd-flow-no { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #EEF4FF; color: #2E6CEC; font-size: 11px; font-weight: 600; margin-bottom: 4px; } .wd-flow-step b { display: block; font-size: 12px; font-weight: 600; color: #1D2129; } .wd-flow-step i { display: block; font-style: normal; font-size: 11px; color: #9296A0; margin-top: 2px; line-height: 1.45; } .wd-notice { background: #FAFBFC; border: 0.5px solid #EBEDF0; border-radius: 8px; padding: 9px 12px; } .wd-notice-h { font-size: 12.5px; font-weight: 600; color: #454851; margin-bottom: 5px; } .wd-notice ul { margin: 0; padding-left: 15px; } .wd-notice li { font-size: 11.5px; color: #646A73; line-height: 1.65; } .wd-notice li::marker { color: #C9CDD4; } /* 深色主题：dist.html 用 .dark，portal.html 用 [data-theme='dark']，两套选择器都补上 */ .dark .wd-flow-step, [data-theme='dark'] .wd-flow-step { background: #1C1F25; border-color: #2A2E36; } .dark .wd-flow-step b, [data-theme='dark'] .wd-flow-step b { color: #E6E8EB; } .dark .wd-flow-step i, [data-theme='dark'] .wd-flow-step i { color: #8A9099; } .dark .wd-flow-no, [data-theme='dark'] .wd-flow-no { background: #16243F; color: #8FB4FF; } .dark .wd-flow-title, [data-theme='dark'] .wd-flow-title { color: #E6E8EB; } .dark .wd-notice, [data-theme='dark'] .wd-notice { background: #1C1F25; border-color: #2A2E36; } .dark .wd-notice-h, [data-theme='dark'] .wd-notice-h { color: #C9CDD4; } .dark .wd-notice li, [data-theme='dark'] .wd-notice li { color: #A9AEB8; } /* ===== 会员 / OEM 权益弹窗外框（2026-10-25 补：dist.html 与 portal.html 都不引 style.css）===== 这套 .oem-intro-* 原本只在 style.css 里定义，而分销中心 / 代理中心加载的是 admin-shell + dist-ui + pt-table + mobile，**从来没加载过 style.css**。 于是 JS 建出来的 mask 只有内联的 position/display：没有底色、panel 没有 max-height、 内层没有 overflow。面板按内容自然撑到 1100+px，在 844 高的手机视口里上下各溢出一截 —— 顶部 ✕ 被顶到屏幕外（关不掉）、内层根本不是滚动容器（滑不动，手指滑动透给下面的页面）。 这里把外框补齐：底色 + 背景模糊 + 680px/86vh 约束 + 内层滚动。 （白色双流光边框仍只在 style.css，这两页维持与原来一致的纯深色面板，视觉无回退。） */ .oem-intro-mask, .dist-oem-intro-mask { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); overscroll-behavior: contain; /* 遮罩自己不把滚动链传给页面 */ } .oem-intro-panel { position: relative; display: flex; flex-direction: column; max-width: 680px; width: 100%; max-height: 86vh; background: #101218; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 48px rgba(0, 0, 0, .55); } /* 标题行（会员/OEM 页签 + ✕）移出滚动区：内容滚到哪都点得到关闭 */ .oem-intro-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 14px 18px 12px; border-bottom: 1px solid #22262f; background: #101218; } .oem-intro-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 16px 18px 20px; color: #e8eaf0; } /* 手机端：留白再收紧一点，视口高度走 dvh（iOS 地址栏伸缩时 vh 偏大，会让底部被切） */ @media (max-width: 760px) { .oem-intro-mask, .dist-oem-intro-mask { padding: 10px; } .oem-intro-panel { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; } .oem-intro-head { padding: 12px 14px 10px; } .oem-intro-scroll { padding: 14px 14px 18px; } } /* ===== 代理状态标签 + 续费按钮（2026-10-26 补）===== 这两个类原本只定义在 dist.css，而 **portal.html 的样式表是 admin-shell + dist-ui + pt-table + mobile，从来不含 dist.css** —— 于是代理中心「代理 · 至 2026-10-26」和 「续费」一直是裸元素（标签没底色、续费是默认蓝色小链接）。 两个中心都加载 dist-ui.css，因此把这一小组样式移到这里，口径与分销中心一致。 续费是 而不是