/** * Jumping Theme — Xboard / NaiveUI 全局深浅色适配 v6 * 五项修复：背景透出 / 主题记忆 / 无边框 / 紧凑布局 / JDM字体统一 */ /* ============================================================ 1. CSS 变量 — 深色（默认，星空模式） ============================================================ */ :root { --jp-primary: #4da8ff; --jp-accent: #7c6ef7; --jp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --jp-size: 14px; /* 背景 */ --jp-bg: transparent; --jp-bg2: rgba(18, 22, 34, 0.72); --jp-card: rgba(18, 24, 38, 0.78); /* 文字 */ --jp-text: #dde2f0; --jp-muted: #7a84a0; /* 边框 */ --jp-border: rgba(255, 255, 255, 0.05); /* 交互 */ --jp-hover: rgba(255, 255, 255, 0.05); --jp-sel-bg: rgba(77, 168, 255, 0.12); /* 输入框 */ --jp-input-bg: rgba(255, 255, 255, 0.05); --jp-input-bdr: rgba(255, 255, 255, 0.06); /* 表头 */ --jp-th-bg: rgba(255, 255, 255, 0.04); /* 阴影 */ --jp-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); /* 滚动条 */ --jp-scrollbar: rgba(255, 255, 255, 0.14); } /* ============================================================ 2. CSS 变量 — 浅色覆盖（薄荷绿模式） theme-sync.js 把 html[data-theme="light"] 写入 ============================================================ */ html[data-theme="light"] { --jp-primary: #0071e3; --jp-accent: #5856d6; --jp-bg: transparent; --jp-bg2: rgba(245, 247, 250, 0.92); --jp-card: rgba(255, 255, 255, 0.82); --jp-text: #101828; --jp-muted: #667085; --jp-border: rgba(16, 24, 40, 0.06); --jp-hover: rgba(16, 24, 40, 0.04); --jp-sel-bg: rgba(0, 113, 227, 0.10); --jp-input-bg: rgba(255, 255, 255, 0.92); --jp-input-bdr: rgba(16, 24, 40, 0.06); --jp-th-bg: rgba(245, 247, 250, 0.92); --jp-shadow: 0 12px 30px rgba(16, 24, 40, 0.06); --jp-scrollbar: rgba(16, 24, 40, 0.18); } /* ============================================================ 3. html / body 基础 + 背景 ============================================================ */ html, body { min-height: 100vh; color: var(--jp-text) !important; font-family: var(--jp-font) !important; font-size: var(--jp-size) !important; } body { background-color: #0b1020 !important; background-image: radial-gradient(circle at top, rgba(77,168,255,0.16), transparent 30%), radial-gradient(circle at 85% 20%, rgba(124,110,247,0.12), transparent 26%), linear-gradient(180deg, #0b1020 0%, #0f1527 100%) !important; background-attachment: fixed !important; background-size: 100% 100% !important; } html[data-theme="light"] body { background-color: #f4f6f8 !important; background-image: radial-gradient(circle at top, rgba(0,113,227,0.08), transparent 26%), linear-gradient(180deg, #f7f8fa 0%, #edf1f5 100%) !important; background-attachment: fixed !important; background-size: 100% 100% !important; } * { font-family: var(--jp-font); font-size: inherit; } /* ============================================================ 4. NaiveUI 主布局 — 全链路透明，让 body 背景穿透 ============================================================ */ /* 根布局 + 所有滚动层：透明 */ .n-layout, .n-layout > *, .n-scrollbar, .n-scrollbar-container, .n-scrollbar-content, .n-layout-content, .n-layout-content > *, article, section, .cus-scroll-y { background: transparent !important; color: var(--jp-text) !important; } /* 侧边栏：半透明毛玻璃 */ .n-layout-sider, [class*="n-layout-sider"], .n-layout-sider .n-scrollbar, .n-layout-sider .n-scrollbar-container, .n-layout-sider .n-scrollbar-content { background: var(--jp-card) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: none !important; border-right: none !important; } /* 顶栏：半透明毛玻璃 */ .n-layout-header, [class*="n-layout-header"] { background: var(--jp-card) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; box-shadow: none !important; border-bottom: none !important; color: var(--jp-text) !important; } /* ============================================================ 5. 主内容区 — 两侧留白 控制内容宽度的有效方式：给 .cus-scroll-y 加水平 padding （.cus-scroll-y 实际宽度约 937px，padding 直接收窄内容区） ============================================================ */ .n-layout-content, .cus-scroll-y { max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 20px !important; } /* ============================================================ 6. 卡片 — 半透明毛玻璃，无边框 ============================================================ */ .n-card, [class*="n-card"]:not(.n-menu-item):not(.n-menu-item-content) { background: var(--jp-card) !important; color: var(--jp-text) !important; border: none !important; border-radius: 14px !important; box-shadow: var(--jp-shadow) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .n-card__header, .n-card__content, .n-card__footer, .n-card__header-extra { color: var(--jp-text) !important; background: transparent !important; border: none !important; } .n-card__header { border-bottom: none !important; font-size: 15px !important; font-weight: 600 !important; } /* ============================================================ 7. 菜单（侧边栏） ============================================================ */ .n-menu { background: transparent !important; border: none !important; } .n-menu-item, .n-menu-item-content, .n-menu-item-content-wrapper, .n-menu [class*="menu-item"] { color: var(--jp-text) !important; background: transparent !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; } .n-menu-item *, .n-menu-item-content *, .n-layout-sider .n-menu-item *, .n-layout-sider .n-menu-item-content * { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } .n-menu-item-content:hover, .n-menu-item:hover { background: var(--jp-hover) !important; } .n-menu-item--selected .n-menu-item-content { background: var(--jp-sel-bg) !important; color: var(--jp-primary) !important; border-left: 3px solid var(--jp-primary) !important; } .n-menu-item--selected .n-menu-item-content, .n-menu-item--selected .n-menu-item-content * { color: var(--jp-primary) !important; } /* ============================================================ 8. 输入框 ============================================================ */ .n-input { background: rgba(255, 255, 255, 0.045) !important; border: none !important; border-radius: 12px !important; color: var(--jp-text) !important; box-shadow: none !important; font-size: var(--jp-size) !important; } .n-input:focus-within { border: none !important; box-shadow: 0 0 0 1.5px rgba(77, 168, 255, 0.16) !important; } .n-input__input-el, .n-input__textarea-el, input.n-input__input-el, .n-input input { background: transparent !important; color: var(--jp-text) !important; border: none !important; box-shadow: none !important; outline: none !important; font-size: var(--jp-size) !important; } .n-input__input-el::placeholder, .n-input__textarea-el::placeholder, input::placeholder { color: var(--jp-muted) !important; opacity: 1; } /* ============================================================ 9. 按钮 ============================================================ */ .n-button--default-type { background: var(--jp-card) !important; color: var(--jp-text) !important; border-color: var(--jp-border) !important; } .n-button--primary-type, button[type="submit"].n-button { background: var(--jp-primary) !important; border-color: var(--jp-primary) !important; border-radius: 10px !important; font-weight: 600 !important; color: #fff !important; } .n-button--primary-type:hover { opacity: 0.88; } a, .n-button--text-type { color: var(--jp-primary) !important; } /* ============================================================ 10. 表格 ============================================================ */ .n-data-table, .n-data-table-wrapper { background: transparent !important; border: none !important; } .n-data-table-th { background: var(--jp-th-bg) !important; color: var(--jp-text) !important; border: none !important; box-shadow: none !important; font-size: var(--jp-size) !important; font-weight: 600 !important; } .n-data-table-td { color: var(--jp-text) !important; border: none !important; border-bottom: 1px solid var(--jp-border) !important; font-size: var(--jp-size) !important; } .n-data-table-tr:hover .n-data-table-td { background: var(--jp-hover) !important; } /* ============================================================ 11. 下拉菜单 / Select ============================================================ */ .n-dropdown, .n-dropdown-menu, .n-base-select-menu, .n-select-menu, .v-binder-follower-content .n-dropdown, .v-binder-follower-content .n-base-select-menu { background: var(--jp-card) !important; border: none !important; box-shadow: var(--jp-shadow) !important; color: var(--jp-text) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .n-dropdown-option-body, .n-base-select-option { color: var(--jp-text) !important; } .n-dropdown-option-body--pending, .n-base-select-option--pending { background: var(--jp-hover) !important; } .n-dropdown-option__label, .n-base-select-option__content { color: var(--jp-text) !important; } /* ============================================================ 12. Modal ============================================================ */ .n-modal, .n-card.n-modal { background: var(--jp-card) !important; color: var(--jp-text) !important; border: none !important; border-radius: 18px !important; box-shadow: var(--jp-shadow) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } .n-modal-mask { background: rgba(0, 0, 0, 0.60) !important; } /* ============================================================ 13. 表单 ============================================================ */ .n-form, .n-form-item, .n-form-item-content { border: none !important; box-shadow: none !important; } .n-form-item-label, .n-form-item-label__text, .n-form label { color: var(--jp-text) !important; font-size: var(--jp-size) !important; } .n-form-item-blank__feedback, .n-form-item-feedback { color: var(--jp-muted) !important; } .n-switch + span, .n-switch + label, .n-form-item .n-switch ~ * { color: var(--jp-text) !important; } /* ============================================================ 14. Tabs ============================================================ */ .n-tabs { color: var(--jp-text) !important; } .n-tabs-nav { background: transparent !important; border-color: var(--jp-border) !important; } .n-tabs-tab { color: var(--jp-muted) !important; font-size: var(--jp-size) !important; } .n-tabs-tab--active, .n-tabs-tab--active .n-tabs-tab__label { color: var(--jp-primary) !important; } .n-tabs-bar { background: var(--jp-primary) !important; } .n-tab-pane { color: var(--jp-text) !important; } /* ============================================================ 15. Tag / Badge ============================================================ */ .n-tag { background: var(--jp-bg2) !important; color: var(--jp-text) !important; border: none !important; font-size: 12px !important; } /* ============================================================ 16. 描述列表 ============================================================ */ .n-descriptions-table-content, .n-descriptions-table-header, .n-descriptions-table-th, .n-descriptions-table-td { background: transparent !important; color: var(--jp-text) !important; border: none !important; font-size: var(--jp-size) !important; } /* ============================================================ 17. 统计 / 进度条 ============================================================ */ .n-statistic-value__content { color: var(--jp-text) !important; font-size: 22px !important; } .n-statistic-label { color: var(--jp-muted) !important; font-size: 12px !important; } .n-progress-graph-line-rail { background: var(--jp-bg2) !important; } /* ============================================================ 18. Popover / Tooltip ============================================================ */ .n-popover, .n-tooltip { background: var(--jp-card) !important; color: var(--jp-text) !important; border: none !important; box-shadow: var(--jp-shadow) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .n-popover-arrow-wrapper .n-popover-arrow { background: var(--jp-card) !important; } /* ============================================================ 19. 空状态 ============================================================ */ .n-empty__description, .n-empty__icon { color: var(--jp-muted) !important; } /* ============================================================ 20. 分割线 ============================================================ */ .n-divider { border-color: var(--jp-border) !important; } .n-divider--title-position-center .n-divider__title { color: var(--jp-muted) !important; } /* ============================================================ 21. 分页 ============================================================ */ .n-pagination-item { background: var(--jp-card) !important; color: var(--jp-text) !important; border: none !important; font-size: var(--jp-size) !important; } .n-pagination-item--active { background: var(--jp-primary) !important; color: #fff !important; } .n-pagination-item:hover:not(.n-pagination-item--active) { background: var(--jp-hover) !important; } /* ============================================================ 22. 列表 ============================================================ */ .n-list, .n-list-item { background: transparent !important; color: var(--jp-text) !important; border: none !important; font-size: var(--jp-size) !important; } /* ============================================================ 23. 通知 / 警告 ============================================================ */ .n-notification, .n-alert { background: var(--jp-card) !important; color: var(--jp-text) !important; border: none !important; } /* ============================================================ 24. 滚动条 ============================================================ */ .n-scrollbar-rail__scrollbar { background: var(--jp-scrollbar) !important; } /* ============================================================ 25. 面包屑 ============================================================ */ .n-breadcrumb-item { color: var(--jp-muted) !important; font-size: var(--jp-size) !important; } .n-breadcrumb-item:last-child { color: var(--jp-text) !important; } .n-breadcrumb__separator { color: var(--jp-muted) !important; } /* ============================================================ 26. Collapse ============================================================ */ .n-collapse, .n-collapse-item, .n-collapse-item__header { background: transparent !important; color: var(--jp-text) !important; border: none !important; } .n-collapse-item__content-inner { color: var(--jp-muted) !important; } /* ============================================================ 27. 全局去除边框与阴影 ============================================================ */ .n-card, .n-data-table, .n-modal, .n-form, .n-form-item, .n-layout-sider, .n-menu, .n-input, .n-button, .n-switch, .n-descriptions, .n-empty, .n-tabs, .n-collapse { box-shadow: none !important; } /* 彻底清除 NaiveUI 可能在任何层注入的实色背景 */ [style*="background-color: rgb(24, 24, 28)"], [style*="background-color: rgb(16, 16, 20)"], [style*="background-color: rgb(255, 255, 255)"] { background-color: transparent !important; } /* ============================================================ 28. Logo ============================================================ */ .n-layout-sider > .logo, .n-layout-header .logo { font-size: 1.4rem !important; font-weight: 700 !important; color: var(--jp-primary) !important; } /* ============================================================ 29. 仪表盘注入模块（#JDM）— 背景透明 + 字体统一 ============================================================ */ /* 这里仅保留 JDM 的全局继承与主题联动，具体布局/字号/层级交给 theme-dashboard-modules.js。 */ #JDM, #JDM * { font-family: var(--jp-font) !important; } #JDM .jdm-stat, #JDM .jdm-card, #JDM .jdm-sub, #JDM .jdm-client, #JDM .jdm-os-tab, #JDM .jdm-empty, #JDM .jdm-notice-date, #JDM .jdm-notice-body { color: var(--jp-text) !important; } #JDM .jdm-stat-label, #JDM .jdm-stat-sub, #JDM .jdm-client-ver, #JDM .jdm-notice-date, #JDM .jdm-empty { color: var(--jp-muted) !important; } #JDM .jdm-progress-bar { background: var(--jp-hover) !important; } #JDM .jdm-progress-fill { background: var(--jp-primary) !important; } #JDM .jdm-progress-fill.warn { background: #ff453a !important; } /* ============================================================ 30. 套餐列表页 — 复刻 gw树洞风格 ============================================================ */ /* ── 容器：横排等宽网格 ── */ .card-container[data-v-16d7c058] { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; max-width: 100% !important; margin: 0 !important; } /* ── 每个卡片外壳 ── */ .card-item[data-v-16d7c058], .card-item.min-w-75 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* ── 卡片本体 ── */ .card-item[data-v-16d7c058] .n-card, .card-item.min-w-75 .n-card { background: var(--jp-card) !important; border: none !important; border-radius: 16px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; overflow: hidden !important; height: 100% !important; min-height: 420px !important; display: flex !important; flex-direction: column !important; } .card-item[data-v-16d7c058] .n-card:hover, .card-item.min-w-75 .n-card:hover { transform: translateY(-3px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important; } /* ── 套餐名称：居中、大号加粗 ── */ .card-item[data-v-16d7c058] .n-card__header, .card-item.min-w-75 .n-card__header { font-size: 26px !important; font-weight: 800 !important; padding: 32px 24px 4px !important; text-align: center !important; justify-content: center !important; color: var(--jp-text) !important; border-bottom: none !important; } /* ── 价格：蓝色、超大号 ── */ .card-item[data-v-16d7c058] .n-card__header-extra, .card-item.min-w-75 .n-card__header-extra { font-size: 40px !important; font-weight: 800 !important; color: var(--jp-primary) !important; padding: 12px 24px 16px !important; letter-spacing: -1px !important; text-align: center !important; width: 100% !important; display: block !important; border-bottom: 1px solid rgba(148, 163, 184, 0.05) !important; } /* ── 卡片内容区：描述 + 特性 ── */ .card-item[data-v-16d7c058] .n-card__content, .card-item.min-w-75 .n-card__content { padding: 20px 24px !important; flex: 1 !important; font-size: 14px !important; line-height: 2 !important; color: var(--jp-muted) !important; text-align: center !important; } /* ── 参数/特性列表行 ── */ .card-item[data-v-16d7c058] .n-card__content .vertical-center, .card-item.min-w-75 .n-card__content .vertical-center { padding: 6px 0 !important; font-size: 14px !important; text-align: center !important; color: var(--jp-text) !important; } /* ── 卡片底部：全宽蓝色按钮 ── */ .card-item[data-v-16d7c058] .n-card__action, .card-item.min-w-75 .n-card__action { padding: 0 !important; background: transparent !important; border-top: none !important; margin-top: auto !important; } .card-item[data-v-16d7c058] .n-card__action .n-button, .card-item.min-w-75 .n-card__action .n-button { width: 100% !important; border-radius: 0 0 16px 16px !important; font-weight: 600 !important; font-size: 16px !important; padding: 16px 0 !important; background: var(--jp-primary) !important; color: #fff !important; border: none !important; transition: opacity 0.15s !important; letter-spacing: 4px !important; } .card-item[data-v-16d7c058] .n-card__action .n-button:hover, .card-item.min-w-75 .n-card__action .n-button:hover { opacity: 0.85 !important; } /* ── 亮色模式 ── */ html[data-theme="light"] .card-item[data-v-16d7c058] .n-card, html[data-theme="light"] .card-item.min-w-75 .n-card { background: #fff !important; border-color: #e5e5e5 !important; } /* ── 响应式 ── */ @media (max-width: 960px) { .card-container[data-v-16d7c058] { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .card-container[data-v-16d7c058] { grid-template-columns: 1fr !important; } .card-item[data-v-16d7c058] .n-card { min-height: auto !important; } .card-item[data-v-16d7c058] .n-card__header { font-size: 22px !important; padding: 24px 16px 4px !important; } .card-item[data-v-16d7c058] .n-card__header-extra { font-size: 32px !important; } } /* ============================================================ 31. 套餐购买页 — 价格、标签、购买按钮美化 ============================================================ */ /* 套餐标签（推荐/热门等） */ .n-tag.n-tag--primary, .n-tag[type="primary"] { background: rgba(77, 168, 255, 0.18) !important; color: var(--jp-primary) !important; border: none !important; font-weight: 600 !important; } /* 套餐价格数字 */ .card-item .n-statistic-value__content, .card-item [class*="price"], .card-item [class*="amount"] { color: var(--jp-primary) !important; font-weight: 800 !important; } /* 套餐特性列表图标 */ .card-item .n-icon { color: #30d158 !important; } /* ============================================================ 32. 订单页 — 状态徽章、金额显示 ============================================================ */ /* 待支付 */ .n-tag[class*="warning"], .n-badge[class*="warning"] { background: rgba(255, 159, 10, 0.15) !important; color: #ff9f0a !important; border: none !important; } /* 已完成 */ .n-tag[class*="success"], .n-badge[class*="success"] { background: rgba(48, 209, 88, 0.15) !important; color: #30d158 !important; border: none !important; } /* 已取消/失败 */ .n-tag[class*="error"], .n-badge[class*="error"] { background: rgba(255, 69, 58, 0.15) !important; color: #ff453a !important; border: none !important; } /* 订单金额 */ .n-data-table-td [class*="price"], .n-data-table-td [class*="amount"], .n-data-table-td strong { color: var(--jp-primary) !important; font-weight: 700 !important; } /* ============================================================ 33. 邀请页 — 邀请链接框、返利统计 ============================================================ */ /* 邀请链接输入框：突出显示 */ .n-input-group .n-input { background: var(--jp-bg2) !important; border: none !important; border-right: none !important; box-shadow: inset 0 0 0 1px rgba(77, 168, 255, 0.06) !important; } /* 复制按钮 */ .n-input-group .n-button { background: var(--jp-primary) !important; color: #fff !important; border: none !important; } /* 返利金额：绿色突出 */ [class*="commission"] .n-statistic-value__content, [class*="rebate"] .n-statistic-value__content { color: #30d158 !important; } /* ============================================================ 34. 工单页 — 状态、消息气泡 ============================================================ */ /* 工单状态 */ .n-badge-sup { font-size: 11px !important; font-weight: 600 !important; } /* 工单消息气泡：用户消息 */ [class*="message-user"], [class*="msg-user"] { background: rgba(77, 168, 255, 0.15) !important; border-radius: 12px 12px 2px 12px !important; padding: 10px 14px !important; color: var(--jp-text) !important; } /* 工单消息气泡：客服消息 */ [class*="message-admin"], [class*="msg-admin"] { background: var(--jp-card) !important; border-radius: 12px 12px 12px 2px !important; padding: 10px 14px !important; color: var(--jp-text) !important; } /* ============================================================ 35. 个人设置页 — 头像区、安全设置 ============================================================ */ /* 头像容器 */ [class*="avatar"], .n-avatar { border: 2px solid var(--jp-primary) !important; box-shadow: 0 0 12px rgba(77, 168, 255, 0.3) !important; } /* 安全等级进度条 */ [class*="security"] .n-progress-graph-line-fill { background: linear-gradient(90deg, var(--jp-primary), var(--jp-accent)) !important; } /* ============================================================ 36. 知识库页 — 文章列表、内容区 ============================================================ */ /* 知识库分类标签 */ /* ============================================================ 37. 充值/钱包页 — 金额输入、支付方式 ============================================================ */ /* 充值金额快捷按钮 */ [class*="amount-btn"], [class*="recharge"] .n-button--default-type { background: var(--jp-bg2) !important; border: none !important; color: var(--jp-text) !important; border-radius: 10px !important; transition: all 0.2s !important; } [class*="amount-btn"]:hover, [class*="recharge"] .n-button--default-type:hover { border-color: var(--jp-primary) !important; color: var(--jp-primary) !important; background: rgba(77, 168, 255, 0.1) !important; } /* 支付方式卡片 */ [class*="payment"] .n-card, [class*="pay-method"] .n-card { border: none !important; cursor: pointer !important; transition: all 0.2s !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important; } [class*="payment"] .n-card:hover, [class*="pay-method"] .n-card:hover { background: rgba(77, 168, 255, 0.08) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important; } /* ============================================================ 38. 全局 — 页面标题区域美化 ============================================================ */ /* 页面顶部标题 */ .cus-scroll-y > div > .n-card:first-child .n-card__header, .page-header, [class*="page-title"] { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.3px !important; } /* 数字统计卡片（仪表盘原生统计区） */ .n-statistic { background: var(--jp-card) !important; border-radius: 14px !important; padding: 16px 20px !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* ============================================================ 39. 全局 — 加载动画、骨架屏 ============================================================ */ .n-skeleton { background: linear-gradient( 90deg, var(--jp-bg2) 25%, rgba(255,255,255,0.05) 50%, var(--jp-bg2) 75% ) !important; background-size: 200% 100% !important; animation: skeleton-shimmer 1.5s infinite !important; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ 40. 全局 — 移动端适配补充 ============================================================ */ @media (max-width: 768px) { .n-layout-content, .cus-scroll-y { padding: 0 16px !important; } .card-container[data-v-16d7c058] { max-width: 100% !important; } #JDM .jdm-stats { grid-template-columns: 1fr 1fr !important; } #JDM .jdm-row { grid-template-columns: 1fr !important; } } /* (第 41 节已合并到第 30 节) */ /* ============================================================ 42. 仪表盘 — 欢迎横幅（顶部问候语区域） ============================================================ */ /* 如果 Xboard 有顶部欢迎区域 */ [class*="welcome"], [class*="greeting"] { background: linear-gradient(135deg, rgba(77,168,255,0.12) 0%, rgba(124,110,247,0.08) 100%) !important; border-radius: 16px !important; padding: 20px 24px !important; border: 1px solid rgba(77, 168, 255, 0.15) !important; margin-bottom: 16px !important; } /* ============================================================ 43. 全局 — Switch 开关美化 ============================================================ */ .n-switch__rail { background: var(--jp-bg2) !important; } .n-switch--active .n-switch__rail { background: var(--jp-primary) !important; } /* ============================================================ 44. 全局 — 复制成功提示（Toast/Message） ============================================================ */ .n-message { background: var(--jp-card) !important; border: none !important; box-shadow: var(--jp-shadow) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; color: var(--jp-text) !important; } .n-message--success-type .n-message__icon { color: #30d158 !important; } .n-message--error-type .n-message__icon { color: #ff453a !important; } .n-message--warning-type .n-message__icon { color: #ff9f0a !important; } .n-message--info-type .n-message__icon { color: var(--jp-primary) !important; } /* ============================================================ 45. 全局 — 二维码、条形码区域 ============================================================ */ [class*="qrcode"], [class*="qr-code"] { background: #fff !important; padding: 12px !important; border-radius: 12px !important; display: inline-block !important; } /* ============================================================ 46. 第一阶段 UI 刷新覆盖层 科技感但克制：放大字号、增强层级、统一导航/卡片/表格质感 ============================================================ */ :root { --jp-primary: #5ea7ff; --jp-accent: #7b74ff; --jp-success: #34d399; --jp-warn: #ffb347; --jp-danger: #ff6b6b; --jp-info: #7dd3fc; --jp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; --jp-size: 16px; --jp-size-xs: 12px; --jp-size-sm: 14px; --jp-size-md: 16px; --jp-size-lg: 18px; --jp-size-xl: 24px; --jp-size-2xl: 32px; --jp-bg: transparent; --jp-bg2: rgba(15, 20, 34, 0.74); --jp-card: rgba(14, 20, 34, 0.74); --jp-card-strong: rgba(17, 24, 40, 0.9); --jp-card-soft: rgba(18, 26, 44, 0.62); --jp-text: #edf3ff; --jp-muted: #9aa8c7; --jp-muted-strong: #c2cde2; --jp-border: rgba(148, 163, 184, 0.06); --jp-border-strong: rgba(148, 163, 184, 0.12); --jp-hover: rgba(255, 255, 255, 0.06); --jp-sel-bg: rgba(94, 167, 255, 0.14); --jp-shadow: 0 22px 60px rgba(3, 8, 20, 0.28); --jp-shadow-soft: 0 14px 36px rgba(3, 8, 20, 0.18); --jp-radius-sm: 14px; --jp-radius-md: 20px; --jp-radius-lg: 28px; } html[data-theme="light"] { --jp-primary: #159a7a; --jp-accent: #42b883; --jp-success: #059669; --jp-warn: #d97706; --jp-danger: #dc2626; --jp-info: #0ea5e9; --jp-bg2: rgba(244, 251, 247, 0.96); --jp-card: rgba(251, 255, 253, 0.88); --jp-card-strong: rgba(255, 255, 255, 0.97); --jp-card-soft: rgba(246, 252, 248, 0.82); --jp-text: #0f172a; --jp-muted: #64748b; --jp-muted-strong: #334155; --jp-border: rgba(15, 23, 42, 0.05); --jp-border-strong: rgba(21, 154, 122, 0.10); --jp-hover: rgba(15, 23, 42, 0.045); --jp-sel-bg: rgba(21, 154, 122, 0.12); --jp-shadow: 0 18px 45px rgba(15, 23, 42, 0.08); --jp-shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.06); } html, body { font-size: var(--jp-size) !important; } body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; } body::before { background: radial-gradient(circle at 12% 12%, rgba(94, 167, 255, 0.18), transparent 24%), radial-gradient(circle at 88% 16%, rgba(123, 116, 255, 0.16), transparent 24%), radial-gradient(circle at 50% 100%, rgba(52, 211, 153, 0.08), transparent 30%); } body::after { background-image: linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(180deg, rgba(0,0,0,0.34), transparent 82%); } html[data-theme="light"] body::after { background-image: linear-gradient(rgba(15,23,42,0.016) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.016) 1px, transparent 1px); } html[data-theme="light"] body { background-color: #eef7f2 !important; background-image: radial-gradient(circle at 10% 10%, rgba(66,184,131,0.12), transparent 24%), radial-gradient(circle at 85% 12%, rgba(94,167,255,0.07), transparent 22%), linear-gradient(180deg, #f6fbf8 0%, #edf7f2 100%) !important; } .n-layout-sider { width: 250px !important; box-shadow: none !important; } .n-layout-header, [class*="n-layout-header"] { min-height: 76px !important; padding: 0 24px !important; box-shadow: 0 10px 30px rgba(2, 8, 23, 0.12) !important; } .n-layout-header *, .n-layout-sider * { letter-spacing: 0.01em; } .n-layout-content, .cus-scroll-y { max-width: 1680px !important; padding: 12px 28px 32px !important; } .n-menu-item, .n-menu-item-content, .n-menu-item-content-wrapper { min-height: 46px !important; font-size: 15px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; opacity: 1 !important; visibility: visible !important; } .n-layout-sider .n-menu, .n-layout-sider .n-menu-item, .n-layout-sider .n-menu-item-content, .n-layout-sider .n-menu-item-content-header, .n-layout-sider .n-menu-item-content__icon, .n-layout-sider .n-icon { color: var(--jp-text) !important; opacity: 1 !important; visibility: visible !important; } .n-layout-sider .n-menu-item { padding: 0 10px !important; } .n-layout-sider .n-menu-item-content { width: 100% !important; justify-content: flex-start !important; border-radius: 14px !important; padding: 0 14px !important; } .n-menu-item--selected .n-menu-item-content { border-left: none !important; box-shadow: none !important; background: rgba(94, 167, 255, 0.10) !important; } html[data-theme="light"] .n-menu-item--selected .n-menu-item-content { background: rgba(21, 154, 122, 0.14) !important; box-shadow: none !important; } .n-card, [class*="n-card"]:not(.n-menu-item):not(.n-menu-item-content) { border: 1px solid transparent !important; border-radius: 20px !important; box-shadow: var(--jp-shadow-soft) !important; } .n-card__header { padding-top: 22px !important; padding-bottom: 10px !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } .n-card__content, .n-card__footer, .n-descriptions-table-content, .n-data-table-td, .n-list-item, .n-form-item { font-size: 15px !important; } .n-button { min-height: 42px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.01em !important; } .n-button--primary-type, button[type="submit"].n-button { background-image: linear-gradient(135deg, var(--jp-primary), #3b82f6 58%, var(--jp-accent)) !important; box-shadow: 0 16px 32px rgba(59, 130, 246, 0.22) !important; } .n-data-table-wrapper, .n-list, .n-form, .n-tabs, .n-collapse { border: 1px solid transparent !important; border-radius: 20px !important; overflow: hidden !important; background: var(--jp-card) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } .n-data-table-th { font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.06em; } .n-data-table-td { padding-top: 16px !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(148, 163, 184, 0.028) !important; } html[data-theme="light"] .n-data-table-td { border-bottom-color: rgba(15, 23, 42, 0.024) !important; } .n-tabs-nav { padding: 0 12px !important; border-color: transparent !important; box-shadow: none !important; } .n-tabs-tab { min-height: 46px !important; font-size: 14px !important; font-weight: 700 !important; } .n-statistic { border: 1px solid transparent !important; border-radius: 20px !important; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), var(--jp-card) !important; } .n-statistic-value__content { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } .n-statistic-label { font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.06em; } .page-header, [class*="page-title"], .cus-scroll-y > div > .n-card:first-child .n-card__header { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } [class*="empty"], .n-empty__description { font-size: 15px !important; } [class*="invite"] .n-card, [class*="order"] .n-card, [class*="ticket"] .n-card, [class*="wallet"] .n-card, [class*="profile"] .n-card { border: 1px solid transparent !important; border-radius: 20px !important; } [class*="order"] .n-card__header, [class*="invite"] .n-card__header, [class*="ticket"] .n-card__header { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } [class*="order"] .n-data-table-wrapper, [class*="invite"] .n-data-table-wrapper, [class*="ticket"] .n-data-table-wrapper { box-shadow: var(--jp-shadow) !important; } [class*="order"] .n-data-table-th, [class*="invite"] .n-data-table-th, [class*="ticket"] .n-data-table-th { height: 52px !important; font-size: 14px !important; } [class*="order"] .n-data-table-td strong, [class*="invite"] .n-data-table-td strong, [class*="ticket"] .n-data-table-td strong, [class*="wallet"] .n-statistic-value__content { font-size: 16px !important; font-weight: 800 !important; } [class*="order"] .n-data-table-td, [class*="invite"] .n-data-table-td, [class*="ticket"] .n-data-table-td, [class*="wallet"] .n-data-table-td { line-height: 1.8 !important; } [class*="invite"] .n-statistic, [class*="wallet"] .n-statistic, [class*="profile"] .n-statistic { min-height: 132px !important; } [class*="invite"] .n-statistic-label, [class*="wallet"] .n-statistic-label, [class*="profile"] .n-statistic-label { font-size: 14px !important; } .n-input-group .n-input, .n-input-group .n-button, [class*="commission"], [class*="rebate"], [class*="amount-btn"], [class*="payment"] .n-card, [class*="pay-method"] .n-card { border-radius: 14px !important; } @media (max-width: 960px) { .n-layout-sider { width: 220px !important; } .n-layout-content, .cus-scroll-y { padding: 10px 18px 28px !important; } .page-header, [class*="page-title"], .cus-scroll-y > div > .n-card:first-child .n-card__header { font-size: 22px !important; } } /* ============================================================ 47. 第一阶段核心页面提质：订单 / 邀请 / 知识库 / 工单 / 钱包 ============================================================ */ [class*="order"] .n-data-table-wrapper, [class*="invite"] .n-data-table-wrapper, [class*="ticket"] .n-card, [class*="wallet"] .n-card, [class*="profile"] .n-card { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), var(--jp-card) !important; } [class*="order"] .n-data-table-th, [class*="invite"] .n-data-table-th, [class*="ticket"] .n-data-table-th { background: rgba(255,255,255,0.035) !important; } [class*="order"] .n-data-table-td, [class*="invite"] .n-data-table-td, [class*="ticket"] .n-data-table-td { font-size: 15px !important; color: var(--jp-text) !important; } [class*="order"] .n-tag, [class*="invite"] .n-tag, [class*="ticket"] .n-tag, [class*="wallet"] .n-tag { min-height: 28px !important; padding: 0 12px !important; border-radius: 999px !important; font-weight: 700 !important; } [class*="invite"] .n-input-group, [class*="wallet"] .n-input-group, [class*="profile"] .n-form { padding: 6px !important; border-radius: 18px !important; background: rgba(255,255,255,0.03) !important; border: 1px solid transparent !important; } [class*="ticket"] .n-card__header, [class*="wallet"] .n-card__header, [class*="profile"] .n-card__header { font-size: 20px !important; } [class*="invite"] .n-empty, [class*="order"] .n-empty, [class*="ticket"] .n-empty { padding: 40px 20px !important; } /* ============================================================ 48. 知识库页 — 去横线化瘦身 仅缩减边框与分割线，不改页面结构与交互 ============================================================ */ html.jp-route-knowledge .cus-scroll-y > div > .n-card { border: none !important; box-shadow: 0 16px 38px rgba(15, 23, 42, 0.07) !important; background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(247,250,248,0.93)) !important; } html.jp-route-knowledge .cus-scroll-y > div > .n-card > .n-card__header { border-bottom: none !important; padding-bottom: 6px !important; } html.jp-route-knowledge .cus-scroll-y > div > .n-card > .n-card__content { padding-top: 6px !important; } html.jp-route-knowledge .cus-scroll-y > div > .n-card .n-card { border: none !important; box-shadow: none !important; background: rgba(255, 255, 255, 0.72) !important; } html.jp-route-knowledge .cus-scroll-y > div > .n-card .n-card__header { border-bottom: none !important; padding-bottom: 4px !important; } html.jp-route-knowledge .cus-scroll-y > div > .n-card .n-card__content { padding-top: 2px !important; } html.jp-route-knowledge .cus-scroll-y > div > .n-card hr, html.jp-route-knowledge .cus-scroll-y > div > .n-card [class*="divider"], html.jp-route-knowledge .cus-scroll-y > div > .n-card [class*="split"], html.jp-route-knowledge .cus-scroll-y > div > .n-card [class*="border-b"] { border-color: transparent !important; background: transparent !important; }