index.html · 约 17852 字符
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">
6<title>兴趣星球</title>
7<script src="../_vendor/jquery.min.js"></script>
8<style>
9 * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
10 :root{
11 --bg:#fff0f5; --card:#fff; --text:#2d1b2e; --soft:#8b6f8b; --line:#f3d9f0;
12 --primary:#e84393; --primary-light:#ffe4f0; --purple:#a55eea; --gold:#f9a602;
13 --radius:18px; --shadow:0 4px 16px rgba(232,67,147,.10);
14 }
15 body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
16 background:var(--bg); color:var(--text); }
17 .app{ max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg);
18 position:relative; box-shadow:0 0 28px rgba(0,0,0,.08); display:flex; flex-direction:column; }
19 .topbar{ padding:12px 18px 8px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
20 .topbar .tt{ font-size:18px; font-weight:800; }
21 .topbar .icr{ display:flex; gap:14px; font-size:22px; color:var(--soft); }
22 .main{ flex:1; overflow-y:auto; padding:0 16px 90px; }
23 .main::-webkit-scrollbar{ display:none; }
24 .view{ display:none; }
25 .view.active{ display:block; animation:fade .22s ease; }
26 @keyframes fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
27
28 /* 个人中心 */
29 .tip-bar{ background:linear-gradient(90deg,#ffe4f0,#fff); border-radius:999px; padding:9px 14px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--primary); font-weight:700; border:1px solid var(--line); }
30 .tip-bar .edit{ color:var(--soft); cursor:pointer; }
31 .profile-card{ background:linear-gradient(135deg,#e84393,#a55eea); border-radius:var(--radius); padding:20px; color:#fff; margin-bottom:16px; position:relative; overflow:hidden; box-shadow:var(--shadow); }
32 .profile-card::before{ content:""; position:absolute; top:-40px; right:-40px; width:150px; height:150px; background:rgba(255,255,255,.15); border-radius:50%; }
33 .profile-card::after{ content:""; position:absolute; bottom:-60px; left:20px; width:110px; height:110px; background:rgba(255,255,255,.08); border-radius:50%; }
34 .profile-card .row{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
35 .avatar{ width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:32px; border:2px solid rgba(255,255,255,.45); }
36 .profile-card .info{ flex:1; }
37 .profile-card .name{ font-size:18px; font-weight:900; display:flex; align-items:center; gap:6px; }
38 .profile-card .name .crown{ font-size:16px; }
39 .profile-card .id{ font-size:12px; opacity:.85; margin-top:4px; }
40 .profile-card .qr{ background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:10px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; }
41 .stats-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
42 .stats-bar .item{ background:var(--card); border-radius:var(--radius); padding:14px 4px; text-align:center; box-shadow:var(--shadow); }
43 .stats-bar .item .v{ font-size:20px; font-weight:900; color:var(--text); }
44 .stats-bar .item .v .dot{ display:inline-block; width:8px; height:8px; background:var(--primary); border-radius:50%; margin-left:2px; }
45 .stats-bar .item .l{ font-size:11px; color:var(--soft); margin-top:4px; }
46 .vip-card{ background:linear-gradient(90deg,#ffe4b5,#ffd180); border-radius:var(--radius); padding:16px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; box-shadow:var(--shadow); }
47 .vip-card::before{ content:""; position:absolute; right:-20px; top:-20px; width:90px; height:90px; background:rgba(255,255,255,.25); border-radius:50%; }
48 .vip-card .txt{ position:relative; z-index:1; }
49 .vip-card .tt2{ font-size:16px; font-weight:900; color:#5c3d00; }
50 .vip-card .sub{ font-size:12px; color:#7a5200; margin-top:3px; }
51 .vip-card .btn{ background:#fff; color:#b07d00; border-radius:999px; padding:7px 14px; font-size:12px; font-weight:800; border:none; cursor:pointer; position:relative; z-index:1; }
52 .two-card{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
53 .two-card .c{ background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
54 .two-card .c .t{ font-size:13px; color:var(--soft); font-weight:700; display:flex; align-items:center; gap:4px; }
55 .two-card .c .n{ font-size:24px; font-weight:900; margin-top:6px; color:var(--primary); }
56 .two-card .c .hint{ font-size:11px; color:var(--primary); margin-top:6px; background:var(--primary-light); display:inline-block; padding:3px 8px; border-radius:999px; }
57 .section{ margin-bottom:16px; }
58 .section-title{ font-size:16px; font-weight:900; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
59 .section-title .more{ font-size:12px; color:var(--soft); font-weight:600; }
60 .interactive{ background:var(--card); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); margin-bottom:16px; display:flex; align-items:center; gap:12px; }
61 .interactive .eye{ font-size:24px; }
62 .interactive .info{ flex:1; }
63 .interactive .info .t{ font-size:15px; font-weight:900; }
64 .interactive .info .t .num{ display:inline-block; background:var(--primary); color:#fff; font-size:11px; padding:2px 6px; border-radius:999px; margin-left:6px; }
65 .interactive .info .sub{ font-size:12px; color:var(--soft); margin-top:3px; }
66 .interactive .faces{ display:flex; }
67 .interactive .faces span{ width:28px; height:28px; border-radius:50%; background:var(--primary-light); display:flex; align-items:center; justify-content:center; font-size:14px; border:2px solid #fff; margin-left:-8px; }
68 .interactive .arrow{ color:var(--soft); font-size:18px; }
69 .grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
70 .grid4 .cell{ background:var(--card); border-radius:var(--radius); padding:14px 4px; text-align:center; box-shadow:var(--shadow); cursor:pointer; }
71 .grid4 .cell .ic{ font-size:26px; margin-bottom:6px; }
72 .grid4 .cell .txt{ font-size:12px; font-weight:700; color:var(--text); }
73 .test-banner{ background:linear-gradient(90deg,#f3e5f5,#e1bee7); border-radius:var(--radius); padding:16px; margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow); }
74 .test-banner .txt{ }
75 .test-banner .tt2{ font-size:16px; font-weight:900; color:#4a235a; }
76 .test-banner .sub{ font-size:12px; color:#6c3483; margin-top:3px; }
77 .test-banner .btn{ background:var(--primary); color:#fff; border-radius:999px; padding:8px 16px; font-size:12px; font-weight:800; border:none; cursor:pointer; }
78
79 /* 创作者权益 */
80 .level-card{ background:linear-gradient(135deg,#e84393,#a55eea); border-radius:var(--radius); padding:20px; color:#fff; margin-bottom:16px; text-align:center; box-shadow:var(--shadow); }
81 .level-card .lv{ font-size:14px; opacity:.9; }
82 .level-card .name{ font-size:28px; font-weight:900; margin-top:6px; }
83 .level-card .sub{ font-size:12px; opacity:.85; margin-top:6px; }
84 .benefit{ background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:var(--shadow); }
85 .benefit .hd{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
86 .benefit .hd .ic{ font-size:26px; }
87 .benefit .hd .name{ font-size:15px; font-weight:900; }
88 .benefit .list{ font-size:13px; color:var(--soft); line-height:1.8; }
89 .benefit .list span{ display:inline-block; background:var(--primary-light); color:var(--primary); padding:2px 8px; border-radius:999px; margin-right:6px; font-size:12px; font-weight:700; }
90
91 /* 能力测评 */
92 .quiz-card{ background:var(--card); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:var(--shadow); }
93 .quiz-card .q{ font-size:16px; font-weight:900; margin-bottom:16px; }
94 .quiz-card .opt{ border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; font-size:14px; cursor:pointer; }
95 .quiz-card .opt:hover{ background:#fff8fb; }
96 .quiz-card .opt.on{ border-color:var(--primary); background:var(--primary-light); color:var(--primary); font-weight:800; }
97 .result-card{ background:var(--card); border-radius:var(--radius); padding:20px; text-align:center; box-shadow:var(--shadow); display:none; }
98 .result-card.show{ display:block; }
99 .result-card .tag{ display:inline-block; background:linear-gradient(135deg,var(--primary),var(--purple)); color:#fff; font-size:18px; font-weight:900; padding:10px 24px; border-radius:999px; margin-bottom:14px; }
100 .result-card .desc{ font-size:13px; color:var(--soft); line-height:1.7; }
101 .traits{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
102 .traits span{ background:var(--primary-light); color:var(--primary); padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; }
103
104 .tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
105 height:66px; background:#fff; border-top:1px solid var(--line); display:flex; z-index:20; }
106 .tabbar button{ flex:1; border:none; background:none; font-size:11px; color:var(--soft); font-weight:700;
107 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
108 .tabbar button .ti{ font-size:22px; }
109 .tabbar button.on{ color:var(--primary); }
110 .toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9); z-index:50;
111 background:rgba(45,27,46,.92); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px;
112 font-weight:700; opacity:0; pointer-events:none; transition:.2s; }
113 .toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
114</style>
115</head>
116<body>
117<div class="app">
118 <header class="topbar" id="topbar">
119 <span></span>
120 <span class="tt" id="topTitle">我的</span>
121 <span class="icr"><span>✏️</span><span>⚙️</span></span>
122 </header>
123
124 <main class="main" id="main">
125 <!-- 个人中心 -->
126 <section class="view active" id="view-me">
127 <div class="tip-bar">
128 <span>✨ 完善资料，曝光次数将提升 60%</span>
129 <span class="edit">去填写 ›</span>
130 </div>
131 <div class="profile-card">
132 <div class="row">
133 <div class="avatar">🌸</div>
134 <div class="info">
135 <div class="name">星野琉璃 <span class="crown">👑</span></div>
136 <div class="id">ID: 628092096 · IP 属地：上海</div>
137 </div>
138 <button class="qr">二维码</button>
139 </div>
140 </div>
141 <div class="stats-bar">
142 <div class="item"><div class="v">12</div><div class="l">关注</div></div>
143 <div class="item"><div class="v">46<span class="dot"></span></div><div class="l">获赞</div></div>
144 <div class="item"><div class="v">3</div><div class="l">粉丝</div></div>
145 <div class="item"><div class="v">28</div><div class="l">动态</div></div>
146 </div>
147 <div class="vip-card">
148 <div class="txt">
149 <div class="tt2">创作者权益</div>
150 <div class="sub">解锁专属勋章、流量扶持与收益分成</div>
151 </div>
152 <button class="btn">查看权益</button>
153 </div>
154 <div class="two-card">
155 <div class="c"><div class="t">我的积分 <span>🪙</span></div><div class="n">1,280</div><div class="hint">首充福利</div></div>
156 <div class="c"><div class="t">创作者等级 <span>🌟</span></div><div class="n">Lv.3</div><div class="hint">今日可领 430 经验</div></div>
157 </div>
158 <div class="interactive">
159 <span class="eye">👁</span>
160 <div class="info">
161 <div class="t">最近互动 <span class="num">+46</span></div>
162 <div class="sub">看看最近谁对你感兴趣吧～</div>
163 </div>
164 <div class="faces"><span>🐱</span><span>🐶</span><span>🦊</span></div>
165 <span class="arrow">›</span>
166 </div>
167 <div class="section">
168 <div class="section-title">常用功能</div>
169 <div class="grid4">
170 <div class="cell"><div class="ic">📝</div><div class="txt">我的内容</div></div>
171 <div class="cell"><div class="ic">👗</div><div class="txt">我的装扮</div></div>
172 <div class="cell"><div class="ic">💰</div><div class="txt">我的收益</div></div>
173 <div class="cell"><div class="ic">🏆</div><div class="txt">榜单</div></div>
174 <div class="cell"><div class="ic">🏠</div><div class="txt">双人小屋</div></div>
175 <div class="cell"><div class="ic">🏷️</div><div class="txt">我的标签</div></div>
176 <div class="cell"><div class="ic">🎁</div><div class="txt">收到的礼物</div></div>
177 <div class="cell"><div class="ic">🆔</div><div class="txt">实名认证</div></div>
178 <div class="cell"><div class="ic">⭐</div><div class="txt">收藏夹</div></div>
179 <div class="cell"><div class="ic">🚫</div><div class="txt">屏蔽管理</div></div>
180 <div class="cell"><div class="ic">📜</div><div class="txt">社区规范</div></div>
181 <div class="cell"><div class="ic">🎧</div><div class="txt">帮助中心</div></div>
182 </div>
183 </div>
184 <div class="test-banner">
185 <div class="txt">
186 <div class="tt2">人格类型测试 · 专业版</div>
187 <div class="sub">3 分钟测出你的社交人格画像</div>
188 </div>
189 <button class="btn">开始测试</button>
190 </div>
191 </section>
192
193 <!-- 创作者权益 -->
194 <section class="view" id="view-vip">
195 <div class="level-card">
196 <div class="lv">当前等级</div>
197 <div class="name">创作者 Lv.3</div>
198 <div class="sub">再获得 1,200 经验可升级至 Lv.4</div>
199 </div>
200 <div class="benefit">
201 <div class="hd"><span class="ic">🎖️</span><div class="name">身份标识</div></div>
202 <div class="list"><span>VIP</span>专属昵称高亮、头像框、个人主页皮肤</div>
203 </div>
204 <div class="benefit">
205 <div class="hd"><span class="ic">🚀</span><div class="name">流量扶持</div></div>
206 <div class="list"><span>推荐</span>首页优先推荐、话题置顶、曝光加权 60%</div>
207 </div>
208 <div class="benefit">
209 <div class="hd"><span class="ic">💎</span><div class="name">收益特权</div></div>
210 <div class="list"><span>分成</span>礼物收益 70% 分成、赞赏开通、品牌任务优先接单</div>
211 </div>
212 <div class="benefit">
213 <div class="hd"><span class="ic">🛡️</span><div class="name">专属服务</div></div>
214 <div class="list"><span>客服</span>7×24 小时人工客服、内容申诉快速通道</div>
215 </div>
216 </section>
217
218 <!-- 能力测评 -->
219 <section class="view" id="view-quiz">
220 <div class="quiz-card" id="quizBox">
221 <div class="q">Q1：周末你更喜欢怎样度过？</div>
222 <div class="opt" data-val="A">A. 和一群朋友聚会狂欢</div>
223 <div class="opt" data-val="B">B. 和一位好友深度聊天</div>
224 <div class="opt" data-val="C">C. 独自看书、追剧或创作</div>
225 <div class="opt" data-val="D">D. 参加兴趣社团活动</div>
226 </div>
227 <div class="result-card" id="resultBox">
228 <div class="tag">🌟 社交领航员</div>
229 <div class="desc">你热情开朗，善于带动气氛，是天生的社交核心。在群体中你总能发现每个人的闪光点。</div>
230 <div class="traits"><span>外向</span><span>领导力</span><span>感染力</span><span>乐观</span></div>
231 </div>
232 </section>
233 </main>
234
235 <nav class="tabbar">
236 <button data-go="home"><span class="ti">🏠</span>首页</button>
237 <button data-go="discover"><span class="ti">🔍</span>发现</button>
238 <button data-go="msg"><span class="ti">💬</span>消息</button>
239 <button data-go="me" class="on"><span class="ti">👤</span>我的</button>
240 </nav>
241</div>
242<div class="toast" id="toast"></div>
243
244<script>
245function toast(m){ var t=$("#toast"); t.text(m).addClass("show"); setTimeout(function(){t.removeClass("show");},1500); }
246function showView(v){
247 $(".view").removeClass("active");
248 if(v==="home"||v==="discover"||v==="msg"){ toast("功能演示中"); return; }
249 $("#view-"+v).addClass("active");
250 $("#topTitle").text(v==="me"?"我的":(v==="vip"?"创作者权益":"能力测评"));
251 $(".tabbar button").removeClass("on");
252 $(".tabbar button[data-go='"+v+"']").addClass("on");
253}
254$(function(){
255 $(document).on("click",".tabbar button[data-go]",function(){ showView($(this).data("go")); });
256 $(document).on("click",".vip-card .btn",function(){ showView("vip"); });
257 $(document).on("click",".test-banner .btn",function(){ showView("quiz"); });
258 $(document).on("click",".grid4 .cell, .interactive, .tip-bar .edit, .icr span",function(){ toast("功能演示中"); });
259 $(document).on("click",".quiz-card .opt",function(){
260 $(".quiz-card .opt").removeClass("on"); $(this).addClass("on");
261 setTimeout(function(){ $("#quizBox").hide(); $("#resultBox").addClass("show"); },300);
262 });
263});
264window.showSocialView = function(v){ showView(v); };
265</script>
266</body>
267</html>