r113/index.html · 约 3464 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
6<title>用户中心 UI 设计 · 作品集</title>
7<link rel="icon" href="data:,">
8<link rel="stylesheet" href="style.css">
9</head>
10<body data-page="index" style="--brand:#19b36b;--brand-d:#129a5a">
11<header class="hero hero-multi"><div class="hero-emoji">🎨</div><h1 class="hero-title">用户中心 UI 设计</h1><p class="hero-sub">8 套主流 App 用户中心主页 · 原创草图级 UI 布局参考</p></header><main class="uc-wrap"><div class="sec-h">精选作品集 <span class="sec-n">7 套</span></div><div class="g-grid"><a class="g-card" href="ecommerce.html" style="--c:#ff5000"><div class="g-thumb">🛒</div><div class="g-name">电商风格用户中心</div><div class="g-desc">淘宝/京东式：订单状态、资产、工具网格</div><div class="g-tags"><span class="g-tag">订单</span><span class="g-tag">优惠券</span><span class="g-tag">会员等级</span></div></a><a class="g-card" href="social.html" style="--c:#ff2741"><div class="g-thumb">📕</div><div class="g-name">内容社区用户中心</div><div class="g-desc">小红书/抖音式：关注粉丝、笔记瀑布流</div><div class="g-tags"><span class="g-tag">笔记</span><span class="g-tag">粉丝</span><span class="g-tag">创作</span></div></a><a class="g-card" href="finance.html" style="--c:#1677ff"><div class="g-thumb">💰</div><div class="g-name">金融钱包用户中心</div><div class="g-desc">支付宝/银行式：总资产、收支曲线、账单</div><div class="g-tags"><span class="g-tag">资产</span><span class="g-tag">账单</span><span class="g-tag">理财</span></div></a><a class="g-card" href="member.html" style="--c:#7a5cff"><div class="g-thumb">💎</div><div class="g-name">会员极简用户中心</div><div class="g-desc">大留白 + VIP 权益 + 设置分组</div><div class="g-tags"><span class="g-tag">VIP</span><span class="g-tag">极简</span><span class="g-tag">设置</span></div></a><a class="g-card" href="music.html" style="--c:#e60026"><div class="g-thumb">🎵</div><div class="g-name">音乐娱乐用户中心</div><div class="g-desc">网易云式：听歌排行、歌单、等级</div><div class="g-tags"><span class="g-tag">歌单</span><span class="g-tag">排行</span><span class="g-tag">等级</span></div></a><a class="g-card" href="service.html" style="--c:#ffc300"><div class="g-thumb">🍜</div><div class="g-name">生活服务用户中心</div><div class="g-desc">美团/饿了么式：地址、红包、订单</div><div class="g-tags"><span class="g-tag">外卖</span><span class="g-tag">红包</span><span class="g-tag">地址</span></div></a><a class="g-card" href="game.html" style="--c:#00b4a6"><div class="g-thumb">🎮</div><div class="g-name">游戏等级用户中心</div><div class="g-desc">B站/游戏式：等级、任务、动态</div><div class="g-tags"><span class="g-tag">等级</span><span class="g-tag">任务</span><span class="g-tag">动态</span></div></a></div><p class="foot-note">每一套均为独立 HTML 页面，点击即可查看完整用户中心布局。数据源统一从 data/*.json 读取。</p></main>
12
13<div class="mask" id="mask"></div>
14<div class="toast" id="toast"></div>
15<script src="data/fallback.js"></script>
16<script src="app.js"></script>
17<script></script>
18</body>
19</html>