小草萌猫社区/mine.html · 约 3669 字符
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<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><span class="back"></span><h1>我的</h1><span class="right"></span></header>
12<div class="user-card">
13 <div class="uc-avatar">🐱</div>
14 <div>
15 <div class="uc-name">橘座铲屎官 <span class="badge badge-gold" style="background:rgba(255,255,255,.25);color:#fff">V4</span></div>
16 <div class="uc-level">养猫 2 年 · 3 只猫主子 · 猫币 1280</div>
17 </div>
18</div>
19<div class="assets">
20 <div class="asset-item"><b>3</b><span>我的猫</span></div>
21 <div class="asset-item"><b>56</b><span>动态</span></div>
22 <div class="asset-item"><b>128</b><span>收藏</span></div>
23 <div class="asset-item"><b>1280</b><span>猫币</span></div>
24</div>
25<div class="section-title">📦 我的订单</div>
26<div id="orderList" style="padding:0 12px"></div>
27<div class="menu-list">
28 <a data-toast="我的猫咪 3 只"><span class="ml-l"><span class="ico">🐱</span>我的猫咪</span><span class="ml-r">3</span></a>
29 <a data-toast="我的动态 56 条"><span class="ml-l"><span class="ico">💬</span>我的动态</span><span class="ml-r">56</span></a>
30 <a data-toast="我的收藏 128"><span class="ml-l"><span class="ico">❤️</span>我的收藏</span><span class="ml-r">128</span></a>
31 <a href="live.html"><span class="ml-l"><span class="ico">📺</span>我的关注</span><span class="ml-r">23</span></a>
32 <a data-toast="在线问诊 7×24 兽医在线"><span class="ml-l"><span class="ico">💊</span>在线问诊</span><span class="ml-r">›</span></a>
33 <a data-toast="猫币 1280 · 去兑换"><span class="ml-l"><span class="ico">🪙</span>我的猫币</span><span class="ml-r">1280</span></a>
34 <a data-toast="实名认证已完成"><span class="ml-l"><span class="ico">🛡️</span>实名认证</span><span class="ml-r">已认证</span></a>
35 <a data-toast="客服在线 9:00-22:00"><span class="ml-l"><span class="ico">🎧</span>联系客服</span><span class="ml-r">400-880-6666</span></a>
36</div>
37<div style="height:70px"></div>
38
39
40<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="community.html"><span class="icon">💬</span>猫友圈</a><a class="" href="cat.html"><span class="icon">🐱</span>猫咪</a><a class="" href="adopt.html"><span class="icon">🏡</span>领养</a><a class=" active" href="mine.html"><span class="icon">👤</span>我的</a></nav>
41<script src="data.js"></script>
42<script>
43 var ol = document.getElementById('orderList');
44 var h=''; window.DATA.orders.forEach(function(o){
45 h+='<div style="background:#fff;border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 1px 6px rgba(219,39,119,.06)"><div style="display:flex;justify-content:space-between;font-size:12px;color:#d6a5bb"><span>2026-09-03</span><span style="color:#db2777;font-weight:800">'+o.st+'</span></div><div style="display:flex;gap:10px;margin-top:8px;align-items:center"><div style="width:48px;height:48px;border-radius:8px;background:#fce7f3;display:flex;align-items:center;justify-content:center;font-size:24px">🛒</div><div style="flex:1;font-size:13px;font-weight:700">'+o.title+'</div><div style="color:#db2777;font-weight:800;font-size:14px">¥'+o.price+'</div></div><div style="font-size:11px;color:#d6a5bb;margin-top:6px">'+o.meta+'</div></div>';
46 });
47 ol.innerHTML = h;
48</script>
49<script src="app.js"></script>
50</body>
51</html>