r113/member.html · 约 3353 字符
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>会员极简用户中心</title>
7<link rel="icon" href="data:,">
8<link rel="stylesheet" href="style.css">
9</head>
10<body data-page="member" style="--brand:#7a5cff;--brand-d:#5e3fe0">
11<header class="uc-hero member" style="--brand:#7a5cff;--brand-d:#5e3fe0"><div class="avatar" style="width:60px;height:60px;background:rgba(255,255,255,.3);font-size:30px">🍃</div><div class="uc-name">清风</div><div class="uc-sub">普通用户</div></header><main class="uc-wrap"><div class="card vip-card" style="--brand:#7a5cff"><div class="vip-h"><span class="vip-name">尊享 VIP</span><span class="vip-exp">有效期至 2027-08-01</span></div><div class="vip-rights"><span class="rt">专属客服</span><span class="rt">会员折扣</span><span class="rt">云空间 1T</span><span class="rt">免广告</span></div><a class="vip-btn" data-toast="开通成功" href="#">立即开通 ¥19.9/月</a></div><div class="card"><div class="card-h">会员权益</div><div class="bf-grid"><div class="bf"><div class="bf-ic">🎁</div><div class="bf-tx">每周礼包</div></div><div class="bf"><div class="bf-ic">⬇️</div><div class="bf-tx">极速下载</div></div><div class="bf"><div class="bf-ic">🎬</div><div class="bf-tx">会员影视</div></div><div class="bf"><div class="bf-ic">☁️</div><div class="bf-tx">云同步</div></div></div></div><div class="card"><div class="card-h">设置</div><a class="li" data-toast="账户与安全" href="#"><span class="li-ic">👤</span><span class="li-mn"><span class="li-t">账户与安全</span><span class="li-s">登录设备 · 密码 · 实名</span></span><span class="li-ar">›</span></a><a class="li" data-toast="通知管理" href="#"><span class="li-ic">🔔</span><span class="li-mn"><span class="li-t">通知管理</span><span class="li-s">推送 · 短信 · 邮件</span></span><span class="li-ar">›</span></a><a class="li" data-toast="隐私设置" href="#"><span class="li-ic">🛡️</span><span class="li-mn"><span class="li-t">隐私设置</span><span class="li-s">可见范围 · 授权</span></span><span class="li-ar">›</span></a><a class="li" data-toast="通用" href="#"><span class="li-ic">⚙️</span><span class="li-mn"><span class="li-t">通用</span><span class="li-s">语言 · 清晰度 · 缓存</span></span><span class="li-ar">›</span></a><a class="li" data-toast="帮助与反馈" href="#"><span class="li-ic">💬</span><span class="li-mn"><span class="li-t">帮助与反馈</span><span class="li-s">常见问题 · 联系我们</span></span><span class="li-ar">›</span></a></div><a class="logout" data-confirm="确定退出登录吗？" data-confirm-toast="已退出（演示）" href="#">退出登录</a></main><nav class="uctab"><a class="ut" data-toast="演示页面，仅展示 UI"><span class="ut-ic">🏠</span><span class="ut-tx">首页</span></a><a class="ut on" data-toast="演示页面，仅展示 UI"><span class="ut-ic">👤</span><span class="ut-tx">我的</span></a></nav>
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>