style(user): 美化头像修改页面样式

- 优化页面背景色为淡灰色
- 添加头像展示卡片和圆环边框
- 改进编辑图标为右下角悬浮样式
- 统一底部按钮风格

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

@@ -5,6 +5,23 @@
 
 ---
 
+## [2026-02-11] - 美化头像修改页面布局和样式
+
+### 优化
+- **UI 升级**：
+  - 将页面背景色调整为淡灰色 (`#F9FAFB`)，提升视觉舒适度
+  - 增加头像展示卡片，采用白色背景和阴影效果，增强层次感
+  - 优化头像容器样式，增加白色圆环边框
+  - 改进编辑图标样式，改为右下角悬浮的蓝色相机图标，符合常见交互习惯
+  - 统一底部按钮风格，使其更具质感且符合品牌调性
+
+**详细信息**：
+- **影响文件**: src/pages/avatar/index.vue
+- **技术栈**: Vue 3, Tailwind CSS, NutUI
+- **备注**: 提升头像修改页面的视觉体验，使其更加现代和专业
+
+---
+
 ## [2026-02-11] - 优化计划书删除用户体验
 
 ### 优化

 <!--
  * @Date: 2026-01-29 22:25:57
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2026-01-29 22:54:41
+ * @LastEditTime: 2026-02-11 14:06:51
  * @FilePath: /manulife-weapp/src/pages/avatar/index.vue
  * @Description: 修改头像页面
 -->
 <template>
-  <view class="min-h-screen bg-white flex flex-col">
+  <view class="min-h-screen bg-[#F9FAFB] flex flex-col">
     <!-- NavHeader -->
     <NavHeader title="修改头像" />
+
     <!-- Main Content -->
-    <view class="flex-1 flex flex-col items-center pt-[120rpx]">
-      <view class="relative mb-[60rpx]" @tap="onChangeAvatar">
-        <nut-avatar size="large" class="!w-[240rpx] !h-[240rpx] shadow-lg border-4 border-gray-100">
-          <img :src="avatarUrl" style="object-fit: cover; width: 100%; height: 100%;" />
+    <view class="flex-1 flex flex-col items-center pt-[60rpx]">
+      <!-- Avatar Card -->
+      <view
+        class="bg-white rounded-[32rpx] p-[60rpx] flex flex-col items-center shadow-sm mx-[40rpx] w-[calc(100%-80rpx)]">
+        <view class="relative mb-[40rpx] group" @tap="onChangeAvatar">
+          <!-- Avatar Container with Ring -->
+          <view
+            class="w-[240rpx] h-[240rpx] rounded-full p-[6rpx] bg-white shadow-lg border border-gray-100 flex items-center justify-center relative z-10">
+            <nut-avatar size="large" class="!w-full !h-full !rounded-full overflow-hidden !bg-gray-50">
+              <img :src="avatarUrl" class="w-full h-full object-cover" />
             </nut-avatar>
-        <view class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-[96rpx] h-[96rpx] bg-black/30 rounded-full">
-          <IconFont name="photograph" color="#fff" size="24" />
+          </view>
+
+          <!-- Edit Badge (Bottom Right) -->
+          <view
+            class="absolute bottom-[6rpx] right-[6rpx] w-[72rpx] h-[72rpx] bg-[#007AFF] text-white rounded-full flex items-center justify-center shadow-md border-[4rpx] border-white z-20 active:scale-95 transition-transform">
+            <IconFont name="photograph" color="#fff" size="20" />
           </view>
         </view>
 
-      <text class="text-gray-500 text-[32rpx] mb-[12rpx]">点击更换头像</text>
+        <text class="text-gray-900 text-[34rpx] font-medium mb-[12rpx]">更换头像</text>
+        <text class="text-gray-400 text-[26rpx]">点击上方图标选择新图片</text>
+      </view>
     </view>
 
     <!-- Footer Buttons -->
-    <view class="px-[40rpx] pb-[80rpx] w-full">
+    <view class="px-[40rpx] pb-[calc(40rpx+env(safe-area-inset-bottom))] w-full mb-[20rpx]">
       <view class="flex gap-[32rpx]">
-        <nut-button plain type="primary" block class="flex-1 !rounded-[48rpx]" @click="onCancel">取消</nut-button>
-        <nut-button type="primary" block class="flex-1 !rounded-[48rpx]" @click="onSave">保存</nut-button>
+        <nut-button plain type="default" block
+          class="flex-1 !rounded-[48rpx] !h-[96rpx] !border-gray-200 !text-gray-600 !bg-white !text-[30rpx]"
+          @click="onCancel">
+          取消
+        </nut-button>
+        <nut-button type="primary" block
+          class="flex-1 !rounded-[48rpx] !h-[96rpx] !bg-[#007AFF] !border-[#007AFF] shadow-lg shadow-blue-100 !text-[30rpx]"
+          @click="onSave">
+          保存
+        </nut-button>
       </view>
     </view>
   </view>