灵应
7462f8d42c
CI/CD Pipeline / Build Production Runtime Images (push) Has been skipped
CI/CD Pipeline / Deploy Production (push) Has been skipped
CI/CD Pipeline / Production Browser E2E (push) Has been skipped
CI/CD Pipeline / Staging E2E Tests (push) Failing after 74h3m41s
CI/CD Pipeline / Deploy Staging (push) Failing after 74h5m24s
CI/CD Pipeline / Frontend Lint (push) Failing after 74h6m0s
CI/CD Pipeline / Validate Code Quality And Tests (push) Failing after 74h6m47s
V21 UI 仅适配浅色主题，暗色主题未完整适配。 删除 @media (prefers-color-scheme: dark) 整个块， 保留 .dark 类 / data-theme="dark" 手动切换机制。 Fixes: 系统暗色模式用户看到文字看不清的问题
651 lines
18 KiB
CSS
651 lines
18 KiB
CSS
/**
|
||
* V21 设计系统 - 全局样式
|
||
* 核心设计规范：Indigo 主色 / 大圆角 / 毛玻璃 / 渐变背景
|
||
*
|
||
* 变量命名规范：
|
||
* --{类别}-{语义}-{层级}
|
||
* 例: --color-primary-500, --space-md, --radius-lg, --shadow-card
|
||
*
|
||
* 分类索引：
|
||
* 1. 主色 / 辅色 / 强调色
|
||
* 2. 状态色（success / warning / error / info）
|
||
* 3. 中性色 / 灰阶
|
||
* 4. 文字色
|
||
* 5. 背景色
|
||
* 6. 边框色
|
||
* 7. 间距
|
||
* 8. 字体
|
||
* 9. 圆角
|
||
* 10. 阴影
|
||
* 11. 过渡动画
|
||
* 12. 响应式断点
|
||
* 13. 层级（z-index）
|
||
* 14. 兼容别名（映射旧变量名 → 标准名）
|
||
*/
|
||
|
||
/* ============================================================
|
||
浅色主题（默认）
|
||
============================================================ */
|
||
:root {
|
||
/* ── 1. 主色 / 辅色 / 强调色 ─────────────────────────────── */
|
||
--color-primary-50: #eef2ff;
|
||
--color-primary-100: #e0e7ff;
|
||
--color-primary-200: #c7d2fe;
|
||
--color-primary-300: #a5b4fc;
|
||
--color-primary-400: #818cf8;
|
||
--color-primary-500: #6366f1;
|
||
--color-primary-600: #4f46e5;
|
||
--color-primary-700: #4338ca;
|
||
--color-primary-800: #3730a3;
|
||
--color-primary-900: #312e81;
|
||
|
||
/* 主色快捷别名 */
|
||
--primary-color: var(--color-primary-600);
|
||
--primary-hover: var(--color-primary-500);
|
||
--primary-dark: var(--color-primary-700);
|
||
--primary-soft: var(--color-primary-50);
|
||
--gradient-primary: linear-gradient(
|
||
135deg,
|
||
var(--color-primary-500),
|
||
var(--color-primary-600)
|
||
);
|
||
|
||
/* 辅色 — Emerald */
|
||
--color-secondary-50: #ecfdf5;
|
||
--color-secondary-100: #d1fae5;
|
||
--color-secondary-200: #a7f3d0;
|
||
--color-secondary-300: #6ee7b7;
|
||
--color-secondary-400: #34d399;
|
||
--color-secondary-500: #10b981;
|
||
--color-secondary-600: #059669;
|
||
--color-secondary-700: #047857;
|
||
--color-secondary-800: #065f46;
|
||
--color-secondary-900: #064e3b;
|
||
|
||
--secondary-color: var(--color-secondary-500);
|
||
--secondary-hover: var(--color-secondary-400);
|
||
--secondary-dark: var(--color-secondary-600);
|
||
--secondary-soft: var(--color-secondary-50);
|
||
|
||
/* 强调色 — Amber */
|
||
--color-accent-50: #fffbeb;
|
||
--color-accent-100: #fef3c7;
|
||
--color-accent-200: #fde68a;
|
||
--color-accent-300: #fcd34d;
|
||
--color-accent-400: #fbbf24;
|
||
--color-accent-500: #f59e0b;
|
||
--color-accent-600: #d97706;
|
||
--color-accent-700: #b45309;
|
||
--color-accent-800: #92400e;
|
||
--color-accent-900: #78350f;
|
||
|
||
--accent-color: var(--color-accent-500);
|
||
--accent-hover: var(--color-accent-400);
|
||
--accent-dark: var(--color-accent-600);
|
||
--accent-soft: var(--color-accent-50);
|
||
|
||
/* ── 2. 状态色 ───────────────────────────────────────────── */
|
||
--success-color: var(--color-secondary-500);
|
||
--success-hover: var(--color-secondary-400);
|
||
--success-soft: var(--color-secondary-50);
|
||
--success-border: var(--color-secondary-200);
|
||
|
||
--warning-color: var(--color-accent-500);
|
||
--warning-hover: var(--color-accent-400);
|
||
--warning-soft: var(--color-accent-50);
|
||
--warning-border: var(--color-accent-200);
|
||
|
||
--error-color: #ef4444;
|
||
--error-hover: #f87171;
|
||
--error-soft: #fef2f2;
|
||
--error-border: #fecaca;
|
||
|
||
--info-color: var(--color-primary-600);
|
||
--info-hover: var(--color-primary-500);
|
||
--info-soft: var(--color-primary-50);
|
||
--info-border: var(--color-primary-200);
|
||
|
||
/* ── 3. 中性色 / 灰阶 ────────────────────────────────────── */
|
||
--color-gray-50: #f8fafc;
|
||
--color-gray-100: #f1f5f9;
|
||
--color-gray-200: #e2e8f0;
|
||
--color-gray-300: #cbd5e1;
|
||
--color-gray-400: #94a3b8;
|
||
--color-gray-500: #64748b;
|
||
--color-gray-600: #475569;
|
||
--color-gray-700: #334155;
|
||
--color-gray-800: #1e293b;
|
||
--color-gray-900: #0f172a;
|
||
--color-gray-950: #020617;
|
||
|
||
/* ── 4. 文字色 ───────────────────────────────────────────── */
|
||
--text-primary: var(--color-gray-900);
|
||
--text-secondary: var(--color-gray-500);
|
||
--text-tertiary: var(--color-gray-400);
|
||
--text-disabled: var(--color-gray-300);
|
||
--text-inverse: #ffffff;
|
||
--text-link: var(--color-primary-600);
|
||
--text-link-hover: var(--color-primary-500);
|
||
|
||
/* ── 5. 背景色 ───────────────────────────────────────────── */
|
||
--bg-primary: #ffffff;
|
||
--bg-secondary: var(--color-gray-50);
|
||
--bg-tertiary: var(--color-gray-100);
|
||
--bg-elevated: #ffffff;
|
||
--bg-overlay: rgba(15, 23, 42, 0.45);
|
||
--bg-glass: rgba(255, 255, 255, 0.86);
|
||
--bg-glass-border: rgba(255, 255, 255, 0.2);
|
||
|
||
/* ── 6. 边框色 ───────────────────────────────────────────── */
|
||
--border-color: var(--color-gray-200);
|
||
--border-light: var(--color-gray-100);
|
||
--border-dark: var(--color-gray-300);
|
||
--divider-color: #f0f0f0;
|
||
|
||
/* ── 7. 间距 ─────────────────────────────────────────────── */
|
||
--space-0: 0;
|
||
--space-xxs: 2px;
|
||
--space-xs: 4px;
|
||
--space-sm: 8px;
|
||
--space-md: 16px;
|
||
--space-lg: 24px;
|
||
--space-xl: 32px;
|
||
--space-2xl: 48px;
|
||
--space-3xl: 64px;
|
||
--space-4xl: 96px;
|
||
|
||
/* ── 8. 字体 ─────────────────────────────────────────────── */
|
||
--font-family-base:
|
||
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||
"Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
|
||
--font-family-mono:
|
||
"JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
|
||
|
||
--font-size-xs: 11px;
|
||
--font-size-sm: 12px;
|
||
--font-size-base: 14px;
|
||
--font-size-md: 16px;
|
||
--font-size-lg: 18px;
|
||
--font-size-xl: 20px;
|
||
--font-size-2xl: 24px;
|
||
--font-size-3xl: 30px;
|
||
--font-size-4xl: 36px;
|
||
--font-size-5xl: 48px;
|
||
|
||
--font-weight-normal: 400;
|
||
--font-weight-medium: 500;
|
||
--font-weight-semibold: 600;
|
||
--font-weight-bold: 700;
|
||
--font-weight-extrabold: 850;
|
||
|
||
--line-height-tight: 1.25;
|
||
--line-height-base: 1.5;
|
||
--line-height-relaxed: 1.75;
|
||
|
||
--letter-spacing-tight: -0.02em;
|
||
--letter-spacing-base: 0;
|
||
--letter-spacing-wide: 0.02em;
|
||
--letter-spacing-wider: 0.04em;
|
||
|
||
/* ── 9. 圆角 ─────────────────────────────────────────────── */
|
||
--radius-none: 0;
|
||
--radius-xs: 8px;
|
||
--radius-sm: 14px;
|
||
--radius-md: 18px;
|
||
--radius-lg: 24px;
|
||
--radius-xl: 28px;
|
||
--radius-2xl: 36px;
|
||
--radius-full: 9999px;
|
||
|
||
/* ── 10. 阴影 ────────────────────────────────────────────── */
|
||
--shadow-none: none;
|
||
--shadow-xs: 0 4px 12px rgba(15, 23, 42, 0.04);
|
||
--shadow-sm: 0 10px 30px rgba(15, 23, 42, 0.06);
|
||
--shadow-md: 0 20px 58px rgba(15, 23, 42, 0.1);
|
||
--shadow-lg: 0 30px 90px rgba(15, 23, 42, 0.15);
|
||
--shadow-xl: 0 40px 120px rgba(15, 23, 42, 0.2);
|
||
--shadow-hover: 0 18px 34px rgba(79, 70, 229, 0.28);
|
||
--shadow-card: 0 24px 70px rgba(15, 23, 42, 0.09);
|
||
--shadow-primary: 0 14px 26px rgba(79, 70, 229, 0.22);
|
||
--shadow-inner: inset 0 2px 6px rgba(15, 23, 42, 0.06);
|
||
--shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.08);
|
||
|
||
/* ── 11. 过渡动画 ────────────────────────────────────────── */
|
||
--transition-fastest: 100ms ease;
|
||
--transition-fast: 150ms ease;
|
||
--transition-base: 200ms ease;
|
||
--transition-slow: 300ms ease;
|
||
--transition-slower: 500ms ease;
|
||
|
||
--transition-colors:
|
||
color 200ms ease, background-color 200ms ease, border-color 200ms ease;
|
||
--transition-shadow: box-shadow 200ms ease;
|
||
--transition-transform: transform 200ms ease;
|
||
--transition-all: all 200ms ease;
|
||
|
||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
|
||
/* ── 12. 响应式断点（仅做记录，媒体查询中直接使用像素值） ── */
|
||
/* xs: 480px | sm: 576px | md: 768px | lg: 992px | xl: 1200px | 2xl: 1400px */
|
||
--breakpoint-xs: 480px;
|
||
--breakpoint-sm: 576px;
|
||
--breakpoint-md: 768px;
|
||
--breakpoint-lg: 992px;
|
||
--breakpoint-xl: 1200px;
|
||
--breakpoint-2xl: 1400px;
|
||
|
||
/* ── 13. 层级 ────────────────────────────────────────────── */
|
||
--z-dropdown: 100;
|
||
--z-sticky: 200;
|
||
--z-fixed: 300;
|
||
--z-modal-backdrop: 400;
|
||
--z-modal: 500;
|
||
--z-popover: 600;
|
||
--z-tooltip: 700;
|
||
--z-toast: 800;
|
||
|
||
/* ── 14. 兼容别名（旧变量名 → 标准名，后续逐步迁移） ─────── */
|
||
--slate: var(--color-gray-900);
|
||
--muted: var(--color-gray-500);
|
||
--indigo: var(--color-primary-600);
|
||
--indigo-soft: var(--color-primary-50);
|
||
--line: var(--color-gray-200);
|
||
--bg: var(--color-gray-50);
|
||
--green: var(--color-secondary-500);
|
||
--amber: var(--color-accent-500);
|
||
--ant-color-primary: var(--color-primary-600);
|
||
|
||
/* ── 15. 文档规范快捷别名 ─────────────────────────────────── */
|
||
/* 主色快捷方式 */
|
||
--primary: var(--color-primary-600);
|
||
--primary-light: var(--color-primary-400);
|
||
|
||
/* 辅色快捷方式 */
|
||
--secondary: var(--color-secondary-500);
|
||
--secondary-light: var(--color-secondary-400);
|
||
|
||
/* 强调色快捷方式 */
|
||
--accent: var(--color-accent-500);
|
||
--accent-light: var(--color-accent-400);
|
||
|
||
/* 状态色快捷方式 */
|
||
--success: var(--color-secondary-500);
|
||
--warning: var(--color-accent-500);
|
||
--error: #ef4444;
|
||
--info: var(--color-primary-600);
|
||
|
||
/* 功能色 */
|
||
--red: #ef4444;
|
||
}
|
||
|
||
/* ============================================================
|
||
深色主题
|
||
通过 .dark 类或 data-theme="dark" 属性手动激活（已禁用系统自动跟随）
|
||
============================================================ */
|
||
.dark,
|
||
[data-theme="dark"] {
|
||
/* 主色保持，提高亮度 */
|
||
--color-primary-50: #2e2b5e;
|
||
--color-primary-500: #818cf8;
|
||
--color-primary-600: #6366f1;
|
||
--color-primary-700: #4f46e5;
|
||
|
||
--primary-color: var(--color-primary-500);
|
||
--primary-hover: var(--color-primary-400, #a5b4fc);
|
||
--primary-dark: var(--color-primary-600);
|
||
--primary-soft: rgba(99, 102, 241, 0.15);
|
||
--gradient-primary: linear-gradient(
|
||
135deg,
|
||
var(--color-primary-500),
|
||
var(--color-primary-600)
|
||
);
|
||
|
||
/* 辅色 */
|
||
--secondary-color: var(--color-secondary-400, #34d399);
|
||
--secondary-hover: var(--color-secondary-300, #6ee7b7);
|
||
--secondary-soft: rgba(16, 185, 129, 0.15);
|
||
|
||
/* 强调色 */
|
||
--accent-color: var(--color-accent-400, #fbbf24);
|
||
--accent-hover: var(--color-accent-300, #fcd34d);
|
||
--accent-soft: rgba(245, 158, 11, 0.15);
|
||
|
||
/* 状态色 */
|
||
--success-color: var(--color-secondary-400, #34d399);
|
||
--success-soft: rgba(16, 185, 129, 0.15);
|
||
--warning-color: var(--color-accent-400, #fbbf24);
|
||
--warning-soft: rgba(245, 158, 11, 0.15);
|
||
--error-color: #f87171;
|
||
--error-soft: rgba(239, 68, 68, 0.15);
|
||
--info-color: var(--color-primary-500);
|
||
--info-soft: rgba(99, 102, 241, 0.15);
|
||
|
||
/* 文字 */
|
||
--text-primary: #f1f5f9;
|
||
--text-secondary: #94a3b8;
|
||
--text-tertiary: #64748b;
|
||
--text-disabled: #475569;
|
||
--text-inverse: var(--color-gray-900);
|
||
--text-link: var(--color-primary-400, #818cf8);
|
||
--text-link-hover: var(--color-primary-300, #a5b4fc);
|
||
|
||
/* 背景 */
|
||
--bg-primary: #0f172a;
|
||
--bg-secondary: #1e293b;
|
||
--bg-tertiary: #334155;
|
||
--bg-elevated: #1e293b;
|
||
--bg-overlay: rgba(0, 0, 0, 0.65);
|
||
--bg-glass: rgba(15, 23, 42, 0.8);
|
||
--bg-glass-border: rgba(255, 255, 255, 0.08);
|
||
|
||
/* 边框 */
|
||
--border-color: #334155;
|
||
--border-light: #1e293b;
|
||
--border-dark: #475569;
|
||
--divider-color: #1e293b;
|
||
|
||
/* 阴影 */
|
||
--shadow-xs: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||
--shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||
--shadow-md: 0 20px 58px rgba(0, 0, 0, 0.4);
|
||
--shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.5);
|
||
--shadow-card: 0 24px 70px rgba(0, 0, 0, 0.35);
|
||
--shadow-hover: 0 18px 34px rgba(99, 102, 241, 0.35);
|
||
--shadow-primary: 0 14px 26px rgba(99, 102, 241, 0.3);
|
||
|
||
/* 兼容别名 */
|
||
--slate: #f1f5f9;
|
||
--muted: #94a3b8;
|
||
--indigo: #6366f1;
|
||
--indigo-soft: rgba(99, 102, 241, 0.15);
|
||
--line: #334155;
|
||
--bg: #1e293b;
|
||
--green: #34d399;
|
||
--amber: #fbbf24;
|
||
--ant-color-primary: #6366f1;
|
||
}
|
||
|
||
/* [已禁用] 跟随系统深色模式 — V21 UI 仅适配浅色主题，强制浅色 */
|
||
/* 如需手动深色，仍可通过 .dark 类或 data-theme="dark" 激活 */
|
||
|
||
/* ========== 全局背景装饰层 ========== */
|
||
body {
|
||
position: relative;
|
||
}
|
||
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background:
|
||
radial-gradient(
|
||
circle at 18% 20%,
|
||
rgba(79, 70, 229, 0.11),
|
||
transparent 30%
|
||
),
|
||
radial-gradient(
|
||
circle at 86% 14%,
|
||
rgba(16, 185, 129, 0.08),
|
||
transparent 28%
|
||
),
|
||
radial-gradient(
|
||
circle at 48% 80%,
|
||
rgba(99, 102, 241, 0.08),
|
||
transparent 34%
|
||
),
|
||
#f8fafc;
|
||
}
|
||
|
||
body::after {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
background-image: radial-gradient(
|
||
circle,
|
||
rgba(79, 70, 229, 0.1) 1px,
|
||
transparent 1px
|
||
);
|
||
background-size: 38px 38px;
|
||
opacity: 0.32;
|
||
}
|
||
|
||
#root {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* ========== 页面通用布局 ========== */
|
||
.xx-page {
|
||
padding: var(--space-xl);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.xx-page-head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--space-xl);
|
||
padding: var(--space-lg);
|
||
background: rgba(255, 255, 255, 0.94);
|
||
border: 1px solid rgba(226, 232, 240, 0.95);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.xx-page-head h2 {
|
||
font-size: 26px;
|
||
font-weight: 850;
|
||
color: var(--text-primary);
|
||
margin: 0 0 6px;
|
||
}
|
||
|
||
.xx-page-head p {
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* ========== V21 按钮样式 ========== */
|
||
.xx-primary-btn,
|
||
.ant-btn-primary {
|
||
background: var(--gradient-primary) !important;
|
||
color: white !important;
|
||
border: none !important;
|
||
border-radius: var(--radius-md) !important;
|
||
font-weight: 850 !important;
|
||
box-shadow: var(--shadow-primary) !important;
|
||
padding: 12px 22px !important;
|
||
transition: all 0.2s ease !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
.xx-primary-btn:hover,
|
||
.ant-btn-primary:hover {
|
||
box-shadow: var(--shadow-hover) !important;
|
||
transform: translateY(-1px);
|
||
background: var(--gradient-primary) !important;
|
||
}
|
||
|
||
.xx-ghost-btn,
|
||
.ant-btn-default {
|
||
background: var(--bg-primary) !important;
|
||
border: 1px solid var(--border-color) !important;
|
||
border-radius: var(--radius-md) !important;
|
||
font-weight: 850 !important;
|
||
padding: 12px 22px !important;
|
||
transition: all 0.2s ease !important;
|
||
color: var(--text-primary) !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
.xx-ghost-btn:hover,
|
||
.ant-btn-default:hover {
|
||
border-color: var(--primary-color) !important;
|
||
color: var(--primary-color) !important;
|
||
}
|
||
|
||
/* Ant Design Button 圆角覆盖 */
|
||
.ant-btn {
|
||
border-radius: var(--radius-md) !important;
|
||
}
|
||
|
||
/* ========== V21 卡片样式 ========== */
|
||
.xx-card {
|
||
background: rgba(255, 255, 255, 0.94);
|
||
border: 1px solid rgba(226, 232, 240, 0.95);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-card);
|
||
padding: var(--space-xl);
|
||
margin-bottom: var(--space-lg);
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.xx-card:hover {
|
||
box-shadow: var(--shadow-md);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.xx-card h3 {
|
||
font-size: 20px;
|
||
font-weight: 850;
|
||
color: var(--text-primary);
|
||
margin: 0 0 var(--space-md);
|
||
}
|
||
|
||
/* ========== 上传区域 ========== */
|
||
.xx-upload-zone {
|
||
border: 2px dashed var(--border-color);
|
||
border-radius: var(--radius-lg);
|
||
padding: 48px;
|
||
text-align: center;
|
||
background: var(--bg-secondary);
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.xx-upload-zone:hover {
|
||
border-color: var(--primary-color);
|
||
background: var(--primary-soft);
|
||
}
|
||
|
||
.xx-upload-zone .icon {
|
||
font-size: 48px;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.xx-upload-zone p {
|
||
color: var(--text-secondary);
|
||
margin: var(--space-sm) 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.xx-upload-btn {
|
||
margin-top: var(--space-md);
|
||
}
|
||
|
||
/* ========== 空状态 ========== */
|
||
.xx-empty-state {
|
||
text-align: center;
|
||
padding: 48px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.xx-empty-state .icon {
|
||
font-size: 64px;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
/* ========== 工具类 ========== */
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
.text-right {
|
||
text-align: right;
|
||
}
|
||
.text-primary {
|
||
color: var(--primary-color);
|
||
}
|
||
.text-muted {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.mt-sm {
|
||
margin-top: var(--space-sm);
|
||
}
|
||
.mt-md {
|
||
margin-top: var(--space-md);
|
||
}
|
||
.mt-lg {
|
||
margin-top: var(--space-lg);
|
||
}
|
||
.mb-sm {
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
.mb-md {
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
.mb-lg {
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
/* ========== 卡片悬浮效果 ========== */
|
||
.card-hover {
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card-hover:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
/* ========== 选中态 ========== */
|
||
.selected-plan,
|
||
.selected-item {
|
||
border: 2px solid var(--primary-color) !important;
|
||
box-shadow: var(--shadow-md) !important;
|
||
}
|
||
|
||
/* ========== 网格布局 ========== */
|
||
.xx-grid-2 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.xx-grid-3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.xx-grid-4 {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.xx-grid-4 {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
.xx-grid-3 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.xx-grid-4,
|
||
.xx-grid-3,
|
||
.xx-grid-2 {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|