小草萌猫社区/adopt.html · 约 2643 字符
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="banner" style="background:linear-gradient(135deg,#a855f7,#7c3aed)">
13 <div>
14 <div class="bn-title">领养代替购买</div>
15 <div class="bn-sub">每一个流浪毛孩子都值得一个家<br/>审核领养 · 公益救助 · 云助养</div>
16 </div>
17 <div class="bn-emoji">🐈</div>
18</div>
19<div class="section-title">🏡 待领养猫咪</div>
20<div id="adoptList"></div>
21<div class="section-title">💗 流浪猫公益</div>
22<div id="rescueList"></div>
23<div class="card" style="margin-top:0;text-align:center">
24 <div style="font-size:14px;font-weight:800;margin-bottom:8px">🐟 申请成为爱心志愿者</div>
25 <div style="font-size:12px;color:#a78a97;line-height:1.8;margin-bottom:12px">搭建避寒猫屋、捐助猫粮、协助绝育，用行动温暖流浪毛孩子</div>
26 <div class="btn btn-primary" data-toast="已提交志愿者申请，工作人员将联系您">我要加入</div>
27</div>
28<div style="height:70px"></div>
29
30
31<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=" active" href="adopt.html"><span class="icon">🏡</span>领养</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
32<script src="data.js"></script>
33<script>
34 var al = document.getElementById('adoptList');
35 var h=''; window.DATA.adopt.forEach(function(a){
36 h+='<div class="adopt-card"><div class="ac-img">'+a.emoji+'</div><div class="ac-body"><div class="ac-name">'+a.name+'</div><div class="ac-meta">'+a.meta+'</div></div><div class="ac-btn" data-toast="已申请领养 '+a.name+'，请等待审核">'+a.st+'</div></div>';
37 });
38 al.innerHTML = h;
39 var rl = document.getElementById('rescueList');
40 var h2=''; window.DATA.rescue.forEach(function(r){
41 h2+='<div class="adopt-card"><div class="ac-img">💗</div><div class="ac-body"><div class="ac-name">'+r.title+'</div><div class="ac-meta">'+r.meta+'</div></div><div class="ac-btn" data-toast="已支持：'+r.title+'">'+r.st+'</div></div>';
42 });
43 rl.innerHTML = h2;
44</script>
45<script src="app.js"></script>
46</body>
47</html>