feat: rebuild pet app and backend around core care flows
This commit is contained in:
+165
-94
@@ -1,102 +1,173 @@
|
||||
|
||||
/* 门面卡 */
|
||||
.hero-card{
|
||||
background:
|
||||
radial-gradient(circle at 95% 16%, rgba(245,169,71,.22), transparent 32%),
|
||||
linear-gradient(135deg,#FFFFFF,#FFF6E9);
|
||||
.top {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
/* 一周日期条 */
|
||||
|
||||
|
||||
/* ===== 日期带（原计划页「日历」tab 并过来） ===== */
|
||||
/* 某天的安排 */
|
||||
.dd-title{font-weight:var(--fw-b);font-size:var(--fs-md);margin-bottom:var(--sp-3)}
|
||||
|
||||
/* ===== 接下来 ===== */
|
||||
|
||||
/* ===== 门面：宠物名片 ===== */
|
||||
.hero-card{padding:var(--sp-5)}
|
||||
.hero-row{display:flex;align-items:center;gap:var(--sp-4)}
|
||||
.hero-av{
|
||||
position:relative;flex:none;width:128rpx;height:128rpx;border-radius:50%;
|
||||
background:var(--primary-soft);display:flex;align-items:center;justify-content:center;
|
||||
font-size:60rpx;overflow:visible;
|
||||
.avatar {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid white;
|
||||
box-shadow: 0 5rpx 22rpx #174b3520;
|
||||
}
|
||||
.hero-av-img{width:100%;height:100%;border-radius:50%}
|
||||
/* 性别徽章叠在头像右下：一个很省事但很出效果的细节 */
|
||||
.hero-sex{
|
||||
position:absolute;right:-4rpx;bottom:-4rpx;width:42rpx;height:42rpx;border-radius:50%;
|
||||
border:4rpx solid #fff;color:#fff;font-size:22rpx;line-height:1;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
.hero {
|
||||
height: 330rpx;
|
||||
background: #194f42;
|
||||
border-radius: 38rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 35rpx;
|
||||
color: white;
|
||||
}
|
||||
.hero-sex.male{background:#5B9BE8}
|
||||
.hero-sex.female{background:#EE85A8}
|
||||
.hero-main{flex:1;min-width:0}
|
||||
.hero-title{font-size:var(--fs-xl);font-weight:var(--fw-b);color:var(--text)}
|
||||
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--muted);margin-top:6rpx}
|
||||
.hero-arrow{flex:none;color:var(--muted2);display:flex;align-items:center}
|
||||
.hero-days{
|
||||
margin-top:var(--sp-4);background:var(--primary-soft);color:var(--primary-ink);
|
||||
border-radius:var(--r-md);text-align:center;padding:var(--sp-3);
|
||||
font-size:var(--fs-md);font-weight:var(--fw-b);
|
||||
.hero-copy {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 62%;
|
||||
}
|
||||
.hd-n{font-size:var(--fs-lg);margin:0 4rpx}
|
||||
|
||||
/* ===== 两个入口 ===== */
|
||||
.entry-card{display:flex;padding:var(--sp-4) var(--sp-3)}
|
||||
.entry{flex:1;display:flex;flex-direction:column;align-items:center;gap:4rpx}
|
||||
.entry-ic{
|
||||
width:76rpx;height:76rpx;border-radius:var(--r-md);
|
||||
display:flex;align-items:center;justify-content:center;margin-bottom:2rpx;
|
||||
.hero-small {
|
||||
color: #abd9b8;
|
||||
font-size: 23rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.entry-b{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)}
|
||||
.entry-p{font-size:var(--fs-cap);color:var(--muted)}
|
||||
|
||||
/* ===== 记录时间轴 ===== */
|
||||
.tl-head{display:flex;align-items:center;justify-content:space-between;margin:var(--sp-5) 0 var(--sp-3)}
|
||||
.tl-item{display:flex;gap:var(--sp-3)}
|
||||
.tl-rail{flex:none;width:56rpx;display:flex;flex-direction:column;align-items:center}
|
||||
.tl-dot{
|
||||
width:56rpx;height:56rpx;border-radius:50%;flex:none;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
.hero-title {
|
||||
font-size: 43rpx;
|
||||
font-weight: 800;
|
||||
margin: 16rpx 0;
|
||||
}
|
||||
/* 竖线连起来才像一条时间轴；最后一条的线会被 body 的高度自然截断 */
|
||||
.tl-line{flex:1;width:2rpx;background:var(--line);margin:6rpx 0}
|
||||
.tl-item:last-of-type .tl-line{display:none}
|
||||
.tl-body{flex:1;min-width:0;padding-bottom:var(--sp-4)}
|
||||
.tl-when{font-size:var(--fs-cap);color:var(--muted);margin-bottom:6rpx}
|
||||
.tl-card{background:#fff;border-radius:var(--r-md);box-shadow:var(--sd-1);padding:var(--sp-4)}
|
||||
.tl-title{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)}
|
||||
.tl-desc{font-size:var(--fs-sm);color:var(--text-2);margin-top:6rpx;line-height:1.5}
|
||||
.tl-img{width:100%;height:320rpx;border-radius:var(--r-sm);margin-top:var(--sp-3);display:block}
|
||||
.tl-more{text-align:center;padding:var(--sp-4);font-size:var(--fs-sm);color:var(--muted)}
|
||||
|
||||
.entry-ic{position:relative}
|
||||
.entry-dot{
|
||||
position:absolute;top:-2rpx;right:-2rpx;width:18rpx;height:18rpx;
|
||||
border-radius:50%;background:var(--red);border:3rpx solid #fff;
|
||||
.hero-meta {
|
||||
font-size: 23rpx;
|
||||
color: #d9eadd;
|
||||
}
|
||||
.entry-p.warn{color:var(--red-ink);font-weight:var(--fw-b)}
|
||||
|
||||
/* 阶段漂移提示。用主色不用红色：这是「可以做一下」不是「出问题了」 */
|
||||
.drift-card{border:2rpx solid var(--primary-line);background:var(--primary-soft)}
|
||||
.drift-top{display:flex;align-items:flex-start;gap:var(--sp-2);color:var(--primary-dark)}
|
||||
.drift-b{flex:1;min-width:0;font-size:var(--fs-md);font-weight:var(--fw-b);line-height:1.5}
|
||||
.drift-p{font-size:var(--fs-sm);color:var(--primary-ink);line-height:1.6;margin-top:var(--sp-2)}
|
||||
.drift-focus{font-size:var(--fs-sm);color:var(--primary-ink);line-height:1.6;margin-top:6rpx}
|
||||
.drift-size{font-size:var(--fs-cap);color:var(--primary-dark);opacity:.8;margin-top:6rpx}
|
||||
.drift-cta{margin-top:var(--sp-4)}
|
||||
|
||||
/* 没填到家日期时的天数空态：压成灰、可点去补 */
|
||||
.hero-days-empty{background:var(--surface-2);color:var(--muted)}
|
||||
.hero-days-empty .hd-n{color:var(--muted)}
|
||||
|
||||
/* 门面卡右上角的身份卡入口。原来那里是个 next 箭头（点整卡进编辑），
|
||||
身份卡做成小胶囊，和整卡点击分开 */
|
||||
.hero-idcard{
|
||||
flex:none;align-self:flex-start;display:flex;align-items:center;gap:4rpx;
|
||||
padding:8rpx var(--sp-3);border-radius:var(--r-full);
|
||||
background:var(--primary-soft);color:var(--primary-dark);
|
||||
font-size:var(--fs-cap);font-weight:var(--fw-b);
|
||||
.hero-caption {
|
||||
font-size: 20rpx;
|
||||
color: #b5e2be;
|
||||
margin-top: 36rpx;
|
||||
}
|
||||
.hero image {
|
||||
position: absolute;
|
||||
width: 310rpx;
|
||||
height: 290rpx;
|
||||
right: -24rpx;
|
||||
bottom: 8rpx;
|
||||
}
|
||||
.heading {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.link {
|
||||
font-size: 24rpx;
|
||||
color: #398668;
|
||||
font-weight: 700;
|
||||
}
|
||||
.walk-card {
|
||||
padding: 26rpx;
|
||||
}
|
||||
.walk-intro {
|
||||
display: flex;
|
||||
gap: 22rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.dog-emoji {
|
||||
width: 145rpx;
|
||||
height: 145rpx;
|
||||
border-radius: 26rpx;
|
||||
background: #dfeedd;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 72rpx;
|
||||
}
|
||||
.walk-title {
|
||||
font-size: 31rpx;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.walk-intro .muted {
|
||||
font-size: 23rpx;
|
||||
}
|
||||
.picker-label {
|
||||
font-size: 23rpx;
|
||||
color: #7d9989;
|
||||
margin: 27rpx 0 16rpx;
|
||||
}
|
||||
.start {
|
||||
margin: 24rpx 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 14rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.stats > view {
|
||||
flex: 1;
|
||||
background: white;
|
||||
border-radius: 28rpx;
|
||||
padding: 25rpx 18rpx;
|
||||
}
|
||||
.stats > view:nth-child(2) {
|
||||
background: #f7eadc;
|
||||
}
|
||||
.stats > view:nth-child(3) {
|
||||
background: #e8efea;
|
||||
}
|
||||
.stats text {
|
||||
display: block;
|
||||
color: #8da49a;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
.stats strong {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.stats small {
|
||||
font-size: 22rpx;
|
||||
color: #94a69d;
|
||||
}
|
||||
.tasks {
|
||||
padding: 12rpx 25rpx;
|
||||
}
|
||||
.task {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 17rpx;
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1rpx solid #edf1ed;
|
||||
}
|
||||
.task:last-child {
|
||||
border: 0;
|
||||
}
|
||||
.check {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 3rpx solid #cfdfd2;
|
||||
border-radius: 13rpx;
|
||||
text-align: center;
|
||||
line-height: 37rpx;
|
||||
color: white;
|
||||
}
|
||||
.check.done {
|
||||
background: #3b9164;
|
||||
border-color: #3b9164;
|
||||
}
|
||||
.task-icon {
|
||||
width: 65rpx;
|
||||
height: 65rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #f0f5ee;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.task-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
}
|
||||
.task-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
.task-main .muted {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user