零售端-我的界面修改

mallApp/src/pages/home/user.vue

@@ -4,28 +4,24 @@
 -->
 <template>
   <view class="user-page">
-    <!-- 自定义顶栏：绿色标题 + 消息/设置 -->
+    <!-- 自定义顶栏：仅标题 -->
     <view class="user-nav">
       <view class="user-nav__status" :style="{ height: navMetrics.statusBarHeight + 'px' }"></view>
       <view class="user-nav__bar" :style="{ height: navMetrics.navBarHeight + 'px' }">
         <view class="user-nav__title-wrap" :style="titleWrapStyle">
           <text class="user-nav__title">我的</text>
         </view>
-        <view class="user-nav__actions">
-          <view class="user-nav__action" @click="goChat">
-            <sprite-icon name="xiaoxi" :size="40" custom-class="nav-icon" />
-          </view>
-          <view class="user-nav__action user-nav__action--settings" @click="goSettings">
-            <sprite-icon name="shezhi" :size="36" custom-class="nav-icon" />
-          </view>
-        </view>
       </view>
     </view>
 
     <view class="user-body" :style="bodyStyle">
-      <!-- 用户信息卡片 -->
+      <!-- 用户信息卡片：背景图 mall_user_bg；消息/设置放左侧信息区，避开右侧花图 -->
       <view class="profile-card" @click="onProfileClick">
-        <view class="profile-card__bg"></view>
+        <image
+          class="profile-card__bg"
+          :src="`${constant.imgUrl}/hhb/images/mall_user_bg.png`"
+          mode="aspectFill"
+        />
         <view class="profile-card__content">
           <view class="profile-avatar">
             <image
@@ -38,6 +34,15 @@
             <text class="profile-name">{{ displayName }}</text>
             <text v-if="isLoggedIn" class="profile-id">会员ID: {{ memberId }}</text>
             <text v-else class="profile-id profile-id--hint">登录后查看会员信息</text>
+            <!-- 贴在昵称下方左侧，避开右侧花朵装饰 -->
+            <view class="profile-card__actions" @click.stop>
+              <view class="profile-card__action" @click.stop="goChat">
+                <sprite-icon name="xiaoxi" :size="36" custom-class="profile-action-icon" />
+              </view>
+              <view class="profile-card__action" @click.stop="goSettings">
+                <sprite-icon name="shezhi" :size="36" custom-class="profile-action-icon" />
+              </view>
+            </view>
           </view>
         </view>
       </view>
@@ -311,33 +316,6 @@ export default {
   color: #77c34f;
 }
 
-.user-nav__actions {
-  position: relative;
-  z-index: 2;
-  margin-left: auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-right: 24upx;
-}
-
-.user-nav__action {
-  width: 72upx;
-  height: 72upx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 8upx;
-
-  &:first-child {
-    margin-left: 0;
-  }
-}
-
-.user-nav__action--settings {
-  margin-left: 4upx;
-}
-
 .user-body {
   padding-left: 24upx;
   padding-right: 24upx;
@@ -346,19 +324,46 @@ export default {
 
 .profile-card {
   position: relative;
-  border-radius: 24upx;
+  width: 700upx;
+  height: 258upx;
+  border-radius: 20upx;
   overflow: hidden;
-  margin-bottom: 24upx;
+  margin: 0 auto 24upx;
   box-shadow: 0 8upx 24upx rgba(15, 23, 42, 0.06);
 }
 
 .profile-card__bg {
   position: absolute;
   left: 0;
-  right: 0;
   top: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 45%, #ffffff 100%);
+  width: 700upx;
+  height: 258upx;
+  display: block;
+  z-index: 0;
+}
+
+/* 消息/设置：跟在会员信息下方左侧，避开右侧花图 */
+.profile-card__actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 16upx;
+}
+
+.profile-card__action {
+  width: 56upx;
+  height: 56upx;
+  margin-right: 12upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.72);
+  box-sizing: border-box;
+
+  &:last-child {
+    margin-right: 0;
+  }
 }
 
 .profile-card__content {
@@ -367,7 +372,11 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 36upx 32upx;
+  height: 100%;
+  box-sizing: border-box;
+  /* 右侧留给花图，信息区控制在左半 */
+  padding: 28upx 32upx;
+  padding-right: 280upx;
 }
 
 .profile-avatar {

mallApp/src/utils/mainIndexSprite.js

@@ -35,11 +35,11 @@ export const SPRITE_SHEETS = {
       "hua": { x: 94, y: 118, w: 52, h: 49 },
       "dianpu-line": { x: 167, y: 114, w: 51, h: 51 },
       "tuichu": { x: 243, y: 111, w: 49, h: 51 },
-      "xiaoxi": { x: 8, y: 186, w: 43, h: 44 },
-      "qianbao": { x: 68, y: 182, w: 55, h: 48 },
-      "huoche-da": { x: 142, y: 182, w: 58, h: 48 },
-      "baoguo": { x: 219, y: 182, w: 49, h: 48 },
-      "fanghu-yuan": { x: 282, y: 182, w: 42, h: 48 },
+      "xiaoxi": { x: 8, y: 186, w: 45, h: 45 },
+      "qianbao": { x: 68, y: 182, w: 55, h: 50 },
+      "huoche-da": { x: 142, y: 182, w: 60, h: 50 },
+      "baoguo": { x: 219, y: 182, w: 50, h: 50 },
+      "fanghu-yuan": { x: 282, y: 182, w: 42, h: 50 },
       "youhuiquan-yellow": { x: 344, y: 184, w: 50, h: 50 },
       "gengduo-quan": { x: 274, y: 102, w: 52, h: 52 },
       "icon-home": { x: 274, y: 102, w: 52, h: 52 },