design: 家庭FAB悬浮按钮重新设计 - 家庭图标 + 渐变光环 + 黄金分割定位

- 位置: 从页面中部(top:50%)移至底部1/3黄金分割位(bottom:33.33%)
- 图标: 默认态显示家庭图标👨‍👩‍👧‍👦, 展开时渐变过渡为当前成员头像
- 效果: 暖橙渐变背景 + 双层光晕阴影 + 展开光环 + 呼吸脉冲动画
- 交互: 展开时弹性缩放(1.05), 头像淡入旋转过渡

cfc-frontend/components/FamilyMemberStrip.vue

@@ -1,14 +1,20 @@
 <template>
   <view class="member-strip">
-    <!-- 浮标头像 -->
+    <!-- 浮标：家庭图标（默认态）→ 当前成员头像（展开态） -->
     <view class="fab-wrap">
       <view class="fab-avatar" :class="{ active: fanOpen }" @tap="toggleFan">
-        <image class="fab-img" :src="currentMember.avatar || defaultAvatar" mode="aspectFill" />
+        <!-- 默认态：家庭图标 -->
+        <view class="fab-icon-default" v-if="!fanOpen">
+          <text class="fab-icon-emoji">👨‍👩‍👧‍👦</text>
+        </view>
+        <!-- 展开态：当前成员头像 -->
+        <image class="fab-img" :class="{ 'fab-img-show': fanOpen }" :src="currentMember.avatar || defaultAvatar" mode="aspectFill" />
+        <view class="fab-ring" :class="{ 'ring-active': fanOpen }"></view>
         <view class="fab-badge" v-if="pendingCount > 0 && isAdmin" @tap.stop="openRequests">
           <text class="badge-count">{{ pendingCount }}</text>
         </view>
       </view>
-      <view class="fab-pulse" v-if="fanOpen"></view>
+      <view class="fab-pulse" v-if="!fanOpen"></view>
     </view>
 
     <!-- 扇形展开成员 -->
@@ -358,12 +364,10 @@ export default {
 
 <style scoped>
 .member-strip {
-  /* FAB 悬浮在左侧边缘中部；禁用 transform（transform 会创建 containing block，
-     使后代 .fan-overlay (position: fixed) 退化为相对本容器定位，全屏遮罩失效） */
+  /* FAB 悬浮在左侧边缘，底部 1/3 黄金分割位；禁用 transform */
   position: fixed;
-  top: 50%;
+  bottom: 33.33%;
   left: 16rpx;
-  margin-top: -34rpx;
   z-index: 100;
 }
 
@@ -375,25 +379,70 @@ export default {
   z-index: 1001;
 }
 .fab-avatar {
-  width: 68rpx;
-  height: 68rpx;
+  width: 72rpx;
+  height: 72rpx;
   border-radius: 50%;
-  background: #FFFFFF;
-  box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.25);
-  border: 3rpx solid #F97316;
+  background: linear-gradient(135deg, #F97316, #FB923C);
+  box-shadow: 0 6rpx 24rpx rgba(249, 115, 22, 0.35), 0 0 0 4rpx rgba(249, 115, 22, 0.12);
   position: relative;
-  transition: transform 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
 }
 .fab-avatar:active {
-  transform: scale(0.92);
+  transform: scale(0.9);
 }
 .fab-avatar.active {
-  transform: rotate(180deg);
+  transform: scale(1.05);
+  box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.45), 0 0 0 6rpx rgba(249, 115, 22, 0.15);
+}
+
+/* 默认态：家庭图标 */
+.fab-icon-default {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.fab-icon-emoji {
+  font-size: 36rpx;
+  line-height: 1;
+  filter: drop-shadow(0 1rpx 2rpx rgba(0,0,0,0.1));
 }
+
+/* 展开态：当前成员头像（渐变出现） */
 .fab-img {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   border-radius: 50%;
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.fab-img-show {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* 光环 */
+.fab-ring {
+  position: absolute;
+  top: -4rpx;
+  left: -4rpx;
+  right: -4rpx;
+  bottom: -4rpx;
+  border-radius: 50%;
+  border: 3rpx solid rgba(255, 255, 255, 0.6);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.fab-ring.ring-active {
+  opacity: 1;
 }
 .fab-badge {
   position: absolute;
@@ -417,16 +466,16 @@ export default {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 68rpx;
-  height: 68rpx;
-  margin-top: -34rpx;
-  margin-left: -34rpx;
+  width: 72rpx;
+  height: 72rpx;
+  margin-top: -36rpx;
+  margin-left: -36rpx;
   border-radius: 50%;
-  border: 2rpx solid #F97316;
-  animation: fab-pulse-anim 2s ease-out infinite;
+  background: rgba(249, 115, 22, 0.25);
+  animation: fab-pulse-anim 2.5s ease-out infinite;
 }
 @keyframes fab-pulse-anim {
-  0% { transform: scale(1); opacity: 0.8; }
+  0% { transform: scale(1); opacity: 0.6; }
   100% { transform: scale(2); opacity: 0; }
 }