小草萌猫社区/cat.html · 约 2678 字符
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="section-title">🐱 我的猫 <span>添加 ›</span></div>
13<div class="cat-grid" id="catGrid"></div>
14<div class="section-title">📋 档案详情</div>
15<div class="profile-head">
16 <div class="ph-avatar">🐱</div>
17 <div>
18 <div class="ph-name">橘子 <span class="badge badge-gold" style="background:rgba(255,255,255,.25);color:#fff">健康</span></div>
19 <div class="ph-breed">中华田园橘猫 · 2岁3个月 · 6.8kg</div>
20 </div>
21</div>
22<div class="section-title">✨ 性格标签</div>
23<div class="trait-row">
24 <span class="trait">贪吃</span><span class="trait">粘人</span><span class="trait">爱睡觉</span><span class="trait">慢热</span><span class="trait">护食</span>
25</div>
26<div class="section-title">📅 成长时间轴</div>
27<div class="timeline" id="tlList"></div>
28<div class="card" style="margin-top:0">
29 <div style="font-size:13px;font-weight:800;margin-bottom:8px">⏰ 智能提醒</div>
30 <div style="font-size:12px;color:#a78a97;line-height:2">
31 💉 下次疫苗：2026-11-01（提前3天提醒）<br/>
32 🐛 下次驱虫：2026-09-20<br/>
33 ⚖️ 每周称重：周日 20:00<br/>
34 🛁 洗澡预约：2026-09-15
35 </div>
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=" active" href="cat.html"><span class="icon">🐱</span>猫咪</a><a class="" href="adopt.html"><span class="icon">🏡</span>领养</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
41<script src="data.js"></script>
42<script>
43 var cg = document.getElementById('catGrid');
44 var h=''; window.DATA.cats.forEach(function(c){
45 h+='<div class="cat-card"><div class="cc-top">'+c.emoji+'</div><div class="cc-name">'+c.name+'</div><div class="cc-meta">'+c.breed+'<br/>'+c.age+' · '+c.weight+'</div></div>';
46 });
47 cg.innerHTML = h;
48 var tl = document.getElementById('tlList');
49 var h2=''; window.DATA.timeline.forEach(function(it){
50 h2+='<div class="tl-item"><div class="tl-date">'+it[0]+'</div><div>'+it[1]+'</div></div>';
51 });
52 tl.innerHTML = h2;
53</script>
54<script src="app.js"></script>
55</body>
56</html>