模板系统模块

模板系统提供 35 种下载页风格，后台一键切换，无需改代码。

风格列表

经典系列

风格	描述
默认风格	简洁大方的默认样式
简约白	纯白背景，极简设计
深色主题	暗黑模式，护眼舒适
毛玻璃	半透明磨砂效果
渐变色系	柔和渐变背景

现代系列

风格	描述
Glassmorphism	玻璃拟态风格
Neumorphism	新拟态柔和凸起
Material Design	谷歌质感设计
Flat Design	扁平化设计
Card Style	卡片式布局

潮流系列

风格	描述
赛博朋克	霓虹灯光，未来科技感
蒸汽波	复古紫粉色调
像素艺术	8-bit 像素风
故障艺术	Glitch 数字故障效果
霓虹灯	发光霓虹效果

特色系列

风格	描述
终端命令行	黑底绿字程序员风
水墨画风	中国风水墨意境
卡通漫画	活泼有趣
手绘涂鸦	手写艺术感
极光效果	梦幻极光背景

更多风格

• 木纹质感
• 大理石纹
• 金属质感
• 星空背景
• 海洋主题
• 森林主题
• ... 等 35 种

切换方式

后台设置

在后台 系统设置 > 下载页风格 中选择：

1. 浏览风格预览图
2. 选择喜欢的风格
3. 点击保存
4. 立即生效

实时预览

切换前可预览效果：

• 点击风格卡片查看大图
• 支持 PC/移动端预览
• 确认满意后再保存

技术实现

CSS 文件

每种风格对应一个 CSS 文件：

assets/user/css/download-themes/
├── style-1.css    # 默认风格
├── style-2.css    # 简约白
├── style-3.css    # 深色主题
├── ...
└── style-35.css   # 极光效果

配置定义

风格配置在 Config.php 中定义：

'themes' => [
    1 => ['name' => '默认风格', 'preview' => 'preview-1.png'],
    2 => ['name' => '简约白', 'preview' => 'preview-2.png'],
    // ...
]

动态加载

页面根据配置动态加载对应 CSS：

<link rel="stylesheet" href="/assets/user/css/download-themes/style-{$theme_id}.css">

自定义风格

新增风格

如需新增自定义风格：

1. 创建新的 CSS 文件 style-N.css
2. 在 Config.php 中添加配置
3. 准备预览图 preview-N.png

CSS 变量

风格 CSS 使用变量便于定制：

:root {
    --primary-color: #1890ff;
    --bg-color: #ffffff;
    --text-color: #333333;
    --border-radius: 8px;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

适配说明

响应式

所有风格均支持响应式：

• 桌面端（1200px+）
• 平板端（768px - 1199px）
• 移动端（< 768px）

浏览器兼容

支持主流浏览器：

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

下一步

• 了解内置商城模块
• 常见问题