更新记录

1.0.0（2026-01-30） 下载此版本

三套风格迥异、现代化的个人中心页面模板，开箱即用，支持多端适配。

平台兼容性

uni-app(3.6.15)

个人中心模板 (User Center Templates)

本项目提供了三套风格迥异、现代化的个人中心页面模板，开箱即用，支持多端适配。

🎨 模板预览

1. 简约卡片风格 (Minimalist Card)

路径: /pages/user-center-templates/user-center-1

• 特点: 清爽白底，悬浮卡片设计，色彩活泼。
• 适用场景: 电商、社交、工具类应用。
• 关键技术: Flex 布局，Box-shadow 阴影层次，悬浮交互动画。

2. 创意曲线风格 (Creative Curve)

路径: /pages/user-center-templates/user-center-2

• 特点: 顶部动态曲线背景，功能网格布局，数据可视化仪表盘。
• 适用场景: 创意类、SaaS、管理类应用。
• 关键技术: CSS Animation (曲线旋转)，Linear Gradient 渐变，Grid 布局。

3. 暗黑科技风格 (Dark Tech / Glassmorphism)

路径: /pages/user-center-templates/user-center-3

• 特点: 沉浸式深色模式，毛玻璃 (Glassmorphism) 质感，霓虹光效。
• 适用场景: 游戏、科技、区块链、极客社区。
• 关键技术: Backdrop-filter 模糊，Radial Gradient 光晕，Translucent UI。

🚀 如何使用

1. 引入页面: 页面文件位于 pages/user-center-templates/ 目录下。
2. 注册路由: 确保在 pages.json 中已注册相应页面路径（本项目已预置）。
3. 自定义数据: 每个模板的 <script> 部分都定义了 data，您可以直接替换为真实的 API 数据。
4. 图标替换: 模板目前使用 Emoji 作为图标以保证零依赖运行，建议替换为 iconfont 或 svg 图片以获得更好效果。

📱 交互说明

• 点击反馈: 所有可点击区域（按钮、列表项、卡片）都添加了 hover-class，提供按压缩放或背景变色反馈。
• 滚动效果: 模板 3 展示了横向滚动的快捷操作栏，使用了 <scroll-view> 组件。
• 动态背景: 模板 2 的顶部曲线会有缓慢的旋转动画，增加页面活力。

🛠️ 二次开发建议

• 状态栏适配: 模板均使用 custom 导航栏模式，建议根据实际机型调整顶部 padding。
• 主题色: 样式代码集中在 <style scoped> 中，可提取常用颜色变量。