ee078b61bc
- 后台全面引入 Naive UI 组件库，统一 UI 规范 - 前台 usePublicApi 切换到 API 调用（GET /api/content/[key]） - 前后台数据源统一（site_content 表） - 产品线统一管理（tour/camp/course 三套编辑器） - 产品数据归一化（itinerary/faq/pricing 格式统一） - 表单提交 API 改写入 submissions 表 - 新增 submissions 标记已读 API - site-content PUT 支持 upsert - 修复前台 bug（stories 路由冲突、占位符警告、selector breadcrumb） - 消除 PageHero 类型警告（useSEO reactive 修复） - 25 个前台页面全部 HTTP 200，展示效果不变 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
116 行
3.1 KiB
Plaintext
116 行
3.1 KiB
Plaintext
// ============================================
|
||
// 呼籁旅行官网 - 设计变量
|
||
// 视觉定位：精致温暖，草原+大地色调
|
||
// ============================================
|
||
|
||
// ---------- 色彩系统 ----------
|
||
|
||
// 主色 - 深林绿：自然、稳重、值得信赖
|
||
@color-primary: #2D6A4F;
|
||
@color-primary-dark: #1B4332;
|
||
@color-primary-light: #40916C;
|
||
@color-primary-lighter: #B7E4C7;
|
||
@color-primary-bg: #F0F7F4;
|
||
|
||
// 点缀 - 暖琥珀：温暖、家庭、亲和
|
||
@color-accent: #D4883A;
|
||
@color-accent-light: #E8A85C;
|
||
@color-accent-bg: #FFF8F0;
|
||
|
||
// 中性色
|
||
@color-text-primary: #1A1A2E;
|
||
@color-text-secondary: #4A4A5A;
|
||
@color-text-muted: #8A8A9A;
|
||
@color-text-placeholder: #BBBBC5;
|
||
@color-border: #E8E8ED;
|
||
@color-divider: #F0F0F4;
|
||
@color-bg-white: #FFFFFF;
|
||
@color-bg-gray: #F7F8FA;
|
||
@color-bg-warm: #FFFBF5;
|
||
|
||
// 语义色
|
||
@color-success: #2D6A4F;
|
||
@color-warning: #D4883A;
|
||
@color-error: #C1292E;
|
||
|
||
// ---------- 字体 ----------
|
||
|
||
@font-family-base: -apple-system, BlinkMacSystemFont, "PingFang SC",
|
||
"Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
|
||
|
||
@font-size-xs: 12px;
|
||
@font-size-sm: 14px;
|
||
@font-size-base: 16px;
|
||
@font-size-md: 18px;
|
||
@font-size-lg: 20px;
|
||
@font-size-xl: 24px;
|
||
@font-size-2xl: 30px;
|
||
@font-size-3xl: 36px;
|
||
@font-size-hero: 42px;
|
||
@font-size-display: 48px;
|
||
@font-size-display: 48px;
|
||
|
||
@line-height-tight: 1.3;
|
||
@line-height-normal: 1.5;
|
||
@line-height-base: 1.7;
|
||
@line-height-relaxed: 1.8;
|
||
@line-height-loose: 2.0;
|
||
|
||
@font-weight-normal: 400;
|
||
@font-weight-medium: 500;
|
||
@font-weight-bold: 700;
|
||
|
||
// ---------- 间距（8px网格） ----------
|
||
|
||
@space-xs: 4px;
|
||
@space-sm: 8px;
|
||
@space-md: 16px;
|
||
@space-lg: 24px;
|
||
@space-xl: 32px;
|
||
@space-2xl: 48px;
|
||
@space-3xl: 64px;
|
||
@space-4xl: 96px;
|
||
|
||
// ---------- 容器 ----------
|
||
|
||
@container-max-width: 1200px;
|
||
@container-padding: 20px;
|
||
@container-padding-desktop: 40px;
|
||
|
||
// ---------- 断点 ----------
|
||
|
||
@breakpoint-sm: 375px;
|
||
@breakpoint-md: 768px;
|
||
@breakpoint-lg: 1024px;
|
||
@breakpoint-xl: 1200px;
|
||
|
||
// ---------- 圆角与阴影 ----------
|
||
|
||
@border-radius-sm: 4px;
|
||
@border-radius-md: 8px;
|
||
@border-radius-lg: 16px;
|
||
@border-radius-xl: 24px;
|
||
@border-radius-full: 9999px;
|
||
|
||
// 精致的阴影层次（升级版：更有深度感）
|
||
@shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
@shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||
@shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
|
||
@shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
|
||
@shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
|
||
@shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16), 0 8px 20px rgba(0, 0, 0, 0.08);
|
||
@shadow-card-hover: 0 12px 36px rgba(45, 106, 79, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
|
||
// ---------- 渐变 ----------
|
||
|
||
@gradient-hero: linear-gradient(135deg, #1B4332 0%, #2D6A4F 50%, #40916C 100%);
|
||
@gradient-warm: linear-gradient(135deg, #FFFBF5 0%, #FFF8F0 50%, #F0F7F4 100%);
|
||
@gradient-cool: linear-gradient(135deg, #F0F7F4 0%, #E8F3ED 50%, #D4E8DC 100%);
|
||
@gradient-accent: linear-gradient(135deg, @color-primary 0%, @color-accent 100%);
|
||
|
||
// ---------- 过渡 ----------
|
||
|
||
@transition-fast: 0.15s ease;
|
||
@transition-base: 0.25s ease;
|
||
@transition-slow: 0.4s ease;
|