小草宠物美容_H5/pets.html · 约 3172 字符
1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>宠物档案 · 小草宠物美容</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="header"><span class="back" onclick="history.back()">‹</span><h1>宠物档案</h1><span class="right">＋</span></div>
3<div class="section-title">我的毛孩子 <span>2只</span></div>
4<div id="pet-profiles"></div>
5<div class="section-title">疫苗 & 驱虫提醒</div>
6<div class="card">
7 <div class="vaccine-item"><span>💉 狂犬疫苗（团子）</span><span class="vi-status warn">本周到期</span></div>
8 <div class="vaccine-item"><span>🦟 体内驱虫（豆豆）</span><span class="vi-status">已接种 · 9月到期</span></div>
9 <div class="vaccine-item"><span>💊 体外驱虫（团子）</span><span class="vi-status">已接种 · 10月到期</span></div>
10 <div class="vaccine-item"><span>🩺 年度体检（豆豆）</span><span class="vi-status due">已过期</span></div>
11</div>
12<div class="section-title">健康记录</div>
13<div class="card">
14 <div style="display:flex;justify-content:space-between;font-size:13px;color:#8a6a4e;padding:6px 0"><span>过敏史</span><b style="color:#4a3226">豆豆：无过敏 · 团子：怕水</b></div>
15 <div style="display:flex;justify-content:space-between;font-size:13px;color:#8a6a4e;padding:6px 0"><span>洗护偏好</span><b style="color:#4a3226">豆豆喜温和香波 · 团子需安抚</b></div>
16 <div style="display:flex;justify-content:space-between;font-size:13px;color:#8a6a4e;padding:6px 0"><span>性格备注</span><b style="color:#4a3226">见猫易激动，洗澡时注意</b></div>
17</div>
18<div class="card" style="text-align:center">
19 <div style="font-size:30px">📝</div>
20 <div style="font-size:14px;font-weight:700;margin-top:4px">完善档案，美容师更懂你的毛孩子</div>
21 <div style="font-size:12px;color:#b39a80;margin:4px 0 10px">档案越完整，服务越贴心</div>
22 <button class="btn btn-primary">新增宠物档案</button>
23</div>
24<div style="height:80px"></div>
25<div class="tabbar">
26 <a href="index.html"><span class="icon">🏠</span>首页</a>
27 <a href="services.html"><span class="icon">💈</span>服务</a>
28 <a href="book.html"><span class="icon">📅</span>预约</a>
29 <a href="orders.html"><span class="icon">📋</span>订单</a>
30 <a class="active" href="mine.html"><span class="icon">👤</span>我的</a>
31</div>
32<script src="data.js"></script><script src="app.js"></script>
33<script>
34$('#pet-profiles').innerHTML=PETS.map(p=>`
35 <div class="pet-profile">
36 <div class="pp-emoji">${p.emoji}</div>
37 <div style="flex:1">
38 <div class="pp-name">${p.name} <span style="font-size:11px;color:#b39a80">${p.type} · ${p.gender}</span></div>
39 <div class="pp-meta">${p.age} · ${p.weight}</div>
40 <div class="pp-tags">${p.tags.map(t=>'<span class="tag">'+t+'</span>').join('')}</div>
41 </div>
42 <div style="align-self:center;color:#ccc;font-size:12px">编辑 ›</div>
43 </div>`).join('');
44</script>
45</body></html>