Blizzard
3816cd1b02
- 原名「毛孩子计划」在微信已被占用，全项目 24 处替换（导航标题、 AI 提示词身份、社区官方号、后台登录页、logo 横版文案） - logo 英文副标同步改为 PAW PAD · CARE PLAN - 新增 小程序资料.md：后台要填的简介（多长度版本）、关键词、 服务类目建议与审核避雷要点 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2385 lines
86 KiB
HTML
2385 lines
86 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>肉垫计划 Pro UI - 微信小程序交互原型</title>
|
||
<style>
|
||
:root{
|
||
--bg:#F8F6F2;
|
||
--bg2:#FBF8F3;
|
||
--card:#FFFFFF;
|
||
--text:#2D2925;
|
||
--muted:#8D8277;
|
||
--muted2:#B5A99D;
|
||
--line:#EEE6DC;
|
||
--primary:#F5A947;
|
||
--primary2:#FFBF68;
|
||
--primary-dark:#DD8420;
|
||
--green:#73BE9D;
|
||
--green-soft:#EAF7F1;
|
||
--red:#EE7D73;
|
||
--red-soft:#FFF0EE;
|
||
--blue:#78A6E8;
|
||
--blue-soft:#EEF5FF;
|
||
--purple:#A993E8;
|
||
--purple-soft:#F4F0FF;
|
||
--yellow-soft:#FFF6E4;
|
||
--shadow:0 12px 30px rgba(70,48,25,.08);
|
||
--shadow2:0 18px 44px rgba(70,48,25,.13);
|
||
--radius:22px;
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
body{
|
||
margin:0;
|
||
min-height:100vh;
|
||
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",Arial,sans-serif;
|
||
color:var(--text);
|
||
background:
|
||
radial-gradient(circle at 10% 8%, rgba(245,169,71,.26), transparent 30%),
|
||
radial-gradient(circle at 88% 10%, rgba(115,190,157,.20), transparent 26%),
|
||
radial-gradient(circle at 72% 88%, rgba(120,166,232,.14), transparent 28%),
|
||
linear-gradient(135deg,#FBF5EA,#EEF6F1 55%,#F8F1E7);
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
padding:24px;
|
||
}
|
||
|
||
.stage{
|
||
width:100%;
|
||
max-width:1160px;
|
||
display:grid;
|
||
grid-template-columns:430px 1fr;
|
||
gap:30px;
|
||
align-items:center;
|
||
}
|
||
|
||
.phone{
|
||
width:402px;
|
||
height:844px;
|
||
border-radius:48px;
|
||
background:#111;
|
||
padding:12px;
|
||
box-shadow:0 34px 100px rgba(0,0,0,.28);
|
||
position:relative;
|
||
margin:auto;
|
||
}
|
||
|
||
.screen{
|
||
height:100%;
|
||
border-radius:36px;
|
||
background:var(--bg);
|
||
position:relative;
|
||
overflow:hidden;
|
||
}
|
||
|
||
.statusbar{
|
||
height:42px;
|
||
display:flex;
|
||
justify-content:space-between;
|
||
align-items:flex-start;
|
||
padding:14px 22px 0;
|
||
font-size:13px;
|
||
font-weight:800;
|
||
position:relative;
|
||
z-index:8;
|
||
background:linear-gradient(180deg,rgba(248,246,242,.98),rgba(248,246,242,.82));
|
||
}
|
||
.wx-nav{
|
||
height:46px;
|
||
position:relative;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
font-size:16px;
|
||
font-weight:900;
|
||
z-index:8;
|
||
background:rgba(248,246,242,.82);
|
||
backdrop-filter:blur(14px);
|
||
}
|
||
.wx-capsule{
|
||
position:absolute;
|
||
right:14px;
|
||
top:8px;
|
||
width:86px;
|
||
height:31px;
|
||
border-radius:999px;
|
||
background:rgba(255,255,255,.72);
|
||
border:1px solid rgba(0,0,0,.10);
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-around;
|
||
font-weight:900;
|
||
color:#333;
|
||
}
|
||
.back-btn{
|
||
position:absolute;
|
||
left:15px;
|
||
top:7px;
|
||
width:34px;
|
||
height:34px;
|
||
border-radius:50%;
|
||
border:0;
|
||
background:transparent;
|
||
font-size:22px;
|
||
display:none;
|
||
cursor:pointer;
|
||
}
|
||
.back-btn.show{display:block}
|
||
|
||
.page{
|
||
position:absolute;
|
||
inset:88px 0 78px;
|
||
overflow:auto;
|
||
padding:0 18px 24px;
|
||
opacity:0;
|
||
transform:translateX(16px);
|
||
pointer-events:none;
|
||
transition:.24s ease;
|
||
scrollbar-width:none;
|
||
}
|
||
.page::-webkit-scrollbar{display:none}
|
||
.page.active{
|
||
opacity:1;
|
||
transform:translateX(0);
|
||
pointer-events:auto;
|
||
}
|
||
.page.full{
|
||
inset:88px 0 0;
|
||
padding:0 20px 28px;
|
||
}
|
||
|
||
.tabbar{
|
||
position:absolute;
|
||
left:0; right:0; bottom:0;
|
||
height:78px;
|
||
padding-bottom:8px;
|
||
background:rgba(255,255,255,.94);
|
||
border-top:1px solid var(--line);
|
||
display:flex;
|
||
z-index:9;
|
||
backdrop-filter:blur(16px);
|
||
}
|
||
.tab{
|
||
flex:1;
|
||
border:0;
|
||
background:transparent;
|
||
display:flex;
|
||
flex-direction:column;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:4px;
|
||
color:var(--muted);
|
||
font-size:12px;
|
||
cursor:pointer;
|
||
}
|
||
.tab i{
|
||
font-style:normal;
|
||
font-size:21px;
|
||
line-height:1;
|
||
}
|
||
.tab.active{
|
||
color:var(--primary-dark);
|
||
font-weight:900;
|
||
}
|
||
|
||
h1,h2,h3,h4,p{margin:0}
|
||
button,input,textarea,select{
|
||
font-family:inherit;
|
||
}
|
||
button{cursor:pointer}
|
||
.muted{color:var(--muted)}
|
||
.tiny{font-size:12px;color:var(--muted)}
|
||
.section-head{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
margin:4px 0 12px;
|
||
}
|
||
.section-head h3{
|
||
font-size:18px;
|
||
letter-spacing:-.2px;
|
||
}
|
||
.link{
|
||
border:0;
|
||
background:transparent;
|
||
color:var(--primary-dark);
|
||
font-weight:900;
|
||
font-size:13px;
|
||
padding:0;
|
||
}
|
||
|
||
.btn{
|
||
border:0;
|
||
height:48px;
|
||
border-radius:17px;
|
||
padding:0 16px;
|
||
display:inline-flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:8px;
|
||
font-weight:900;
|
||
font-size:15px;
|
||
transition:.16s ease;
|
||
}
|
||
.btn:active{transform:scale(.98)}
|
||
.btn-primary{
|
||
color:#fff;
|
||
background:linear-gradient(135deg,var(--primary),var(--primary2));
|
||
box-shadow:0 12px 24px rgba(245,169,71,.28);
|
||
}
|
||
.btn-ghost{
|
||
color:var(--text);
|
||
background:#fff;
|
||
border:1px solid var(--line);
|
||
}
|
||
.btn-soft{
|
||
color:#9E6200;
|
||
background:var(--yellow-soft);
|
||
}
|
||
.btn-green{
|
||
color:#fff;
|
||
background:linear-gradient(135deg,#69B991,#86CEB0);
|
||
}
|
||
.btn-block{width:100%}
|
||
.btn-small{
|
||
height:34px;
|
||
border-radius:12px;
|
||
padding:0 11px;
|
||
font-size:12px;
|
||
}
|
||
|
||
.card{
|
||
background:var(--card);
|
||
border-radius:var(--radius);
|
||
box-shadow:var(--shadow);
|
||
padding:16px;
|
||
margin-bottom:14px;
|
||
position:relative;
|
||
overflow:hidden;
|
||
}
|
||
.card.no-shadow{
|
||
box-shadow:none;
|
||
border:1px solid var(--line);
|
||
}
|
||
.tag{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
height:24px;
|
||
border-radius:999px;
|
||
padding:0 9px;
|
||
font-size:12px;
|
||
font-weight:900;
|
||
background:var(--green-soft);
|
||
color:#377A61;
|
||
white-space:nowrap;
|
||
}
|
||
.tag.warn{background:#FFF0D7;color:#A96500}
|
||
.tag.red{background:var(--red-soft);color:#C95348}
|
||
.tag.blue{background:var(--blue-soft);color:#3C6EBA}
|
||
.tag.purple{background:var(--purple-soft);color:#765AC5}
|
||
|
||
.top-row{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
margin:2px 0 14px;
|
||
}
|
||
.greeting h2{
|
||
font-size:22px;
|
||
line-height:1.15;
|
||
letter-spacing:-.4px;
|
||
}
|
||
.greeting p{
|
||
font-size:13px;
|
||
color:var(--muted);
|
||
margin-top:5px;
|
||
}
|
||
.icon-btn{
|
||
width:40px;
|
||
height:40px;
|
||
border:0;
|
||
border-radius:50%;
|
||
background:#fff;
|
||
box-shadow:var(--shadow);
|
||
font-size:18px;
|
||
}
|
||
.icon-stack{
|
||
display:flex;
|
||
gap:9px;
|
||
}
|
||
|
||
/* onboarding */
|
||
.onboard{
|
||
background:
|
||
radial-gradient(circle at top right, rgba(245,169,71,.22), transparent 45%),
|
||
var(--bg);
|
||
}
|
||
.hero{
|
||
text-align:center;
|
||
padding:30px 0 16px;
|
||
}
|
||
.pet-logo{
|
||
width:96px;
|
||
height:96px;
|
||
margin:0 auto 18px;
|
||
border-radius:30px;
|
||
background:linear-gradient(135deg,#FFE0AB,#FDB35C);
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
font-size:48px;
|
||
box-shadow:0 16px 36px rgba(245,169,71,.26);
|
||
}
|
||
.hero h1{
|
||
font-size:32px;
|
||
letter-spacing:-.6px;
|
||
}
|
||
.hero p{
|
||
margin-top:10px;
|
||
line-height:1.65;
|
||
color:var(--muted);
|
||
font-size:15px;
|
||
}
|
||
.proof-row{
|
||
display:grid;
|
||
grid-template-columns:repeat(3,1fr);
|
||
gap:8px;
|
||
margin:20px 0;
|
||
}
|
||
.proof{
|
||
background:#fff;
|
||
border-radius:18px;
|
||
padding:12px 8px;
|
||
text-align:center;
|
||
box-shadow:var(--shadow);
|
||
}
|
||
.proof b{
|
||
display:block;
|
||
font-size:16px;
|
||
}
|
||
.proof span{
|
||
color:var(--muted);
|
||
font-size:11px;
|
||
}
|
||
.step{display:none}
|
||
.step.active{display:block}
|
||
.step-title{
|
||
font-size:24px;
|
||
letter-spacing:-.4px;
|
||
line-height:1.24;
|
||
margin:8px 0 8px;
|
||
}
|
||
.step-sub{
|
||
color:var(--muted);
|
||
line-height:1.6;
|
||
font-size:14px;
|
||
margin-bottom:16px;
|
||
}
|
||
.choice-grid{
|
||
display:grid;
|
||
grid-template-columns:1fr 1fr;
|
||
gap:12px;
|
||
margin-bottom:18px;
|
||
}
|
||
.choice-card{
|
||
background:#fff;
|
||
border:2px solid transparent;
|
||
border-radius:24px;
|
||
min-height:132px;
|
||
padding:18px 14px;
|
||
box-shadow:var(--shadow);
|
||
transition:.18s ease;
|
||
position:relative;
|
||
}
|
||
.choice-card.selected{
|
||
border-color:var(--primary);
|
||
background:#FFF8EC;
|
||
}
|
||
.choice-card .animal{
|
||
font-size:44px;
|
||
margin-bottom:10px;
|
||
}
|
||
.choice-card b{font-size:17px}
|
||
.choice-card span{
|
||
display:block;
|
||
color:var(--muted);
|
||
font-size:12px;
|
||
margin-top:6px;
|
||
}
|
||
.form-card{
|
||
background:#fff;
|
||
border-radius:24px;
|
||
padding:16px;
|
||
box-shadow:var(--shadow);
|
||
margin-bottom:18px;
|
||
}
|
||
.field{margin-bottom:14px}
|
||
.field:last-child{margin-bottom:0}
|
||
.field label{
|
||
display:block;
|
||
font-size:13px;
|
||
color:var(--muted);
|
||
font-weight:800;
|
||
margin-bottom:8px;
|
||
}
|
||
input,textarea,select{
|
||
width:100%;
|
||
border:1px solid var(--line);
|
||
background:#FBFAF8;
|
||
height:44px;
|
||
border-radius:15px;
|
||
padding:0 13px;
|
||
color:var(--text);
|
||
font-size:15px;
|
||
outline:none;
|
||
}
|
||
textarea{
|
||
height:92px;
|
||
padding-top:12px;
|
||
resize:none;
|
||
}
|
||
.seg{
|
||
display:flex;
|
||
gap:8px;
|
||
}
|
||
.seg button{
|
||
flex:1;
|
||
height:40px;
|
||
border-radius:13px;
|
||
border:1px solid var(--line);
|
||
background:#fff;
|
||
color:var(--muted);
|
||
font-weight:800;
|
||
}
|
||
.seg button.selected{
|
||
color:var(--primary-dark);
|
||
background:#FFF2DC;
|
||
border-color:#FFD39A;
|
||
}
|
||
.stage-list{
|
||
display:grid;
|
||
gap:11px;
|
||
margin-bottom:18px;
|
||
}
|
||
.stage-card{
|
||
background:#fff;
|
||
border-radius:20px;
|
||
border:2px solid transparent;
|
||
padding:15px;
|
||
box-shadow:var(--shadow);
|
||
}
|
||
.stage-card.selected{
|
||
border-color:var(--green);
|
||
background:var(--green-soft);
|
||
}
|
||
.stage-card b{font-size:16px}
|
||
.stage-card p{
|
||
color:var(--muted);
|
||
font-size:12px;
|
||
margin-top:5px;
|
||
}
|
||
.check-list{
|
||
display:grid;
|
||
gap:10px;
|
||
margin:16px 0;
|
||
}
|
||
.check{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:10px;
|
||
background:#fff;
|
||
box-shadow:var(--shadow);
|
||
border-radius:16px;
|
||
padding:13px;
|
||
border:1px solid transparent;
|
||
font-size:14px;
|
||
font-weight:700;
|
||
}
|
||
.box{
|
||
width:22px;
|
||
height:22px;
|
||
border-radius:8px;
|
||
border:2px solid #DDCEC1;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
color:#fff;
|
||
flex:none;
|
||
font-size:13px;
|
||
font-weight:900;
|
||
}
|
||
.check.selected{
|
||
background:#FFF8EC;
|
||
border-color:#FFD29A;
|
||
}
|
||
.check.selected .box{
|
||
background:var(--primary);
|
||
border-color:var(--primary);
|
||
}
|
||
.gen-card{
|
||
margin-top:34px;
|
||
background:#fff;
|
||
border-radius:28px;
|
||
padding:24px;
|
||
box-shadow:var(--shadow2);
|
||
}
|
||
.gen-line{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:10px;
|
||
padding:10px 0;
|
||
color:#5F554D;
|
||
font-size:14px;
|
||
}
|
||
.tick{
|
||
width:24px;
|
||
height:24px;
|
||
border-radius:50%;
|
||
background:var(--green);
|
||
color:#fff;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
font-size:14px;
|
||
font-weight:900;
|
||
flex:none;
|
||
}
|
||
|
||
/* home */
|
||
.pet-switch{
|
||
display:flex;
|
||
gap:10px;
|
||
overflow:auto;
|
||
padding:0 0 12px;
|
||
scrollbar-width:none;
|
||
}
|
||
.pet-switch::-webkit-scrollbar{display:none}
|
||
.pet-chip{
|
||
flex:none;
|
||
border:1px solid var(--line);
|
||
background:#fff;
|
||
border-radius:20px;
|
||
padding:9px 12px;
|
||
display:flex;
|
||
align-items:center;
|
||
gap:8px;
|
||
color:var(--muted);
|
||
font-weight:900;
|
||
box-shadow:0 6px 18px rgba(70,48,25,.05);
|
||
}
|
||
.pet-chip.active{
|
||
color:var(--primary-dark);
|
||
background:#FFF4E4;
|
||
border-color:#FFD6A1;
|
||
}
|
||
.pet-chip .mini-avatar{
|
||
width:28px;
|
||
height:28px;
|
||
border-radius:10px;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
background:#FFE4B7;
|
||
}
|
||
.hero-card{
|
||
background:
|
||
radial-gradient(circle at 95% 16%, rgba(245,169,71,.25), transparent 30%),
|
||
linear-gradient(135deg,#FFFFFF,#FFF5E6);
|
||
min-height:170px;
|
||
}
|
||
.pet-row{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:13px;
|
||
margin-bottom:14px;
|
||
}
|
||
.avatar{
|
||
width:60px;
|
||
height:60px;
|
||
border-radius:22px;
|
||
background:linear-gradient(135deg,#FFE5B7,#FFC06B);
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
font-size:32px;
|
||
box-shadow:0 12px 26px rgba(245,169,71,.18);
|
||
flex:none;
|
||
}
|
||
.pet-main{flex:1}
|
||
.pet-main b{
|
||
font-size:21px;
|
||
letter-spacing:-.2px;
|
||
}
|
||
.pet-main p{
|
||
color:var(--muted);
|
||
font-size:13px;
|
||
margin-top:4px;
|
||
}
|
||
.progress-row{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
margin-bottom:8px;
|
||
font-size:13px;
|
||
color:#6A5D52;
|
||
font-weight:900;
|
||
}
|
||
.bar{
|
||
height:10px;
|
||
border-radius:999px;
|
||
background:#F0E7DD;
|
||
overflow:hidden;
|
||
}
|
||
.bar span{
|
||
height:100%;
|
||
width:68%;
|
||
border-radius:999px;
|
||
background:linear-gradient(90deg,var(--primary),#FFD57F);
|
||
display:block;
|
||
transition:.25s ease;
|
||
}
|
||
.insight-row{
|
||
display:flex;
|
||
gap:8px;
|
||
margin-top:12px;
|
||
overflow:auto;
|
||
scrollbar-width:none;
|
||
}
|
||
.insight-row::-webkit-scrollbar{display:none}
|
||
.insight{
|
||
flex:none;
|
||
min-width:112px;
|
||
border-radius:16px;
|
||
background:rgba(255,255,255,.72);
|
||
border:1px solid rgba(255,255,255,.9);
|
||
padding:10px;
|
||
font-size:12px;
|
||
}
|
||
.insight b{
|
||
display:block;
|
||
font-size:14px;
|
||
margin-bottom:4px;
|
||
}
|
||
|
||
.date-strip{
|
||
display:grid;
|
||
grid-template-columns:repeat(7,1fr);
|
||
gap:7px;
|
||
margin-bottom:14px;
|
||
}
|
||
.day{
|
||
background:#fff;
|
||
border-radius:16px;
|
||
min-height:58px;
|
||
text-align:center;
|
||
padding:8px 4px;
|
||
border:1px solid var(--line);
|
||
color:var(--muted);
|
||
font-size:11px;
|
||
}
|
||
.day b{
|
||
display:block;
|
||
color:var(--text);
|
||
font-size:15px;
|
||
margin-top:4px;
|
||
}
|
||
.day.active{
|
||
border-color:#FFD39A;
|
||
background:#FFF4E4;
|
||
color:var(--primary-dark);
|
||
}
|
||
.day.has-dot:after{
|
||
content:"";
|
||
display:block;
|
||
width:5px;
|
||
height:5px;
|
||
border-radius:50%;
|
||
background:var(--green);
|
||
margin:4px auto 0;
|
||
}
|
||
|
||
.task-list{display:grid;gap:10px}
|
||
.task{
|
||
display:flex;
|
||
gap:10px;
|
||
align-items:flex-start;
|
||
background:#FBFAF8;
|
||
border-radius:16px;
|
||
padding:12px;
|
||
transition:.15s ease;
|
||
}
|
||
.circle{
|
||
width:23px;
|
||
height:23px;
|
||
border-radius:50%;
|
||
border:2px solid #DED1C4;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
color:#fff;
|
||
font-size:12px;
|
||
flex:none;
|
||
margin-top:1px;
|
||
font-weight:900;
|
||
}
|
||
.task.done{opacity:.55}
|
||
.task.done .circle{
|
||
background:var(--green);
|
||
border-color:var(--green);
|
||
}
|
||
.task-text{flex:1}
|
||
.task-text b{font-size:14px}
|
||
.task-text p{
|
||
font-size:12px;
|
||
color:var(--muted);
|
||
margin-top:4px;
|
||
line-height:1.45;
|
||
}
|
||
.priority{
|
||
font-size:11px;
|
||
color:#A96500;
|
||
background:#FFF0D7;
|
||
border-radius:999px;
|
||
padding:4px 7px;
|
||
font-weight:900;
|
||
flex:none;
|
||
}
|
||
|
||
.quick-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(4,1fr);
|
||
gap:9px;
|
||
}
|
||
.quick{
|
||
border:0;
|
||
background:#FBFAF8;
|
||
border-radius:16px;
|
||
min-height:66px;
|
||
display:flex;
|
||
flex-direction:column;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:6px;
|
||
font-weight:900;
|
||
color:var(--text);
|
||
font-size:12px;
|
||
}
|
||
.quick span{font-size:22px}
|
||
.ai-banner{
|
||
background:linear-gradient(135deg,#F2FAF6,#FFFFFF);
|
||
}
|
||
.ai-banner p{
|
||
color:#59635D;
|
||
font-size:14px;
|
||
line-height:1.6;
|
||
}
|
||
|
||
/* plan */
|
||
.page-title{
|
||
margin:2px 0 14px;
|
||
}
|
||
.page-title h2{
|
||
font-size:23px;
|
||
letter-spacing:-.3px;
|
||
}
|
||
.page-title p{
|
||
color:var(--muted);
|
||
font-size:13px;
|
||
margin-top:5px;
|
||
}
|
||
.inline-tabs{
|
||
display:flex;
|
||
padding:4px;
|
||
gap:4px;
|
||
border-radius:16px;
|
||
background:#EFE8DE;
|
||
margin-bottom:14px;
|
||
}
|
||
.inline-tabs button{
|
||
flex:1;
|
||
border:0;
|
||
background:transparent;
|
||
height:34px;
|
||
border-radius:12px;
|
||
color:var(--muted);
|
||
font-weight:900;
|
||
font-size:13px;
|
||
}
|
||
.inline-tabs button.active{
|
||
background:#fff;
|
||
color:var(--primary-dark);
|
||
box-shadow:0 6px 14px rgba(0,0,0,.06);
|
||
}
|
||
.plan-mode{
|
||
display:none;
|
||
}
|
||
.plan-mode.active{display:block}
|
||
.timeline{
|
||
padding-left:18px;
|
||
position:relative;
|
||
}
|
||
.timeline:before{
|
||
content:"";
|
||
position:absolute;
|
||
left:6px;
|
||
top:6px;
|
||
bottom:8px;
|
||
width:2px;
|
||
background:#E8DED0;
|
||
}
|
||
.time-block{
|
||
position:relative;
|
||
margin-bottom:14px;
|
||
}
|
||
.time-label{
|
||
font-weight:900;
|
||
color:var(--primary-dark);
|
||
font-size:13px;
|
||
margin-bottom:8px;
|
||
}
|
||
.time-label:before{
|
||
content:"";
|
||
position:absolute;
|
||
left:-17px;
|
||
top:4px;
|
||
width:12px;
|
||
height:12px;
|
||
border-radius:50%;
|
||
background:var(--primary);
|
||
border:3px solid #fff;
|
||
box-shadow:0 0 0 2px #F5D5A8;
|
||
}
|
||
.plan-task{
|
||
background:#fff;
|
||
border-radius:18px;
|
||
padding:13px;
|
||
box-shadow:var(--shadow);
|
||
border:1px solid transparent;
|
||
}
|
||
.plan-task:active{border-color:#FFD39A}
|
||
.plan-task b{font-size:14px}
|
||
.plan-task p{
|
||
color:var(--muted);
|
||
font-size:12px;
|
||
line-height:1.45;
|
||
margin-top:5px;
|
||
}
|
||
.calendar{
|
||
background:#fff;
|
||
border-radius:22px;
|
||
padding:14px;
|
||
box-shadow:var(--shadow);
|
||
}
|
||
.cal-head{
|
||
display:flex;
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
margin-bottom:10px;
|
||
font-weight:900;
|
||
}
|
||
.cal-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(7,1fr);
|
||
gap:6px;
|
||
text-align:center;
|
||
}
|
||
.cal-grid span{
|
||
font-size:11px;
|
||
color:var(--muted);
|
||
padding:4px 0;
|
||
}
|
||
.cal-cell{
|
||
height:38px;
|
||
border-radius:12px;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
font-weight:800;
|
||
font-size:13px;
|
||
background:#FBFAF8;
|
||
position:relative;
|
||
}
|
||
.cal-cell.today{
|
||
background:#FFF3DF;
|
||
color:var(--primary-dark);
|
||
}
|
||
.cal-cell.tasked:after{
|
||
content:"";
|
||
position:absolute;
|
||
bottom:5px;
|
||
width:5px;height:5px;
|
||
border-radius:50%;
|
||
background:var(--green);
|
||
}
|
||
.plan-chat{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:10px;
|
||
margin-bottom:12px;
|
||
}
|
||
.msg{
|
||
max-width:88%;
|
||
border-radius:18px;
|
||
padding:11px 13px;
|
||
font-size:13px;
|
||
line-height:1.55;
|
||
}
|
||
.msg.ai{background:#F3F8F5;align-self:flex-start}
|
||
.msg.user{background:#FFF1D8;align-self:flex-end}
|
||
.extracted{
|
||
display:grid;
|
||
grid-template-columns:1fr 1fr;
|
||
gap:8px;
|
||
margin:12px 0;
|
||
}
|
||
.extract{
|
||
background:#FBFAF8;
|
||
border-radius:15px;
|
||
padding:10px;
|
||
font-size:12px;
|
||
}
|
||
.extract b{
|
||
display:block;
|
||
font-size:13px;
|
||
margin-bottom:3px;
|
||
}
|
||
|
||
/* record */
|
||
.record-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(3,1fr);
|
||
gap:12px;
|
||
margin-bottom:14px;
|
||
}
|
||
.record-item{
|
||
height:92px;
|
||
border:0;
|
||
background:#fff;
|
||
border-radius:22px;
|
||
box-shadow:var(--shadow);
|
||
display:flex;
|
||
flex-direction:column;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:8px;
|
||
font-weight:900;
|
||
color:var(--text);
|
||
}
|
||
.record-item span{font-size:28px}
|
||
.mini-chart{
|
||
height:128px;
|
||
border-radius:18px;
|
||
background:
|
||
linear-gradient(180deg,rgba(115,190,157,.16),rgba(115,190,157,0)),
|
||
repeating-linear-gradient(0deg,#fff,#fff 30px,#EFE8DE 31px);
|
||
position:relative;
|
||
overflow:hidden;
|
||
margin-top:12px;
|
||
}
|
||
.chart-line{
|
||
position:absolute;
|
||
inset:22px 18px;
|
||
}
|
||
.chart-line svg{
|
||
width:100%;
|
||
height:100%;
|
||
overflow:visible;
|
||
}
|
||
.record-row{
|
||
display:flex;
|
||
justify-content:space-between;
|
||
align-items:center;
|
||
padding:12px 0;
|
||
border-bottom:1px solid var(--line);
|
||
font-size:13px;
|
||
}
|
||
.record-row:last-child{border-bottom:0}
|
||
.record-row b{font-size:14px}
|
||
.record-row span{color:var(--muted);font-size:12px}
|
||
.health-timeline{
|
||
display:grid;
|
||
gap:10px;
|
||
}
|
||
.health-event{
|
||
display:flex;
|
||
gap:10px;
|
||
background:#FBFAF8;
|
||
border-radius:16px;
|
||
padding:12px;
|
||
}
|
||
.event-dot{
|
||
width:34px;height:34px;
|
||
border-radius:13px;
|
||
flex:none;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
background:#FFF0D7;
|
||
}
|
||
.health-event b{font-size:14px}
|
||
.health-event p{
|
||
color:var(--muted);
|
||
font-size:12px;
|
||
line-height:1.45;
|
||
margin-top:3px;
|
||
}
|
||
|
||
/* report */
|
||
.stats-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(3,1fr);
|
||
gap:8px;
|
||
margin:14px 0;
|
||
}
|
||
.stat{
|
||
background:#fff;
|
||
border:1px solid var(--line);
|
||
border-radius:16px;
|
||
padding:12px 7px;
|
||
text-align:center;
|
||
}
|
||
.stat b{
|
||
display:block;
|
||
font-size:18px;
|
||
margin-bottom:4px;
|
||
}
|
||
.stat span{
|
||
font-size:11px;
|
||
color:var(--muted);
|
||
}
|
||
.report-card{
|
||
background:linear-gradient(135deg,#FFFFFF,#F2FAF6);
|
||
}
|
||
.poster{
|
||
background:
|
||
radial-gradient(circle at 100% 0%, rgba(245,169,71,.24), transparent 35%),
|
||
linear-gradient(160deg,#FFF7E8,#FFFFFF);
|
||
border:1px solid #F2DFC3;
|
||
border-radius:26px;
|
||
padding:18px;
|
||
text-align:center;
|
||
overflow:hidden;
|
||
position:relative;
|
||
}
|
||
.poster:before{
|
||
content:"🐾";
|
||
position:absolute;
|
||
right:-10px;
|
||
top:-16px;
|
||
font-size:88px;
|
||
opacity:.08;
|
||
transform:rotate(-16deg);
|
||
}
|
||
.poster h3{
|
||
font-size:20px;
|
||
margin-bottom:10px;
|
||
}
|
||
.poster-avatar{
|
||
width:76px;height:76px;
|
||
margin:8px auto 10px;
|
||
border-radius:27px;
|
||
background:linear-gradient(135deg,#FFE5B7,#FFC06B);
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
font-size:40px;
|
||
box-shadow:0 12px 26px rgba(245,169,71,.20);
|
||
}
|
||
.poster-list{
|
||
background:rgba(255,255,255,.78);
|
||
border-radius:16px;
|
||
padding:12px;
|
||
margin:14px 0;
|
||
text-align:left;
|
||
line-height:1.8;
|
||
font-size:13px;
|
||
}
|
||
.bill-bars{
|
||
display:grid;
|
||
gap:10px;
|
||
margin-top:12px;
|
||
}
|
||
.bill-row{
|
||
display:grid;
|
||
grid-template-columns:44px 1fr 54px;
|
||
gap:8px;
|
||
align-items:center;
|
||
font-size:12px;
|
||
}
|
||
.mini-bar{
|
||
height:9px;
|
||
border-radius:999px;
|
||
background:#F0E7DD;
|
||
overflow:hidden;
|
||
}
|
||
.mini-bar span{
|
||
display:block;height:100%;
|
||
border-radius:999px;
|
||
background:linear-gradient(90deg,var(--blue),#A9C8F6);
|
||
}
|
||
|
||
/* learn/profile sub pages */
|
||
.article-card{
|
||
display:flex;
|
||
gap:12px;
|
||
background:#fff;
|
||
border-radius:20px;
|
||
padding:13px;
|
||
box-shadow:var(--shadow);
|
||
margin-bottom:12px;
|
||
}
|
||
.article-icon{
|
||
width:58px;height:58px;
|
||
border-radius:18px;
|
||
flex:none;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
background:#FFF1D8;
|
||
font-size:28px;
|
||
}
|
||
.article-card b{font-size:15px}
|
||
.article-card p{
|
||
color:var(--muted);
|
||
font-size:12px;
|
||
line-height:1.45;
|
||
margin-top:5px;
|
||
}
|
||
.profile-header{
|
||
text-align:center;
|
||
padding:12px 0 16px;
|
||
}
|
||
.profile-header .avatar{
|
||
margin:0 auto 10px;
|
||
width:76px;height:76px;
|
||
font-size:38px;
|
||
border-radius:28px;
|
||
}
|
||
.profile-list{
|
||
background:#fff;
|
||
border-radius:24px;
|
||
box-shadow:var(--shadow);
|
||
overflow:hidden;
|
||
margin-bottom:14px;
|
||
}
|
||
.profile-row{
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
min-height:52px;
|
||
padding:0 16px;
|
||
border-bottom:1px solid var(--line);
|
||
font-size:14px;
|
||
font-weight:800;
|
||
}
|
||
.profile-row:last-child{border-bottom:0}
|
||
.profile-row span{color:var(--muted);font-weight:700;font-size:13px}
|
||
|
||
.fab{
|
||
position:absolute;
|
||
right:18px;
|
||
bottom:92px;
|
||
width:58px;
|
||
height:58px;
|
||
border:0;
|
||
border-radius:22px;
|
||
background:linear-gradient(135deg,#78A6E8,#9FC0F5);
|
||
color:#fff;
|
||
font-weight:900;
|
||
box-shadow:0 14px 30px rgba(120,166,232,.32);
|
||
z-index:10;
|
||
font-size:20px;
|
||
}
|
||
|
||
.overlay{
|
||
position:absolute;
|
||
inset:0;
|
||
z-index:30;
|
||
background:rgba(26,18,12,.30);
|
||
opacity:0;
|
||
pointer-events:none;
|
||
transition:.2s ease;
|
||
backdrop-filter:blur(3px);
|
||
}
|
||
.overlay.show{
|
||
opacity:1;
|
||
pointer-events:auto;
|
||
}
|
||
.sheet{
|
||
position:absolute;
|
||
left:0; right:0; bottom:0;
|
||
background:#fff;
|
||
border-radius:30px 30px 0 0;
|
||
padding:16px 18px 24px;
|
||
max-height:82%;
|
||
overflow:auto;
|
||
transform:translateY(106%);
|
||
transition:.24s ease;
|
||
box-shadow:0 -20px 50px rgba(0,0,0,.16);
|
||
scrollbar-width:none;
|
||
}
|
||
.sheet::-webkit-scrollbar{display:none}
|
||
.overlay.show .sheet{transform:translateY(0)}
|
||
.sheetbar{
|
||
width:44px;height:5px;
|
||
border-radius:999px;
|
||
background:#E1D8CF;
|
||
margin:0 auto 16px;
|
||
}
|
||
.sheet h3{
|
||
font-size:20px;
|
||
margin-bottom:10px;
|
||
}
|
||
.sheet p{
|
||
font-size:14px;
|
||
color:#62584F;
|
||
line-height:1.65;
|
||
margin-bottom:12px;
|
||
}
|
||
.sheet-actions{
|
||
display:flex;
|
||
gap:10px;
|
||
margin-top:12px;
|
||
}
|
||
.sheet-actions .btn{flex:1}
|
||
.risk-box{
|
||
background:#FFF0D8;
|
||
color:#A96500;
|
||
padding:12px;
|
||
border-radius:16px;
|
||
font-weight:900;
|
||
display:flex;
|
||
gap:9px;
|
||
margin-bottom:12px;
|
||
align-items:center;
|
||
}
|
||
.mini-options{
|
||
display:flex;
|
||
flex-wrap:wrap;
|
||
gap:8px;
|
||
margin:10px 0 14px;
|
||
}
|
||
.option{
|
||
border:1px solid var(--line);
|
||
background:#fff;
|
||
border-radius:999px;
|
||
height:34px;
|
||
padding:0 12px;
|
||
color:#5F554D;
|
||
font-weight:800;
|
||
font-size:12px;
|
||
}
|
||
.option.selected{
|
||
background:#FFF2DC;
|
||
color:var(--primary-dark);
|
||
border-color:#FFD39A;
|
||
}
|
||
|
||
.side{
|
||
background:rgba(255,255,255,.70);
|
||
border:1px solid rgba(255,255,255,.85);
|
||
border-radius:30px;
|
||
box-shadow:var(--shadow2);
|
||
padding:24px;
|
||
backdrop-filter:blur(18px);
|
||
}
|
||
.side h2{
|
||
font-size:28px;
|
||
line-height:1.18;
|
||
letter-spacing:-.5px;
|
||
margin-bottom:10px;
|
||
}
|
||
.side p{
|
||
color:#665C53;
|
||
line-height:1.75;
|
||
font-size:14px;
|
||
margin-bottom:16px;
|
||
}
|
||
.side-grid{
|
||
display:grid;
|
||
grid-template-columns:1fr 1fr;
|
||
gap:12px;
|
||
margin:18px 0;
|
||
}
|
||
.side-card{
|
||
background:#fff;
|
||
border-radius:20px;
|
||
padding:14px;
|
||
box-shadow:0 8px 20px rgba(70,48,25,.06);
|
||
min-height:102px;
|
||
}
|
||
.side-card i{
|
||
font-style:normal;
|
||
display:block;
|
||
font-size:26px;
|
||
margin-bottom:8px;
|
||
}
|
||
.side-card b{font-size:14px}
|
||
.side-card span{
|
||
display:block;
|
||
color:var(--muted);
|
||
font-size:12px;
|
||
line-height:1.45;
|
||
margin-top:5px;
|
||
}
|
||
.side-note{
|
||
background:#FFF7E9;
|
||
border:1px solid #F4DEC0;
|
||
border-radius:20px;
|
||
padding:14px;
|
||
color:#7A5A2E;
|
||
font-size:13px;
|
||
line-height:1.6;
|
||
}
|
||
.side-actions{
|
||
display:flex;
|
||
gap:10px;
|
||
margin-top:16px;
|
||
}
|
||
|
||
|
||
/* community */
|
||
.feed-tabs{
|
||
display:flex;
|
||
gap:8px;
|
||
overflow:auto;
|
||
padding:0 0 12px;
|
||
scrollbar-width:none;
|
||
}
|
||
.feed-tabs::-webkit-scrollbar{display:none}
|
||
.feed-tab{
|
||
flex:none;
|
||
border:1px solid var(--line);
|
||
background:#fff;
|
||
border-radius:999px;
|
||
height:34px;
|
||
padding:0 13px;
|
||
color:var(--muted);
|
||
font-size:13px;
|
||
font-weight:900;
|
||
box-shadow:0 6px 16px rgba(70,48,25,.05);
|
||
}
|
||
.feed-tab.active{
|
||
color:var(--primary-dark);
|
||
background:#FFF4E4;
|
||
border-color:#FFD39A;
|
||
}
|
||
.post-card{
|
||
background:#fff;
|
||
border-radius:24px;
|
||
box-shadow:var(--shadow);
|
||
padding:15px;
|
||
margin-bottom:14px;
|
||
}
|
||
.post-head{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:10px;
|
||
margin-bottom:11px;
|
||
}
|
||
.post-avatar{
|
||
width:42px;
|
||
height:42px;
|
||
border-radius:16px;
|
||
background:#FFF0D8;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
font-size:22px;
|
||
flex:none;
|
||
}
|
||
.post-user{
|
||
flex:1;
|
||
}
|
||
.post-user b{
|
||
font-size:14px;
|
||
display:block;
|
||
}
|
||
.post-user span{
|
||
font-size:12px;
|
||
color:var(--muted);
|
||
}
|
||
.post-content{
|
||
font-size:14px;
|
||
line-height:1.62;
|
||
color:#443D37;
|
||
margin-bottom:12px;
|
||
}
|
||
.photo-grid{
|
||
display:grid;
|
||
grid-template-columns:repeat(3,1fr);
|
||
gap:6px;
|
||
margin-bottom:12px;
|
||
}
|
||
.photo-tile{
|
||
aspect-ratio:1;
|
||
border-radius:16px;
|
||
background:linear-gradient(135deg,#FFE6BA,#FFF8ED);
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
font-size:30px;
|
||
overflow:hidden;
|
||
}
|
||
.post-actions{
|
||
display:flex;
|
||
justify-content:space-around;
|
||
border-top:1px solid var(--line);
|
||
padding-top:10px;
|
||
}
|
||
.post-actions button{
|
||
border:0;
|
||
background:transparent;
|
||
color:var(--muted);
|
||
font-weight:900;
|
||
font-size:13px;
|
||
}
|
||
.compose-card{
|
||
display:flex;
|
||
gap:10px;
|
||
align-items:center;
|
||
background:#fff;
|
||
border-radius:22px;
|
||
box-shadow:var(--shadow);
|
||
padding:12px;
|
||
margin-bottom:14px;
|
||
}
|
||
.compose-input{
|
||
flex:1;
|
||
height:38px;
|
||
border-radius:999px;
|
||
background:#FBFAF8;
|
||
border:1px solid var(--line);
|
||
color:var(--muted);
|
||
display:flex;
|
||
align-items:center;
|
||
padding:0 13px;
|
||
font-size:13px;
|
||
}
|
||
|
||
@media(max-width:880px){
|
||
body{padding:12px}
|
||
.stage{grid-template-columns:1fr}
|
||
.side{display:none}
|
||
.phone{
|
||
width:min(402px,100vw - 24px);
|
||
height:min(844px,100vh - 24px);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="stage">
|
||
<div class="phone">
|
||
<div class="screen">
|
||
<div class="statusbar"><span>9:41</span><span>●●● 5G ▰</span></div>
|
||
<div class="wx-nav">
|
||
<button id="backBtn" class="back-btn" onclick="goBack()">‹</button>
|
||
<span id="navTitle">肉垫计划</span>
|
||
<div class="wx-capsule">··· ○</div>
|
||
</div>
|
||
|
||
<!-- Onboarding -->
|
||
<section class="page full onboard active" id="page-onboarding">
|
||
<div class="step active" data-step="0">
|
||
<div class="hero">
|
||
<div class="pet-logo">🐾</div>
|
||
<h1>肉垫计划</h1>
|
||
<p>新手养宠的 AI 日历、健康记录和成长报告。<br/>先生成计划，再每天照着做。</p>
|
||
</div>
|
||
<div class="proof-row">
|
||
<div class="proof"><b>30天</b><span>新手计划</span></div>
|
||
<div class="proof"><b>8类</b><span>快速记录</span></div>
|
||
<div class="proof"><b>AI</b><span>观察建议</span></div>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="nextStep()">生成我的养宠计划</button>
|
||
<button class="btn btn-ghost btn-block" style="margin-top:10px" onclick="skipOnboard()">查看完整原型</button>
|
||
</div>
|
||
|
||
<div class="step" data-step="1">
|
||
<h2 class="step-title">你的毛孩子是？</h2>
|
||
<p class="step-sub">第一版建议只支持猫狗，容易做深，不要一开始做全品类。</p>
|
||
<div class="choice-grid">
|
||
<div class="choice-card selected" onclick="choosePet(this,'猫猫','🐱')">
|
||
<div class="animal">🐱</div><b>猫猫</b><span>幼猫、成年猫、老年猫</span>
|
||
</div>
|
||
<div class="choice-card" onclick="choosePet(this,'狗狗','🐶')">
|
||
<div class="animal">🐶</div><b>狗狗</b><span>幼犬、成年犬、老年犬</span>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="nextStep()">下一步</button>
|
||
</div>
|
||
|
||
<div class="step" data-step="2">
|
||
<h2 class="step-title">告诉我一点它的信息</h2>
|
||
<p class="step-sub">这里越轻越好，先让用户完成建档，再逐步补充信息。</p>
|
||
<div class="form-card">
|
||
<div class="field"><label>宠物名字</label><input id="petNameInput" value="奶球"/></div>
|
||
<div class="field"><label>生日 / 到家时间</label><input type="date" value="2026-03-01"/></div>
|
||
<div class="field"><label>性别</label><div class="seg"><button class="selected" onclick="selectSeg(this)">男孩</button><button onclick="selectSeg(this)">女孩</button><button onclick="selectSeg(this)">不确定</button></div></div>
|
||
<div class="field"><label>当前体重</label><input id="petWeightInput" value="2.8"/></div>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="savePetNext()">下一步</button>
|
||
</div>
|
||
|
||
<div class="step" data-step="3">
|
||
<h2 class="step-title">它现在处于哪个阶段？</h2>
|
||
<p class="step-sub">阶段会决定今日任务、提醒和 AI 建议。</p>
|
||
<div class="stage-list">
|
||
<div class="stage-card selected" onclick="chooseStage(this,'幼年期')"><b>幼年期</b><p>疫苗、驱虫、体重增长、行为训练</p></div>
|
||
<div class="stage-card" onclick="chooseStage(this,'刚到家 0-30 天')"><b>刚到家 0-30 天</b><p>适应环境、饮食稳定、基础照护</p></div>
|
||
<div class="stage-card" onclick="chooseStage(this,'成年期')"><b>成年期</b><p>体重、饮食、日常健康管理</p></div>
|
||
<div class="stage-card" onclick="chooseStage(this,'老年期')"><b>老年期</b><p>慢病、体检、用药和护理</p></div>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="nextStep()">下一步</button>
|
||
</div>
|
||
|
||
<div class="step" data-step="4">
|
||
<h2 class="step-title">你最想解决什么？</h2>
|
||
<p class="step-sub">多选。这个信息适合后续用于推荐计划模板和付费能力。</p>
|
||
<div class="check-list">
|
||
<div class="check selected" onclick="toggleCheck(this)"><span class="box">✓</span>不知道每天该做什么</div>
|
||
<div class="check selected" onclick="toggleCheck(this)"><span class="box">✓</span>疫苗驱虫怕忘记</div>
|
||
<div class="check" onclick="toggleCheck(this)"><span class="box"></span>想记录体重和健康</div>
|
||
<div class="check" onclick="toggleCheck(this)"><span class="box"></span>担心生病不会判断</div>
|
||
<div class="check" onclick="toggleCheck(this)"><span class="box"></span>想控制养宠开销</div>
|
||
<div class="check" onclick="toggleCheck(this)"><span class="box"></span>想生成成长报告</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="nextStep()">生成专属计划</button>
|
||
</div>
|
||
|
||
<div class="step" data-step="5">
|
||
<h2 class="step-title">正在生成专属养宠计划</h2>
|
||
<p class="step-sub">真实产品中可做成 2 秒的 AI 生成动画，增强完成感。</p>
|
||
<div class="gen-card">
|
||
<div class="gen-line"><span class="tick">✓</span> 已识别：<span id="genPetStage">幼年期</span></div>
|
||
<div class="gen-line"><span class="tick">✓</span> 已生成：30 天新手计划</div>
|
||
<div class="gen-line"><span class="tick">✓</span> 已安排：疫苗 / 驱虫提醒</div>
|
||
<div class="gen-line"><span class="tick">✓</span> 已开启：体重、便便、饮食记录</div>
|
||
<div class="gen-line"><span class="tick">✓</span> 已准备：首张成长报告卡片</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" style="margin-top:18px" onclick="finishOnboard()">查看今日任务</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Home -->
|
||
<section class="page" id="page-home">
|
||
<div class="top-row">
|
||
<div class="greeting">
|
||
<h2>早上好，Aiden</h2>
|
||
<p>今天也要照顾好 <span class="pet-name">奶球</span> 🐾</p>
|
||
</div>
|
||
<div class="icon-stack">
|
||
<button class="icon-btn" onclick="openSheet('reminders')">🔔</button>
|
||
<button class="icon-btn" onclick="openSubPage('profile')">⚙</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pet-switch">
|
||
<button class="pet-chip active" data-pet="奶球" onclick="switchPet(this,'奶球','🐱','2.8kg','幼年期')"><span class="mini-avatar">🐱</span>奶球</button>
|
||
<button class="pet-chip" data-pet="布丁" onclick="switchPet(this,'布丁','🐶','6.4kg','刚到家 0-30 天')"><span class="mini-avatar">🐶</span>布丁</button>
|
||
<button class="pet-chip" data-pet="add" onclick="openSheet('addPet')"><span class="mini-avatar">＋</span>添加</button>
|
||
</div>
|
||
|
||
<div class="card hero-card">
|
||
<div class="pet-row">
|
||
<div class="avatar pet-emoji">🐱</div>
|
||
<div class="pet-main">
|
||
<b class="pet-name">奶球</b>
|
||
<p>4个月｜<span class="pet-weight">2.8kg</span>｜<span class="pet-stage">幼年期</span></p>
|
||
</div>
|
||
<span class="tag">正常</span>
|
||
</div>
|
||
<div class="progress-row"><span>本周健康完成度</span><span id="healthPct">68%</span></div>
|
||
<div class="bar"><span id="healthBar"></span></div>
|
||
<div class="insight-row">
|
||
<div class="insight"><b>5天后</b>第 2 针疫苗</div>
|
||
<div class="insight"><b>+0.2kg</b>本周体重</div>
|
||
<div class="insight"><b>2天</b>连续记录</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="date-strip">
|
||
<div class="day"><span>一</span><b>29</b></div>
|
||
<div class="day has-dot"><span>二</span><b>30</b></div>
|
||
<div class="day"><span>三</span><b>1</b></div>
|
||
<div class="day active has-dot"><span>四</span><b>2</b></div>
|
||
<div class="day"><span>五</span><b>3</b></div>
|
||
<div class="day has-dot"><span>六</span><b>4</b></div>
|
||
<div class="day"><span>日</span><b>5</b></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-head">
|
||
<h3>今日任务</h3>
|
||
<button class="link" onclick="completeTasks()">全部完成</button>
|
||
</div>
|
||
<div class="task-list" id="taskList">
|
||
<div class="task" onclick="toggleTask(this)"><span class="circle">✓</span><div class="task-text"><b>记录一次体重</b><p>幼年期建议每周至少记录 2 次</p></div><span class="priority">重要</span></div>
|
||
<div class="task" onclick="openSheet('poop')"><span class="circle">✓</span><div class="task-text"><b>观察饮水和排便</b><p>换粮、应激都可能影响排便状态</p></div></div>
|
||
<div class="task" onclick="openSheet('vaccine')"><span class="circle">✓</span><div class="task-text"><b>检查疫苗预约</b><p>第 2 针疫苗还有 5 天</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-head">
|
||
<h3>快速记录</h3>
|
||
<button class="link" onclick="showPage('record')">更多</button>
|
||
</div>
|
||
<div class="quick-grid">
|
||
<button class="quick" onclick="openSheet('weight')"><span>⚖️</span>体重</button>
|
||
<button class="quick" onclick="openSheet('poop')"><span>💩</span>便便</button>
|
||
<button class="quick" onclick="openSheet('food')"><span>🍽️</span>饮食</button>
|
||
<button class="quick" onclick="openSheet('symptom')"><span>🤒</span>异常</button>
|
||
<button class="quick" onclick="openSheet('cost')"><span>💰</span>消费</button>
|
||
<button class="quick" onclick="openSheet('medicine')"><span>💊</span>用药</button>
|
||
<button class="quick" onclick="openSheet('photo')"><span>📷</span>照片</button>
|
||
<button class="quick" onclick="openSheet('vaccine')"><span>💉</span>疫苗</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card ai-banner">
|
||
<div class="section-head">
|
||
<h3>AI 今日建议</h3>
|
||
<button class="link" onclick="openSheet('ai')">问问 AI</button>
|
||
</div>
|
||
<p><span class="pet-name">奶球</span>处于快速成长阶段，本周建议重点记录体重和排便。若出现连续呕吐、精神明显变差或便血，应尽快就医。</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-head">
|
||
<h3>新手内容</h3>
|
||
<button class="link" onclick="openSubPage('learn')">查看</button>
|
||
</div>
|
||
<div class="article-card" onclick="openSheet('article1')" style="box-shadow:none;border:1px solid var(--line);margin-bottom:0;">
|
||
<div class="article-icon">💉</div>
|
||
<div><b>幼猫疫苗和驱虫怎么安排？</b><p>把内容引流和计划生成打通，适合冷启动获客。</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Plan -->
|
||
<section class="page" id="page-plan">
|
||
<div class="page-title">
|
||
<h2>养宠计划</h2>
|
||
<p>计划页也要按宠物切换，避免多宠家庭计划混在一起。</p>
|
||
</div>
|
||
|
||
<div class="pet-switch">
|
||
<button class="pet-chip active" data-pet="奶球" onclick="switchPet(this,'奶球','🐱','2.8kg','幼年期')"><span class="mini-avatar">🐱</span>奶球</button>
|
||
<button class="pet-chip" data-pet="布丁" onclick="switchPet(this,'布丁','🐶','6.4kg','刚到家 0-30 天')"><span class="mini-avatar">🐶</span>布丁</button>
|
||
<button class="pet-chip" data-pet="add" onclick="openSheet('addPet')"><span class="mini-avatar">＋</span>添加</button>
|
||
</div>
|
||
|
||
<div class="inline-tabs">
|
||
<button class="active" onclick="switchPlanView(this,'timeline')">路线图</button>
|
||
<button onclick="switchPlanView(this,'calendar')">日历</button>
|
||
<button onclick="switchPlanView(this,'aiPlan')">AI 计划</button>
|
||
</div>
|
||
|
||
<div class="plan-mode active" id="plan-timeline">
|
||
<div class="card">
|
||
<div class="section-head">
|
||
<h3><span class="pet-name">奶球</span>的 30 天计划</h3>
|
||
<span class="tag warn">12/30</span>
|
||
</div>
|
||
<div class="progress-row"><span>完成度</span><span>40%</span></div>
|
||
<div class="bar"><span style="width:40%"></span></div>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="time-block"><div class="time-label">今天</div><div class="plan-task" onclick="openSheet('taskDetail')"><b>观察排便状态</b><p>记录颜色、形态、次数，发现软便可连续观察。</p></div></div>
|
||
<div class="time-block"><div class="time-label">明天</div><div class="plan-task" onclick="openSheet('vaccine')"><b>检查疫苗预约</b><p>距离下一针还有 5 天，提前确认医院和时间。</p></div></div>
|
||
<div class="time-block"><div class="time-label">第 7 天</div><div class="plan-task" onclick="openSheet('weight')"><b>体重趋势检查</b><p>幼年期每周称重，观察是否稳定增长。</p></div></div>
|
||
<div class="time-block"><div class="time-label">第 14 天</div><div class="plan-task" onclick="openSheet('taskDetail')"><b>复盘饮食与便便</b><p>如果近期换粮，建议把换粮过程和异常记录合并查看。</p></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="plan-mode" id="plan-calendar">
|
||
<div class="calendar">
|
||
<div class="cal-head"><span>2026 年 7 月</span><button class="link" onclick="openSheet('reminders')">提醒</button></div>
|
||
<div class="cal-grid">
|
||
<span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
|
||
<div class="cal-cell">29</div><div class="cal-cell tasked">30</div><div class="cal-cell">1</div><div class="cal-cell today tasked">2</div><div class="cal-cell">3</div><div class="cal-cell tasked">4</div><div class="cal-cell">5</div>
|
||
<div class="cal-cell">6</div><div class="cal-cell tasked">7</div><div class="cal-cell">8</div><div class="cal-cell">9</div><div class="cal-cell tasked">10</div><div class="cal-cell">11</div><div class="cal-cell">12</div>
|
||
<div class="cal-cell">13</div><div class="cal-cell tasked">14</div><div class="cal-cell">15</div><div class="cal-cell">16</div><div class="cal-cell">17</div><div class="cal-cell tasked">18</div><div class="cal-cell">19</div>
|
||
<div class="cal-cell">20</div><div class="cal-cell tasked">21</div><div class="cal-cell">22</div><div class="cal-cell">23</div><div class="cal-cell">24</div><div class="cal-cell">25</div><div class="cal-cell">26</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="margin-top:14px">
|
||
<div class="section-head"><h3>7月2日任务</h3><span class="tag">3项</span></div>
|
||
<div class="task-list">
|
||
<div class="task"><span class="circle">✓</span><div class="task-text"><b>记录体重</b><p>预计 1 分钟完成</p></div></div>
|
||
<div class="task"><span class="circle">✓</span><div class="task-text"><b>观察排便</b><p>建议拍照留存</p></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="plan-mode" id="plan-aiPlan">
|
||
<div class="card">
|
||
<div class="section-head"><h3>AI 计划模式</h3><span class="tag purple">Plan</span></div>
|
||
<div class="plan-chat">
|
||
<div class="msg ai">我会先提取关键信息，再生成可执行计划。你可以审核后确认。</div>
|
||
<div class="msg user">奶球 4 个月，最近刚换粮，担心软便，也快打第二针疫苗。</div>
|
||
<div class="msg ai">我提取到了这些信息，请确认是否准确。</div>
|
||
</div>
|
||
<div class="extracted">
|
||
<div class="extract"><b>阶段</b>幼年期 / 疫苗期</div>
|
||
<div class="extract"><b>风险</b>换粮软便</div>
|
||
<div class="extract"><b>重点</b>排便观察</div>
|
||
<div class="extract"><b>提醒</b>第二针疫苗</div>
|
||
</div>
|
||
<div class="sheet-actions">
|
||
<button class="btn btn-ghost" onclick="openSheet('editExtract')">修改信息</button>
|
||
<button class="btn btn-primary" onclick="openSheet('applyPlan')">生成计划</button>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="section-head"><h3>推荐计划模板</h3></div>
|
||
<div class="article-card" onclick="openSheet('applyPlan')" style="box-shadow:none;border:1px solid var(--line);">
|
||
<div class="article-icon">🍽️</div>
|
||
<div><b>7 天换粮观察计划</b><p>每日记录饮食、便便、精神状态，自动生成复盘。</p></div>
|
||
</div>
|
||
<div class="article-card" onclick="openSheet('pro')" style="box-shadow:none;border:1px solid var(--line);margin-bottom:0;">
|
||
<div class="article-icon">💉</div>
|
||
<div><b>疫苗前后护理计划</b><p>含洗澡避坑、异常观察、就医摘要。</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Record -->
|
||
<section class="page" id="page-record">
|
||
<div class="page-title">
|
||
<h2>快速记录</h2>
|
||
<p>先选择宠物，再记录体重、饮食、异常和消费。</p>
|
||
</div>
|
||
|
||
<div class="pet-switch">
|
||
<button class="pet-chip active" data-pet="奶球" onclick="switchPet(this,'奶球','🐱','2.8kg','幼年期')"><span class="mini-avatar">🐱</span>奶球</button>
|
||
<button class="pet-chip" data-pet="布丁" onclick="switchPet(this,'布丁','🐶','6.4kg','刚到家 0-30 天')"><span class="mini-avatar">🐶</span>布丁</button>
|
||
<button class="pet-chip" data-pet="add" onclick="openSheet('addPet')"><span class="mini-avatar">＋</span>添加</button>
|
||
</div>
|
||
|
||
<div class="record-grid">
|
||
<button class="record-item" onclick="openSheet('weight')"><span>⚖️</span>体重</button>
|
||
<button class="record-item" onclick="openSheet('food')"><span>🍽️</span>饮食</button>
|
||
<button class="record-item" onclick="openSheet('poop')"><span>💩</span>便便</button>
|
||
<button class="record-item" onclick="openSheet('symptom')"><span>🤒</span>异常</button>
|
||
<button class="record-item" onclick="openSheet('medicine')"><span>💊</span>用药</button>
|
||
<button class="record-item" onclick="openSheet('cost')"><span>💰</span>消费</button>
|
||
<button class="record-item" onclick="openSheet('vaccine')"><span>💉</span>疫苗</button>
|
||
<button class="record-item" onclick="openSheet('deworm')"><span>🛡️</span>驱虫</button>
|
||
<button class="record-item" onclick="openSheet('photo')"><span>📷</span>照片</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-head"><h3>体重趋势</h3><button class="link" onclick="openSheet('weight')">记录</button></div>
|
||
<div class="mini-chart">
|
||
<div class="chart-line">
|
||
<svg viewBox="0 0 300 100">
|
||
<polyline points="0,80 50,72 100,66 150,54 200,45 250,32 300,26" fill="none" stroke="#73BE9D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<g fill="#73BE9D"><circle cx="0" cy="80" r="5"/><circle cx="50" cy="72" r="5"/><circle cx="100" cy="66" r="5"/><circle cx="150" cy="54" r="5"/><circle cx="200" cy="45" r="5"/><circle cx="250" cy="32" r="5"/><circle cx="300" cy="26" r="5"/></g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-head"><h3>健康时间轴</h3><button class="link" onclick="openSheet('vetSummary')">摘要</button></div>
|
||
<div class="health-timeline" id="healthTimeline">
|
||
<div class="health-event"><div class="event-dot">⚖️</div><div><b>体重 2.8kg</b><p>今天 09:12｜较上次 +0.2kg</p></div></div>
|
||
<div class="health-event"><div class="event-dot">💩</div><div><b>排便正常</b><p>昨天 20:18｜颜色和形态正常</p></div></div>
|
||
<div class="health-event"><div class="event-dot">💰</div><div><b>猫粮 ¥168</b><p>7月1日｜食品类支出</p></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Report -->
|
||
<section class="page" id="page-report">
|
||
<div class="page-title">
|
||
<h2>成长报告</h2>
|
||
<p>不同宠物的报告、账单和健康摘要要完全分开。</p>
|
||
</div>
|
||
|
||
<div class="pet-switch">
|
||
<button class="pet-chip active" data-pet="奶球" onclick="switchPet(this,'奶球','🐱','2.8kg','幼年期')"><span class="mini-avatar">🐱</span>奶球</button>
|
||
<button class="pet-chip" data-pet="布丁" onclick="switchPet(this,'布丁','🐶','6.4kg','刚到家 0-30 天')"><span class="mini-avatar">🐶</span>布丁</button>
|
||
<button class="pet-chip" data-pet="add" onclick="openSheet('addPet')"><span class="mini-avatar">＋</span>添加</button>
|
||
</div>
|
||
|
||
<div class="card report-card">
|
||
<div class="section-head"><h3>本周成长报告</h3><span class="tag">稳定成长</span></div>
|
||
<p class="muted" style="font-size:14px;line-height:1.6;">本周 <span class="pet-name">奶球</span> 完成 6 项任务，体重 +0.2kg，无高风险异常记录。</p>
|
||
<div class="stats-grid">
|
||
<div class="stat"><b>6</b><span>完成任务</span></div>
|
||
<div class="stat"><b>+0.2</b><span>kg 增长</span></div>
|
||
<div class="stat"><b>0</b><span>高风险异常</span></div>
|
||
</div>
|
||
<div class="sheet-actions">
|
||
<button class="btn btn-ghost" onclick="openSheet('reportDetail')">查看报告</button>
|
||
<button class="btn btn-primary" onclick="openSheet('poster')">分享卡片</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-head"><h3>健康摘要</h3><button class="link" onclick="openSheet('vetSummary')">导出</button></div>
|
||
<div class="record-row"><b>疫苗进度</b><span>2/3，即将到期</span></div>
|
||
<div class="record-row"><b>驱虫状态</b><span>下次 7月15日</span></div>
|
||
<div class="record-row"><b>体重趋势</b><span>稳定增长</span></div>
|
||
<div class="record-row"><b>异常记录</b><span>低风险 1 次</span></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-head"><h3>养宠账单</h3><button class="link" onclick="openSheet('cost')">记一笔</button></div>
|
||
<div class="stats-grid">
|
||
<div class="stat"><b>¥326</b><span>本月花费</span></div>
|
||
<div class="stat"><b>¥168</b><span>最大支出</span></div>
|
||
<div class="stat"><b>3</b><span>消费类别</span></div>
|
||
</div>
|
||
<div class="bill-bars">
|
||
<div class="bill-row"><span>食品</span><div class="mini-bar"><span style="width:74%"></span></div><b>¥168</b></div>
|
||
<div class="bill-row"><span>用品</span><div class="mini-bar"><span style="width:42%"></span></div><b>¥96</b></div>
|
||
<div class="bill-row"><span>医疗</span><div class="mini-bar"><span style="width:28%"></span></div><b>¥62</b></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="section-head"><h3>Pro 会员</h3><span class="tag purple">变现点</span></div>
|
||
<p class="muted" style="font-size:14px;line-height:1.6;">365 天计划、PDF 健康档案、月度报告、多宠物管理和年度账单都适合做付费权益。</p>
|
||
<button class="btn btn-primary btn-block" style="margin-top:12px" onclick="openSheet('pro')">查看 Pro 权益</button>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Community -->
|
||
<section class="page" id="page-community">
|
||
<div class="page-title">
|
||
<h2>宠友圈</h2>
|
||
<p>社区适合做交流、晒宠和内容增长，但不要压过工具主线。</p>
|
||
</div>
|
||
|
||
<div class="feed-tabs">
|
||
<button class="feed-tab active" onclick="switchFeedTab(this)">推荐</button>
|
||
<button class="feed-tab" onclick="switchFeedTab(this)">关注</button>
|
||
<button class="feed-tab" onclick="switchFeedTab(this)">新手求助</button>
|
||
<button class="feed-tab" onclick="switchFeedTab(this)">晒宠</button>
|
||
<button class="feed-tab" onclick="switchFeedTab(this)">经验</button>
|
||
</div>
|
||
|
||
<div class="compose-card" onclick="openSheet('createPost')">
|
||
<div class="post-avatar pet-emoji">🐱</div>
|
||
<div class="compose-input">分享一下今天和 <span class="pet-name">奶球</span> 的日常...</div>
|
||
<button class="btn btn-primary btn-small">发布</button>
|
||
</div>
|
||
|
||
<div class="post-card">
|
||
<div class="post-head">
|
||
<div class="post-avatar">🐱</div>
|
||
<div class="post-user"><b>奶球的铲屎官</b><span>幼猫新手｜刚刚</span></div>
|
||
<span class="tag warn">求助</span>
|
||
</div>
|
||
<div class="post-content">刚换粮第 2 天有一点软便，精神和食欲都正常。大家一般会观察几天？我已经在记录里保存了便便状态。</div>
|
||
<div class="photo-grid">
|
||
<div class="photo-tile">🍽️</div>
|
||
<div class="photo-tile">💩</div>
|
||
<div class="photo-tile">🐱</div>
|
||
</div>
|
||
<div class="post-actions">
|
||
<button onclick="likePost(this)">♡ 28</button>
|
||
<button onclick="openSheet('comments')">💬 12</button>
|
||
<button onclick="openSheet('sharePost')">↗ 分享</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-card">
|
||
<div class="post-head">
|
||
<div class="post-avatar">🐶</div>
|
||
<div class="post-user"><b>布丁今天不拆家</b><span>幼犬训练｜12 分钟前</span></div>
|
||
<span class="tag blue">经验</span>
|
||
</div>
|
||
<div class="post-content">分享一个幼犬到家 7 天适应计划：先固定睡觉区域，再固定喂食时间，最后做短时间独处训练。不要一开始就全天陪着。</div>
|
||
<div class="photo-grid">
|
||
<div class="photo-tile">🐶</div>
|
||
<div class="photo-tile">🏠</div>
|
||
<div class="photo-tile">🧸</div>
|
||
</div>
|
||
<div class="post-actions">
|
||
<button onclick="likePost(this)">♡ 143</button>
|
||
<button onclick="openSheet('comments')">💬 36</button>
|
||
<button onclick="openSheet('sharePost')">↗ 分享</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="post-card">
|
||
<div class="post-head">
|
||
<div class="post-avatar">🐾</div>
|
||
<div class="post-user"><b>肉垫计划官方</b><span>精选内容｜今天</span></div>
|
||
<span class="tag purple">精选</span>
|
||
</div>
|
||
<div class="post-content">新手帖：猫咪软便不一定马上就医，但要记录持续时间、精神状态、食欲和是否便血。可以从异常记录里生成就医前摘要。</div>
|
||
<div class="post-actions">
|
||
<button onclick="likePost(this)">♡ 521</button>
|
||
<button onclick="openSheet('comments')">💬 88</button>
|
||
<button onclick="openSheet('article2')">查看</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Learn subpage -->
|
||
<section class="page" id="page-learn">
|
||
<div class="page-title">
|
||
<h2>新手养宠知识</h2>
|
||
<p>内容页负责冷启动获客，结尾引导生成计划。</p>
|
||
</div>
|
||
<div class="article-card" onclick="openSheet('article1')"><div class="article-icon">💉</div><div><b>幼猫疫苗和驱虫怎么安排？</b><p>适合搜索流量和社群传播，引导生成提醒。</p></div></div>
|
||
<div class="article-card" onclick="openSheet('article2')"><div class="article-icon">💩</div><div><b>猫咪软便要不要去医院？</b><p>接异常记录和 AI 观察建议。</p></div></div>
|
||
<div class="article-card" onclick="openSheet('article3')"><div class="article-icon">🍽️</div><div><b>7 天换粮计划怎么做？</b><p>接计划模板，适合一次性付费。</p></div></div>
|
||
<div class="article-card" onclick="openSheet('article4')"><div class="article-icon">💰</div><div><b>一个月养猫大概花多少钱？</b><p>接养宠账本和年度账单。</p></div></div>
|
||
</section>
|
||
|
||
<!-- Profile subpage -->
|
||
<section class="page" id="page-profile">
|
||
<div class="profile-header">
|
||
<div class="avatar pet-emoji">🐱</div>
|
||
<h2 class="pet-name">奶球</h2>
|
||
<p class="muted">4个月｜<span class="pet-weight">2.8kg</span>｜<span class="pet-stage">幼年期</span></p>
|
||
</div>
|
||
<div class="profile-list">
|
||
<div class="profile-row">宠物档案 <span>已完善 72%</span></div>
|
||
<div class="profile-row">提醒设置 <span>已开启</span></div>
|
||
<div class="profile-row">健康记录 <span>12 条</span></div>
|
||
<div class="profile-row">多宠物管理 <span>Pro</span></div>
|
||
</div>
|
||
<div class="profile-list">
|
||
<div class="profile-row">会员权益 <span>未开通</span></div>
|
||
<div class="profile-row">数据导出 <span>PDF</span></div>
|
||
<div class="profile-row">意见反馈 <span>去填写</span></div>
|
||
<div class="profile-row">关于我们 <span>v0.2</span></div>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="openSheet('pro')">开通 Pro</button>
|
||
</section>
|
||
|
||
<button class="fab" onclick="openSheet('ai')">AI</button>
|
||
|
||
<nav class="tabbar" id="tabbar">
|
||
<button class="tab active" onclick="showPage('home')"><i>🏠</i>首页</button>
|
||
<button class="tab" onclick="showPage('plan')"><i>📅</i>计划</button>
|
||
<button class="tab" onclick="showPage('record')"><i>✍️</i>记录</button>
|
||
<button class="tab" onclick="showPage('report')"><i>📊</i>报告</button>
|
||
<button class="tab" onclick="showPage('community')"><i>🐾</i>社区</button>
|
||
</nav>
|
||
|
||
<div class="overlay" id="overlay" onclick="closeSheet(event)">
|
||
<div class="sheet" id="sheet" onclick="event.stopPropagation()"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="side">
|
||
<h2>社区版交互 UI：工具闭环 + 宠友交流</h2>
|
||
<p>这一版把多宠物切换扩展到了计划、记录、报告，并新增社区 Tab：支持图文发布、点赞、评论、分享和精选内容。</p>
|
||
<div class="side-grid">
|
||
<div class="side-card"><i>🐱</i><b>多宠物切换</b><span>模拟家庭多宠场景，也是 Pro 权益入口。</span></div>
|
||
<div class="side-card"><i>📅</i><b>日历 + 路线图</b><span>既有每日任务，也能看长期计划。</span></div>
|
||
<div class="side-card"><i>🤖</i><b>AI 计划模式</b><span>先提取信息，再让用户审核确认。</span></div>
|
||
<div class="side-card"><i>📊</i><b>报告和分享</b><span>成长报告、账单、健康摘要都可传播。</span></div>
|
||
<div class="side-card"><i>🐾</i><b>宠友社区</b><span>图文、评论、点赞、求助和经验内容。</span></div>
|
||
</div>
|
||
<div class="side-note">
|
||
建议后续真实开发时，社区先做轻量版：发布图文、评论点赞、关注、举报审核。不要一开始做复杂圈子和私信。
|
||
</div>
|
||
<div class="side-actions">
|
||
<button class="btn btn-primary" onclick="document.querySelector('.phone').scrollIntoView({behavior:'smooth'})">查看原型</button>
|
||
<button class="btn btn-ghost" onclick="window.location.reload()">重置</button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<script>
|
||
const state = {
|
||
step:0,
|
||
petName:'奶球',
|
||
petEmoji:'🐱',
|
||
petType:'猫猫',
|
||
petWeight:'2.8kg',
|
||
petStage:'幼年期',
|
||
active:'onboarding',
|
||
history:['home']
|
||
};
|
||
|
||
const $ = id => document.getElementById(id);
|
||
|
||
function nextStep(){
|
||
const steps = document.querySelectorAll('.step');
|
||
steps[state.step].classList.remove('active');
|
||
state.step = Math.min(state.step + 1, steps.length - 1);
|
||
steps[state.step].classList.add('active');
|
||
if(state.step===5) $('genPetStage').innerText = state.petStage;
|
||
}
|
||
function choosePet(el,type,emoji){
|
||
document.querySelectorAll('.choice-card').forEach(x=>x.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
state.petType = type;
|
||
state.petEmoji = emoji;
|
||
}
|
||
function chooseStage(el,stage){
|
||
document.querySelectorAll('.stage-card').forEach(x=>x.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
state.petStage = stage;
|
||
}
|
||
function savePetNext(){
|
||
state.petName = $('petNameInput').value || '奶球';
|
||
let w = $('petWeightInput').value || '2.8';
|
||
w = w.replace(/\s+/g,'');
|
||
state.petWeight = w.includes('kg') ? w : w + 'kg';
|
||
updatePetUI();
|
||
nextStep();
|
||
}
|
||
function toggleCheck(el){
|
||
el.classList.toggle('selected');
|
||
el.querySelector('.box').innerText = el.classList.contains('selected') ? '✓' : '';
|
||
}
|
||
function selectSeg(btn){
|
||
btn.parentElement.querySelectorAll('button').forEach(b=>b.classList.remove('selected'));
|
||
btn.classList.add('selected');
|
||
}
|
||
function finishOnboard(){
|
||
updatePetUI();
|
||
$('page-onboarding').classList.remove('active');
|
||
$('tabbar').style.display='flex';
|
||
showPage('home');
|
||
}
|
||
function skipOnboard(){
|
||
$('page-onboarding').classList.remove('active');
|
||
$('tabbar').style.display='flex';
|
||
showPage('home');
|
||
}
|
||
|
||
function updatePetUI(){
|
||
document.querySelectorAll('.pet-name').forEach(el=>el.innerText=state.petName);
|
||
document.querySelectorAll('.pet-emoji').forEach(el=>el.innerText=state.petEmoji);
|
||
document.querySelectorAll('.pet-weight').forEach(el=>el.innerText=state.petWeight);
|
||
document.querySelectorAll('.pet-stage').forEach(el=>el.innerText=state.petStage);
|
||
}
|
||
|
||
function showPage(page){
|
||
document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
|
||
$('page-' + page).classList.add('active');
|
||
state.active = page;
|
||
if(['home','plan','record','report','community'].includes(page)){
|
||
document.querySelectorAll('.tab').forEach(t=>t.classList.remove('active'));
|
||
const map = {home:0,plan:1,record:2,report:3,community:4};
|
||
document.querySelectorAll('.tab')[map[page]].classList.add('active');
|
||
$('backBtn').classList.remove('show');
|
||
} else {
|
||
$('backBtn').classList.add('show');
|
||
}
|
||
const titles = {home:'肉垫计划', plan:'养宠计划', record:'快速记录', report:'成长报告', community:'宠友圈', learn:'新手知识', profile:'我的'};
|
||
$('navTitle').innerText = titles[page] || '肉垫计划';
|
||
}
|
||
function openSubPage(page){
|
||
state.history.push(state.active);
|
||
showPage(page);
|
||
}
|
||
function goBack(){
|
||
const last = state.history.pop() || 'home';
|
||
showPage(last);
|
||
}
|
||
|
||
function switchPet(btn,name,emoji,weight,stage){
|
||
state.petName = name;
|
||
state.petEmoji = emoji;
|
||
state.petWeight = weight;
|
||
state.petStage = stage;
|
||
document.querySelectorAll('.pet-chip').forEach(x=>{
|
||
x.classList.toggle('active', x.dataset.pet === name);
|
||
});
|
||
updatePetUI();
|
||
}
|
||
|
||
function switchFeedTab(btn){
|
||
btn.parentElement.querySelectorAll('.feed-tab').forEach(x=>x.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
}
|
||
|
||
function likePost(btn){
|
||
const text = btn.innerText.trim();
|
||
const num = parseInt(text.replace(/\D/g,''),10) || 0;
|
||
btn.innerText = '♥ ' + (num + 1);
|
||
btn.style.color = 'var(--red)';
|
||
}
|
||
|
||
function toggleTask(el){
|
||
el.classList.toggle('done');
|
||
updateCompletion();
|
||
}
|
||
function completeTasks(){
|
||
document.querySelectorAll('#taskList .task').forEach(t=>t.classList.add('done'));
|
||
updateCompletion();
|
||
}
|
||
function updateCompletion(){
|
||
const tasks = [...document.querySelectorAll('#taskList .task')];
|
||
const done = tasks.filter(t=>t.classList.contains('done')).length;
|
||
const pct = Math.min(68 + done*10,98);
|
||
$('healthPct').innerText = pct + '%';
|
||
$('healthBar').style.width = pct + '%';
|
||
}
|
||
|
||
function switchPlanView(btn,id){
|
||
btn.parentElement.querySelectorAll('button').forEach(b=>b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.querySelectorAll('.plan-mode').forEach(x=>x.classList.remove('active'));
|
||
$('plan-' + id).classList.add('active');
|
||
}
|
||
|
||
function addTimeline(text, icon='✍️'){
|
||
const el = document.createElement('div');
|
||
el.className = 'health-event';
|
||
el.innerHTML = `<div class="event-dot">${icon}</div><div><b>${text}</b><p>刚刚｜来自快速记录</p></div>`;
|
||
const list = $('healthTimeline');
|
||
if(list) list.prepend(el);
|
||
}
|
||
|
||
function openSheet(type){
|
||
$('sheet').innerHTML = sheet(type);
|
||
$('overlay').classList.add('show');
|
||
}
|
||
function closeSheet(e){
|
||
if(e && e.target !== $('overlay')) return;
|
||
$('overlay').classList.remove('show');
|
||
}
|
||
|
||
function optionSelect(btn){
|
||
btn.parentElement.querySelectorAll('.option').forEach(x=>x.classList.remove('selected'));
|
||
btn.classList.add('selected');
|
||
}
|
||
|
||
function sendAI(text){
|
||
const chat = $('aiChat');
|
||
chat.innerHTML += `<div class="msg user">${text}</div>`;
|
||
chat.innerHTML += `<div class="msg ai">我会先判断风险等级，再建议你记录关键观察项。若出现频繁呕吐、便血、精神明显变差或持续超过 24 小时，建议尽快就医。</div>`;
|
||
chat.scrollTop = chat.scrollHeight;
|
||
}
|
||
|
||
function sheet(type){
|
||
const name = state.petName;
|
||
const emoji = state.petEmoji;
|
||
const tpl = {
|
||
weight: `
|
||
<div class="sheetbar"></div><h3>记录体重</h3>
|
||
<p>趋势比单次数值更重要。幼年期建议每周记录 1-2 次。</p>
|
||
<div class="field"><label>${name} 当前体重</label><input id="wInput" value="${state.petWeight.replace('kg','')}"/></div>
|
||
<div class="field"><label>备注</label><textarea placeholder="例如：最近食欲不错，活动量正常"></textarea></div>
|
||
<button class="btn btn-primary btn-block" onclick="state.petWeight=document.getElementById('wInput').value+'kg';updatePetUI();addTimeline('体重 '+state.petWeight,'⚖️');closeSheet()">保存记录</button>
|
||
`,
|
||
poop: `
|
||
<div class="sheetbar"></div><h3>记录便便</h3>
|
||
<p>用结构化选项帮助用户快速完成记录。</p>
|
||
<div class="field"><label>状态</label><div class="seg"><button class="selected" onclick="selectSeg(this)">正常</button><button onclick="selectSeg(this)">软便</button><button onclick="selectSeg(this)">拉稀</button></div></div>
|
||
<div class="field"><label>颜色/备注</label><textarea placeholder="颜色、次数、是否带血、是否有异味等"></textarea></div>
|
||
<button class="btn btn-primary btn-block" onclick="addTimeline('排便记录：正常','💩');closeSheet()">保存记录</button>
|
||
`,
|
||
food: `
|
||
<div class="sheetbar"></div><h3>记录饮食</h3>
|
||
<div class="field"><label>今天吃了什么？</label><input placeholder="例如：幼猫粮 45g"/></div>
|
||
<div class="field"><label>食欲</label><div class="seg"><button class="selected" onclick="selectSeg(this)">正常</button><button onclick="selectSeg(this)">偏少</button><button onclick="selectSeg(this)">不吃</button></div></div>
|
||
<button class="btn btn-primary btn-block" onclick="addTimeline('饮食记录：食欲正常','🍽️');closeSheet()">保存记录</button>
|
||
`,
|
||
symptom: `
|
||
<div class="sheetbar"></div><h3>异常观察</h3>
|
||
<p>这里不要直接做“诊断”，应做风险提示和就医前信息整理。</p>
|
||
<div class="field"><label>发生了什么？</label><div class="mini-options">
|
||
<button class="option selected" onclick="optionSelect(this)">呕吐</button><button class="option" onclick="optionSelect(this)">拉稀</button><button class="option" onclick="optionSelect(this)">精神差</button><button class="option" onclick="optionSelect(this)">皮肤红</button>
|
||
</div></div>
|
||
<div class="field"><label>持续多久？</label><div class="seg"><button class="selected" onclick="selectSeg(this)">刚刚</button><button onclick="selectSeg(this)">半天</button><button onclick="selectSeg(this)">1天以上</button></div></div>
|
||
<div class="field"><label>精神状态</label><div class="seg"><button class="selected" onclick="selectSeg(this)">正常</button><button onclick="selectSeg(this)">一般</button><button onclick="selectSeg(this)">明显变差</button></div></div>
|
||
<button class="btn btn-primary btn-block" onclick="openSheet('risk')">生成观察建议</button>
|
||
`,
|
||
risk: `
|
||
<div class="sheetbar"></div><h3>AI 观察建议</h3>
|
||
<div class="risk-box">⚠️ 风险等级：中</div>
|
||
<p><b>可能原因：</b>可能与换粮、应激或消化不适有关。不要把这里写成诊断结论。</p>
|
||
<p><b>建议：</b>继续观察精神、食欲和排便；暂停新食物；记录呕吐或腹泻次数。</p>
|
||
<p><b>建议就医：</b>如果持续超过 24 小时，或伴随便血、精神明显变差、频繁呕吐，建议尽快就医。</p>
|
||
<div class="sheet-actions"><button class="btn btn-ghost" onclick="addTimeline('异常观察：风险中','🤒');closeSheet()">保存记录</button><button class="btn btn-primary" onclick="openSheet('vetSummary')">就医摘要</button></div>
|
||
`,
|
||
vetSummary: `
|
||
<div class="sheetbar"></div><h3>就医前摘要</h3>
|
||
<p>宠物：${name}<br/>阶段：${state.petStage}<br/>当前体重：${state.petWeight}<br/>近期重点：疫苗期、换粮观察、排便记录<br/>建议携带：排便/呕吐照片、饮食变化、疫苗驱虫记录。</p>
|
||
<button class="btn btn-primary btn-block" onclick="addTimeline('生成就医前摘要','📄');closeSheet()">保存摘要</button>
|
||
`,
|
||
medicine: `
|
||
<div class="sheetbar"></div><h3>记录用药</h3>
|
||
<div class="field"><label>药品名称</label><input placeholder="例如：体内驱虫药"/></div>
|
||
<div class="field"><label>剂量/备注</label><input placeholder="例如：按 2.8kg 剂量"/></div>
|
||
<button class="btn btn-primary btn-block" onclick="addTimeline('用药记录','💊');closeSheet()">保存记录</button>
|
||
`,
|
||
cost: `
|
||
<div class="sheetbar"></div><h3>记一笔消费</h3>
|
||
<div class="field"><label>金额</label><input placeholder="例如：168"/></div>
|
||
<div class="field"><label>类别</label><div class="seg"><button class="selected" onclick="selectSeg(this)">食品</button><button onclick="selectSeg(this)">医疗</button><button onclick="selectSeg(this)">用品</button></div></div>
|
||
<div class="field"><label>备注</label><input placeholder="例如：幼猫粮"/></div>
|
||
<button class="btn btn-primary btn-block" onclick="addTimeline('消费记录：¥168','💰');closeSheet()">保存记录</button>
|
||
`,
|
||
vaccine: `
|
||
<div class="sheetbar"></div><h3>疫苗提醒</h3>
|
||
<p>${name} 的第 2 针疫苗距离计划时间还有 5 天。建议提前确认预约时间，避免洗澡和长途出行。</p>
|
||
<div class="field"><label>提醒日期</label><input type="date" value="2026-07-21"/></div>
|
||
<button class="btn btn-primary btn-block" onclick="addTimeline('疫苗提醒：7月21日','💉');closeSheet()">保存提醒</button>
|
||
`,
|
||
deworm: `
|
||
<div class="sheetbar"></div><h3>驱虫提醒</h3>
|
||
<p>真实产品中可以让用户选择药品、周期和体重范围。</p>
|
||
<div class="field"><label>下次驱虫日期</label><input type="date" value="2026-07-15"/></div>
|
||
<button class="btn btn-primary btn-block" onclick="addTimeline('驱虫提醒：7月15日','🛡️');closeSheet()">保存提醒</button>
|
||
`,
|
||
photo: `
|
||
<div class="sheetbar"></div><h3>成长照片</h3>
|
||
<p>真实小程序可调用微信图片上传，用于成长报告和宠物档案卡。</p>
|
||
<div class="poster" style="margin-bottom:14px"><div class="poster-avatar">${emoji}</div><b>${name} 的成长照片</b><p class="muted" style="font-size:12px;margin-top:6px">模拟上传预览</p></div>
|
||
<button class="btn btn-primary btn-block" onclick="addTimeline('上传成长照片','📷');closeSheet()">模拟上传</button>
|
||
`,
|
||
reminders: `
|
||
<div class="sheetbar"></div><h3>提醒中心</h3>
|
||
<div class="record-row"><b>第 2 针疫苗</b><span>7月21日</span></div>
|
||
<div class="record-row"><b>体内外驱虫</b><span>7月15日</span></div>
|
||
<div class="record-row"><b>体重记录</b><span>每周二、周五</span></div>
|
||
<div class="record-row"><b>月度报告</b><span>每月 1 日</span></div>
|
||
<button class="btn btn-primary btn-block" style="margin-top:12px" onclick="closeSheet()">完成</button>
|
||
`,
|
||
taskDetail: `
|
||
<div class="sheetbar"></div><h3>任务：观察排便状态</h3>
|
||
<p><b>为什么要做？</b><br/>幼猫换粮、应激、寄生虫都可能影响排便，连续记录更有价值。</p>
|
||
<p><b>怎么做？</b><br/>观察颜色、形态、次数，必要时拍照保存。</p>
|
||
<p><b>需要就医的情况：</b><br/>连续拉稀超过 24 小时，或伴随精神差、呕吐、便血。</p>
|
||
<div class="sheet-actions"><button class="btn btn-ghost" onclick="closeSheet()">我知道了</button><button class="btn btn-primary" onclick="openSheet('poop')">记录一次</button></div>
|
||
`,
|
||
ai: `
|
||
<div class="sheetbar"></div><h3>问问 AI</h3>
|
||
<div class="plan-chat" id="aiChat" style="max-height:330px;overflow:auto">
|
||
<div class="msg ai">我是 ${name} 的养宠助手。我会优先基于档案、计划和历史记录回答，而不是泛泛聊天。</div>
|
||
</div>
|
||
<div class="mini-options">
|
||
<button class="option" onclick="sendAI('猫咪今天吐了一次怎么办？')">猫咪吐了一次</button>
|
||
<button class="option" onclick="sendAI('幼猫多久驱虫一次？')">多久驱虫</button>
|
||
<button class="option" onclick="sendAI('换粮后软便怎么办？')">换粮软便</button>
|
||
</div>
|
||
<div style="display:flex;gap:8px"><input id="aiInput" placeholder="描述一下问题..." onkeydown="if(event.key==='Enter'){sendAI(this.value);this.value=''}"/><button class="btn btn-primary" style="height:44px" onclick="sendAI(document.getElementById('aiInput').value);document.getElementById('aiInput').value=''">发</button></div>
|
||
`,
|
||
poster: `
|
||
<div class="sheetbar"></div>
|
||
<div class="poster">
|
||
<h3>${name} 的 7 月成长报告</h3>
|
||
<div class="poster-avatar">${emoji}</div>
|
||
<p class="muted">4个月｜${state.petWeight}｜${state.petStage}</p>
|
||
<div class="poster-list">
|
||
✓ 完成任务 6 项<br/>
|
||
✓ 体重记录 4 次<br/>
|
||
✓ 疫苗记录 1 次<br/>
|
||
✓ 高风险异常 0 次
|
||
</div>
|
||
<b>健康状态：稳定成长</b>
|
||
<p class="muted" style="font-size:12px;margin-top:10px">生成自：肉垫计划</p>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" style="margin-top:14px" onclick="closeSheet()">保存 / 分享卡片</button>
|
||
`,
|
||
reportDetail: `
|
||
<div class="sheetbar"></div><h3>本周成长报告</h3>
|
||
<p>${name} 本周完成 6 项任务，体重从 2.6kg 增长到 ${state.petWeight}。没有高风险异常记录，排便和食欲整体稳定。</p>
|
||
<p><b>下周重点：</b>第 2 针疫苗提醒、继续观察体重趋势、避免频繁更换食物。</p>
|
||
<button class="btn btn-primary btn-block" onclick="openSheet('poster')">生成分享卡片</button>
|
||
`,
|
||
applyPlan: `
|
||
<div class="sheetbar"></div><h3>已生成 7 天换粮观察计划</h3>
|
||
<p>计划包含：每日饮食记录、排便观察、精神状态、异常风险提示和第 7 天复盘报告。</p>
|
||
<div class="record-row"><b>Day 1-2</b><span>观察食欲和便便</span></div>
|
||
<div class="record-row"><b>Day 3-5</b><span>记录换粮比例</span></div>
|
||
<div class="record-row"><b>Day 6-7</b><span>生成复盘建议</span></div>
|
||
<button class="btn btn-primary btn-block" style="margin-top:12px" onclick="closeSheet()">加入我的计划</button>
|
||
`,
|
||
editExtract: `
|
||
<div class="sheetbar"></div><h3>修改提取信息</h3>
|
||
<div class="field"><label>当前阶段</label><input value="${state.petStage}"/></div>
|
||
<div class="field"><label>近期风险</label><input value="换粮软便"/></div>
|
||
<div class="field"><label>重点提醒</label><input value="第二针疫苗"/></div>
|
||
<button class="btn btn-primary btn-block" onclick="closeSheet()">确认修改</button>
|
||
`,
|
||
pro: `
|
||
<div class="sheetbar"></div><h3>肉垫计划 Pro</h3>
|
||
<p>建议早期主推年费，价格可以低，重点验证付费意愿。</p>
|
||
<div class="check-list">
|
||
<div class="check selected"><span class="box">✓</span>365 天养宠计划</div>
|
||
<div class="check selected"><span class="box">✓</span>多宠物管理</div>
|
||
<div class="check selected"><span class="box">✓</span>月度成长报告</div>
|
||
<div class="check selected"><span class="box">✓</span>PDF 健康档案</div>
|
||
<div class="check selected"><span class="box">✓</span>年度养宠账单</div>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="closeSheet()">¥29.9 / 年 开通 Pro</button>
|
||
`,
|
||
addPet: `
|
||
<div class="sheetbar"></div><h3>添加另一只宠物</h3>
|
||
<p>多宠物管理可以作为 Pro 权益，但早期也可以允许添加 2 只做增长。</p>
|
||
<div class="field"><label>宠物名字</label><input placeholder="例如：布丁"/></div>
|
||
<div class="field"><label>类型</label><div class="seg"><button class="selected" onclick="selectSeg(this)">猫猫</button><button onclick="selectSeg(this)">狗狗</button></div></div>
|
||
<button class="btn btn-primary btn-block" onclick="closeSheet()">添加宠物</button>
|
||
`,
|
||
|
||
createPost: `
|
||
<div class="sheetbar"></div><h3>发布图文</h3>
|
||
<p>发帖可以绑定宠物身份，这样社区内容能反哺宠物档案和成长记录。</p>
|
||
<div class="field"><label>发布身份</label><div class="seg"><button class="selected" onclick="selectSeg(this)">${name}</button><button onclick="selectSeg(this)">匿名宠友</button><button onclick="selectSeg(this)">官方笔记</button></div></div>
|
||
<div class="field"><label>内容</label><textarea placeholder="分享养宠日常、求助问题、经验笔记..."></textarea></div>
|
||
<div class="mini-options">
|
||
<button class="option selected" onclick="optionSelect(this)">晒宠</button>
|
||
<button class="option" onclick="optionSelect(this)">求助</button>
|
||
<button class="option" onclick="optionSelect(this)">经验</button>
|
||
<button class="option" onclick="optionSelect(this)">避坑</button>
|
||
</div>
|
||
<button class="btn btn-primary btn-block" onclick="closeSheet()">发布到宠友圈</button>
|
||
`,
|
||
comments: `
|
||
<div class="sheetbar"></div><h3>评论</h3>
|
||
<div class="record-row"><b>豆包妈妈</b><span>先观察精神和食欲</span></div>
|
||
<div class="record-row"><b>馒头爸爸</b><span>我家换粮也软便过两天</span></div>
|
||
<div class="record-row"><b>肉垫计划官方</b><span>可以记录持续时间，必要时生成就医摘要</span></div>
|
||
<div style="display:flex;gap:8px;margin-top:12px"><input placeholder="友善交流，分享经验..."/><button class="btn btn-primary" style="height:44px">发</button></div>
|
||
`,
|
||
sharePost: `
|
||
<div class="sheetbar"></div><h3>分享帖子</h3>
|
||
<p>可以转发给微信好友、微信群，或生成一张求助卡片。宠物社区的传播点应该是“问题”和“宠物”，不是产品本身。</p>
|
||
<button class="btn btn-primary btn-block" onclick="closeSheet()">生成分享卡片</button>
|
||
`,
|
||
article1: `
|
||
<div class="sheetbar"></div><h3>幼猫疫苗和驱虫怎么安排？</h3>
|
||
<p>内容页不要只做百科，底部要引导“生成我的提醒”。这样内容流量才能转成产品用户。</p>
|
||
<div class="record-row"><b>适合人群</b><span>新手养猫</span></div>
|
||
<div class="record-row"><b>转化入口</b><span>疫苗/驱虫提醒</span></div>
|
||
<button class="btn btn-primary btn-block" style="margin-top:12px" onclick="openSheet('vaccine')">生成我的疫苗提醒</button>
|
||
`,
|
||
article2: `
|
||
<div class="sheetbar"></div><h3>猫咪软便要不要去医院？</h3>
|
||
<p>这类内容适合承接搜索和微信群分享，结尾进入异常记录和 AI 观察建议。</p>
|
||
<button class="btn btn-primary btn-block" onclick="openSheet('symptom')">记录异常并生成建议</button>
|
||
`,
|
||
article3: `
|
||
<div class="sheetbar"></div><h3>7 天换粮计划</h3>
|
||
<p>这是非常适合做一次性付费模板的内容，也能增强计划页价值。</p>
|
||
<button class="btn btn-primary btn-block" onclick="openSheet('applyPlan')">生成换粮计划</button>
|
||
`,
|
||
article4: `
|
||
<div class="sheetbar"></div><h3>一个月养猫大概花多少钱？</h3>
|
||
<p>这类内容可以自然引导用户使用养宠账本，并在年底生成年度账单。</p>
|
||
<button class="btn btn-primary btn-block" onclick="openSheet('cost')">开始记账</button>
|
||
`
|
||
};
|
||
return tpl[type] || tpl.taskDetail;
|
||
}
|
||
|
||
updatePetUI();
|
||
$('tabbar').style.display = 'none';
|
||
</script>
|
||
</body>
|
||
</html> |