/* 门面卡 */ .hero-card{ background: radial-gradient(circle at 95% 16%, rgba(245,169,71,.22), transparent 32%), linear-gradient(135deg,#FFFFFF,#FFF6E9); } /* 一周日期条 */ /* ===== 日期带(原计划页「日历」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; } .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-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); } .hd-n{font-size:var(--fs-lg);margin:0 4rpx} /* ===== 两个入口 ===== */ .entry-card{display:flex;padding:var(--sp-5) var(--sp-3)} .entry{flex:1;display:flex;flex-direction:column;align-items:center;gap:6rpx} .entry-ic{ width:96rpx;height:96rpx;border-radius:var(--r-md); display:flex;align-items:center;justify-content:center;margin-bottom:4rpx; } .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; } /* 竖线连起来才像一条时间轴;最后一条的线会被 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)}