r113/social.html · 约 3108 字符
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="social" style="--brand:#ff2741;--brand-d:#e01e36">
11<header class="uc-hero social" style="--brand:#ff2741;--brand-d:#e01e36"><div class="avatar" style="width:64px;height:64px;background:rgba(255,255,255,.3);font-size:32px">🍋</div><div class="uc-name">一颗柠檬</div><div class="uc-bio">旅拍 | 穿搭 | 日常碎片 📷 合作私信</div><div class="ss-row"><div class="ss"><div class="ss-v">328</div><div class="ss-l">关注</div></div><div class="ss"><div class="ss-v">12.6w</div><div class="ss-l">粉丝</div></div><div class="ss"><div class="ss-v">48.2w</div><div class="ss-l">获赞与收藏</div></div></div><div class="uc-acts"><a class="ub" data-toast="关注成功" href="#">+ 关注</a><a class="ub ghost" data-toast="已发私信" href="#">私信</a></div></header><main class="uc-wrap"><div class="stab"><a class="st on" data-tab="笔记" href="#">笔记</a><a class="st" data-tab="收藏" href="#">收藏</a><a class="st" data-tab="赞过" href="#">赞过</a></div><div class="nt-grid" id="noteGrid"><div class="nt"><div class="nt-img">🏔️</div><div class="nt-cap">雪山脚下的一晚</div><div class="nt-like">❤ 2.3w</div></div><div class="nt"><div class="nt-img">👗</div><div class="nt-cap">秋冬通勤穿搭</div><div class="nt-like">❤ 8921</div></div><div class="nt"><div class="nt-img">🍰</div><div class="nt-cap">在家做舒芙蕾</div><div class="nt-like">❤ 1.1w</div></div><div class="nt"><div class="nt-img">🌿</div><div class="nt-cap">阳台改造记</div><div class="nt-like">❤ 6543</div></div><div class="nt"><div class="nt-img">☕</div><div class="nt-cap">city walk 路线</div><div class="nt-like">❤ 3.4w</div></div><div class="nt"><div class="nt-img">🐱</div><div class="nt-cap">我的布偶猫</div><div class="nt-like">❤ 9872</div></div></div></main><nav class="uctab"><a class="ut" data-toast="演示页面，仅展示 UI"><span class="ut-ic">🏠</span><span class="ut-tx">首页</span></a><a class="ut" data-toast="演示页面，仅展示 UI"><span class="ut-ic">➕</span><span class="ut-tx">发布</span></a><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>$$('.stab .st').forEach(function(t){t.onclick=function(e){e.preventDefault();$$('.stab .st').forEach(function(x){x.classList.remove('on')});t.classList.add('on');var g=$('#noteGrid');g.style.opacity=.4;setTimeout(function(){g.style.opacity=1},150);};});</script>
18</body>
19</html>