Vue 3 模块化作品集主页,浅色极简风格,中英双语懒加载 i18n。 - 模块注册表(import.meta.glob)约定式收集项目模块,新增页签无需改导航/路由 - i18n: 中文同步注入主 chunk,英文动态 import() 拆独立 chunk,仅切换时下载 - 第一个页签 mobile-game: 展示 448/449 移动游戏毕设(概览/截图轮播/版本时间线/团队/排行榜/ML视频) - 排行榜复用 /449/449rest.php,失败优雅降级 - 构建: vite outDir=/root/html,emptyOutDir=false,产物用 mainPage/ 命名空间 - 样式: CSS 变量令牌,无 UI 框架运行时依赖
53 lines
1.2 KiB
CSS
53 lines
1.2 KiB
CSS
/* 浅色极简主题令牌 */
|
|
:root {
|
|
/* 背景/表面 */
|
|
--bg: #ffffff;
|
|
--surface: #f7f8fa;
|
|
--surface-2: #f0f2f5;
|
|
|
|
/* 文字 */
|
|
--text-primary: #1f2329;
|
|
--text-secondary: #6b7280;
|
|
--text-tertiary: #9ca3af;
|
|
|
|
/* 强调色(单一靛蓝) */
|
|
--accent: #4f46e5;
|
|
--accent-weak: #eef2ff;
|
|
--accent-hover: #4338ca;
|
|
|
|
/* 线/边 */
|
|
--border: #eceef1;
|
|
--border-strong: #e0e2e6;
|
|
|
|
/* 圆角 */
|
|
--radius-sm: 8px;
|
|
--radius: 12px;
|
|
--radius-lg: 16px;
|
|
|
|
/* 柔和阴影 */
|
|
--shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
|
|
--shadow: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
|
|
--shadow-hover: 0 6px 16px rgba(17, 24, 39, 0.08), 0 2px 6px rgba(17, 24, 39, 0.05);
|
|
|
|
/* 间距尺度 */
|
|
--space-xs: 4px;
|
|
--space-sm: 8px;
|
|
--space-md: 16px;
|
|
--space-lg: 24px;
|
|
--space-xl: 40px;
|
|
--space-2xl: 64px;
|
|
|
|
/* 内容宽度 */
|
|
--content-max: 1080px;
|
|
|
|
/* 字体 */
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
|
"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
|
|
|
|
/* 过渡 */
|
|
--transition: 0.18s ease;
|
|
}
|
|
|
|
/* 深色模式预留(暂不启用,保持浅色极简) */
|