From 93fc9bc5dad58f6c4b522513ed138921402c0823 Mon Sep 17 00:00:00 2001
From: Blizzard <blizzardzhang@icloud.com>
Date: Fri, 31 Jul 2026 16:16:38 +0800
Subject: [PATCH] =?UTF-8?q?style(fe):=20=E6=88=90=E9=95=BF=E6=8A=A5?=
 =?UTF-8?q?=E5=91=8A=E6=B5=B7=E6=8A=A5=E9=A2=84=E8=A7=88=E5=8D=A1=E6=8E=92?=
 =?UTF-8?q?=E7=89=88=E6=89=93=E7=A3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 头像改圆形 + 白边（和保存的图一致）
- 周期做成小胶囊；数据清单每行「绿勾 + 项目 + 数值右对齐」，更整齐
- 健康状态做成绿色徽章；生成自弱化

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 pets-fe/app.wxss                              | 37 ++++++++++++++++---
 .../components/bottom-sheet/bottom-sheet.wxml | 16 ++++----
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/pets-fe/app.wxss b/pets-fe/app.wxss
index a628551..5a04c51 100644
--- a/pets-fe/app.wxss
+++ b/pets-fe/app.wxss
@@ -339,16 +339,43 @@ textarea{display:block;padding:var(--sp-4);line-height:1.6}
     linear-gradient(160deg,#FFF7E8,#FFFFFF);
   border:1rpx solid #F2DFC3;border-radius:var(--r-lg);padding:var(--sp-5);text-align:center;overflow:hidden;position:relative;
 }
+/* 圆头像 + 白边，和保存的图一致 */
 .poster-avatar{
-  width:152rpx;height:152rpx;margin:var(--sp-3) auto var(--sp-3);border-radius:var(--r-lg);
+  width:160rpx;height:160rpx;margin:var(--sp-4) auto var(--sp-3);border-radius:50%;
   background:linear-gradient(135deg,#FFE5B7,#FFC06B);display:flex;align-items:center;justify-content:center;
-  font-size:80rpx;box-shadow:var(--sd-1);overflow:hidden;
+  font-size:80rpx;box-shadow:var(--sd-1);overflow:hidden;border:6rpx solid #fff;
 }
 .poster-avatar-img{width:100%;height:100%;display:block}
-.poster-period{margin-top:8rpx;font-size:var(--fs-cap);color:var(--primary-ink);font-weight:var(--fw-b)}
-.poster-list{
-  background:rgba(255,255,255,.78);border-radius:var(--r-md);padding:var(--sp-4);margin:var(--sp-4) 0;text-align:left;line-height:1.8;font-size:var(--fs-md);
+.poster-meta{font-size:var(--fs-md);color:var(--muted)}
+/* 周期做成小胶囊 */
+.poster-period{
+  display:inline-block;margin-top:12rpx;padding:4rpx var(--sp-3);border-radius:var(--r-full);
+  background:var(--primary-soft);color:var(--primary-ink);
+  font-size:var(--fs-cap);font-weight:var(--fw-b);
 }
+/* 数据清单：每行 打勾 + 项目 + 数值 右对齐 */
+.poster-list{
+  background:rgba(255,255,255,.78);border-radius:var(--r-md);
+  padding:var(--sp-3) var(--sp-4);margin:var(--sp-5) 0 var(--sp-4);
+}
+.poster-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0}
+.poster-tick{
+  width:36rpx;height:36rpx;flex:none;border-radius:50%;
+  background:var(--green-soft);color:var(--green-ink);
+  display:flex;align-items:center;justify-content:center;
+}
+.poster-rt{flex:1;text-align:left;font-size:var(--fs-md);color:var(--text-2)}
+.poster-rn{font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text)}
+/* 健康状态徽章 */
+.poster-status{
+  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
+  font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);margin-top:var(--sp-2);
+}
+.poster-badge{
+  padding:4rpx var(--sp-3);border-radius:var(--r-full);
+  background:var(--green-soft);color:var(--green-ink);font-size:var(--fs-sm);
+}
+.poster-from{margin-top:var(--sp-4);font-size:var(--fs-cap);color:var(--muted2)}
 
 /* 风险盒 */
 .risk-box{
diff --git a/pets-fe/components/bottom-sheet/bottom-sheet.wxml b/pets-fe/components/bottom-sheet/bottom-sheet.wxml
index adc2d57..96e5314 100644
--- a/pets-fe/components/bottom-sheet/bottom-sheet.wxml
+++ b/pets-fe/components/bottom-sheet/bottom-sheet.wxml
@@ -159,14 +159,16 @@ module.exports.sel = function (map, key, index, def) {
           <image wx:if="{{poster.pet_avatar_url || pet.avatar_url}}" class="poster-avatar-img" src="{{poster.pet_avatar_url || pet.avatar_url}}" mode="aspectFill"></image>
           <block wx:else>{{pet.emoji}}</block>
         </view>
-        <view class="muted">{{pet.age}}｜{{pet.weight}}｜{{pet.stage}}</view>
+        <view class="poster-meta">{{pet.age}}｜{{pet.weight}}｜{{pet.stage}}</view>
         <view wx:if="{{poster.period}}" class="poster-period">近 7 天 · {{poster.period}}</view>
-        <view class="poster-list pre">✓ 完成任务 {{poster ? poster.tasks_completed : 0}} 项
-✓ 体重记录 {{poster ? poster.weight_records : 0}} 次
-✓ 疫苗记录 {{poster ? poster.vaccine_records : 0}} 次
-✓ 高风险异常 {{poster ? poster.high_risk_count : 0}} 次</view>
-        <view class="bold">健康状态：{{poster ? poster.headline : '稳定成长'}}</view>
-        <view class="muted" style="font-size:24rpx;margin-top:20rpx">生成自：肉垫计划</view>
+        <view class="poster-list">
+          <view class="poster-row"><view class="poster-tick"><pt-icon name="check" size="{{22}}"></pt-icon></view><text class="poster-rt">完成任务</text><text class="poster-rn">{{poster ? poster.tasks_completed : 0}} 项</text></view>
+          <view class="poster-row"><view class="poster-tick"><pt-icon name="check" size="{{22}}"></pt-icon></view><text class="poster-rt">体重记录</text><text class="poster-rn">{{poster ? poster.weight_records : 0}} 次</text></view>
+          <view class="poster-row"><view class="poster-tick"><pt-icon name="check" size="{{22}}"></pt-icon></view><text class="poster-rt">疫苗记录</text><text class="poster-rn">{{poster ? poster.vaccine_records : 0}} 次</text></view>
+          <view class="poster-row"><view class="poster-tick"><pt-icon name="check" size="{{22}}"></pt-icon></view><text class="poster-rt">高风险异常</text><text class="poster-rn">{{poster ? poster.high_risk_count : 0}} 次</text></view>
+        </view>
+        <view class="poster-status">健康状态<text class="poster-badge">{{poster ? poster.headline : '稳定成长'}}</text></view>
+        <view class="poster-from">生成自 · 肉垫计划</view>
       </view>
       <view class="sheet-actions" style="margin-top:28rpx">
         <button class="btn btn-ghost" open-type="share">分享给朋友</button>