From 0170c92f9ae96df956b354fb9388b38fe2186d13 Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Thu, 22 Oct 2026 16:41:24 +0800
Subject: [PATCH] =?UTF-8?q?style(user):=20=E4=BC=98=E5=8C=96=E4=B8=AA?=
 =?UTF-8?q?=E4=BA=BA=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E4=B8=8E=E8=A7=86=E8=A7=89=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 顶部沉浸式头部与微信胶囊安全距离适配
- 核心资产栏沉浸式融入主色调，规范金融数字展示
- 订单模块优化图标视觉层级与按压交互
- 服务工具重构为资产与常用、更多服务双卡片分组
---
 pages/tabbar/user/my.vue         | 844 ++++++++++++++++++-------------
 pages/tabbar/user/utils/tool.vue | 350 ++++++-------
 2 files changed, 664 insertions(+), 530 deletions(-)

diff --git a/pages/tabbar/user/my.vue b/pages/tabbar/user/my.vue
index ff8219b..88fd138 100644
--- a/pages/tabbar/user/my.vue
+++ b/pages/tabbar/user/my.vue
@@ -1,355 +1,489 @@
-<template>
-  <view class="user" :style="themeStyle">
-    <!-- 个人信息 -->
-    <view class="status_bar">
-      <!-- 这里是状态栏 -->
-    </view>
-    <view class="header" @click="userDetail">
-      <view class="head-1">
-        <image class="head-avatar" :src="userInfo.face || userImage"></image>
-      </view>
-      <view class="head-2" v-if="userInfo.id">
-        <view class="user-name">{{ userInfo.nickName }}</view>
-      </view>
-      <view class="head-2" v-else>
-        <view class="user-name">登录/注册</view>
-      </view>
-      <u-icon class="header-arrow" name="arrow-right"></u-icon>
-    </view>
-    <!-- 积分，优惠券，关注， -->
-    <div class="pointBox box">
-      <view class="point">
-        <view class="point-item" @click="navigateTo('/pages/mine/deposit/operation')">
-          <view class="point-label">预存款</view>
-          <view class="point-value money">{{ unitPrice(walletNum) }}</view>
-        </view>
-        <view class="point-item" @click="navigateTo('/pages/cart/coupon/myCoupon')">
-          <view class="point-label">优惠券</view>
-          <view class="point-value">{{ couponNum || 0 }}</view>
-        </view>
-        <view class="point-item" @click="navigateTo('/pages/mine/myTracks')">
-          <view class="point-label">足迹</view>
-          <view class="point-value">{{ footNum || 0 }}</view>
-        </view>
-      </view>
-      <!-- 我的订单 -->
-      <view class="order">
-        <view class="order-head">
-          <text class="order-head-title">我的订单</text>
-          <view class="order-head-all" @click="navigateTo('/pages/order/myOrder?status=0')">
-            <text>全部</text>
-            <u-icon name="arrow-right" size="12" color="#999"></u-icon>
-          </view>
-        </view>
-        <view class="order-row">
-          <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=1')">
-            <view class="bag bag2">
-              <u-icon name="bag-fill" size="22" color="#fff"></u-icon>
-            </view>
-            <view class="order-item-label">待支付</view>
-          </view>
-          <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=2')">
-            <view class="bag bag1">
-              <u-icon name="gift-fill" size="22" color="#fff"></u-icon>
-            </view>
-            <view class="order-item-label">待发货</view>
-          </view>
-          <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=3')">
-            <view class="bag bag3">
-              <u-icon name="car-fill" size="22" color="#fff"></u-icon>
-            </view>
-            <view class="order-item-label">待收货</view>
-          </view>
-          <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=4')">
-            <view class="bag bag4">
-              <u-icon name="star-fill" size="22" color="#fff"></u-icon>
-            </view>
-            <view class="order-item-label">待评价</view>
-          </view>
-          <view class="order-item" @click="navigateTo('/pages/order/myOrder?status=5')">
-            <view class="bag bag5">
-              <u-icon name="server-fill" size="22" color="#fff"></u-icon>
-            </view>
-            <view class="order-item-label">售后</view>
-          </view>
-        </view>
-      </view>
-    </div>
-    <!-- 常用工具 -->
-
-    <tool />
-
-  </view>
-</template>
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import {
-  onLoad,
-  onShow,
-  onPullDownRefresh,
-  onNavigationBarButtonTap,
-} from '@dcloudio/uni-app'
-import tool from '@/pages/tabbar/user/utils/tool.vue'
-import { getCouponsNum, getFootprintNum } from '@/api/members.js'
-import { getUserWallet } from '@/api/members'
-import configs from '@/config/config'
-import { useStore } from '@/store'
-import { getThemeStyle } from '@/utils/theme'
-import { isLogin, navigateToLogin, unitPrice } from '@/utils/filters.js'
-
-const store = useStore()
-const themeStyle = computed(() => getThemeStyle(store.state.theme))
-const lightColor = computed(() => store.getters.lightColor)
-const mainColor = computed(() => store.getters.mainColor)
-const aiderLightColor = computed(() => store.getters.aiderLightColor)
-
-const userImage = configs.defaultUserPhoto
-const userInfo = ref<any>({})
-const couponNum = ref<string | number>('')
-const footNum = ref<string | number>('')
-const walletNum = ref<string | number>('')
-
-onLoad(() => {})
-
-onShow(() => {
-  userInfo.value = isLogin() || {}
-  if (isLogin('auth')) {
-    getUserOrderNum()
-  } else {
-    walletNum.value = 0
-    couponNum.value = 0
-    footNum.value = 0
-  }
-})
-
-onPullDownRefresh(() => {
-  getUserOrderNum()
-  userInfo.value = isLogin()
-})
-
-// #ifndef MP
-onNavigationBarButtonTap((e) => {
-  if (e.index === 0) {
-    navigateTo('/pages/mine/set/setUp')
-  }
-})
-// #endif
-
-function navigateTo(url: string) {
-  uni.navigateTo({ url })
-}
-
-function userDetail() {
-  userInfo.value.id
-    ? navigateTo('/pages/mine/set/personMsg')
-    : navigateToLogin()
-}
-
-async function getUserOrderNum() {
-  uni.stopPullDownRefresh()
-
-  Promise.all([
-    getCouponsNum(),
-    getFootprintNum(),
-    getUserWallet(),
-  ]).then((res: any[]) => {
-    couponNum.value = res[0].data.result
-    footNum.value = res[1].data.result
-    walletNum.value = res[2].data.result.memberWallet
-  })
-}
-</script>
-
-<style lang="scss" scoped>
-html,
-body {
-  overflow: auto;
-}
-
-.money {
-  overflow: hidden;
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.user {
-  .header {
-    max-width: 100%;
-    padding: calc(50rpx + var(--status-bar-height)) 30rpx 0 6%;
-    height: calc(var(--status-bar-height) + 360rpx);
-    background-size: cover;
-    border-bottom-left-radius: 30rpx;
-    border-bottom-right-radius: 30rpx;
-    background-image: url("https://lilishop-uniapp.oss-cn-beijing.aliyuncs.com/main-bg.png");
-    background-position: bottom;
-    background-repeat: no-repeat;
-    color: #ffffff;
-    display: flex;
-    align-items: center;
-
-    .head-1 {
-      flex-shrink: 0;
-      width: 152rpx;
-
-      .head-avatar {
-        width: 152rpx;
-        height: 144rpx;
-        border-radius: 50%;
-        border: 3px solid #fff;
-        display: block;
-      }
-
-      .edti-head {
-        position: absolute;
-        width: 40rpx;
-        height: 40rpx;
-        border-radius: 50%;
-        background-color: rgba(255, 255, 255, 0.3);
-        top: 100rpx;
-        right: 0;
-
-        .head-avatar {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-
-    .head-2 {
-      flex: 1;
-      margin-left: 30rpx;
-      min-width: 0;
-      display: flex;
-      align-items: center;
-    }
-
-    .header-arrow {
-      flex-shrink: 0;
-      margin-left: 20rpx;
-    }
-  }
-
-  .pointBox {
-    width: 94%;
-    margin: 0 3%;
-    background: #fff;
-    border-radius: 20rpx;
-    box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
-  }
-
-  .point {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    height: 160rpx;
-    font-size: $font-sm;
-    // #ifdef MP-WEIXIN
-    padding: 24rpx;
-    // #endif
-
-    .point-item {
-      flex: 1;
-      text-align: center;
-    }
-
-    .point-label {
-      color: $u-main-color;
-      font-size: 28rpx;
-    }
-
-    .point-value {
-      margin-top: 8rpx;
-      color: $main-color;
-      font-size: $font-lg;
-    }
-  }
-
-  .order {
-    padding: 8rpx 16rpx 24rpx;
-    color: #333;
-
-    .order-head {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 8rpx 12rpx 20rpx;
-    }
-
-    .order-head-title {
-      font-size: 26rpx;
-      font-weight: 600;
-      color: #111;
-    }
-
-    .order-head-all {
-      display: flex;
-      align-items: center;
-      gap: 4rpx;
-      font-size: 24rpx;
-      color: #999;
-    }
-
-    .order-row {
-      display: flex;
-      align-items: center;
-    }
-
-    .order-item {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
-    }
-
-    .order-item-label {
-      margin-top: 12rpx;
-      line-height: 1.4;
-      font-size: 24rpx;
-      color: #333;
-    }
-  }
-}
-
-.box {
-  transform: translateY(-30rpx);
-}
-
-.user-name {
-  font-size: 34rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.bag {
-  width: 56rpx;
-  height: 56rpx;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.bag1 {
-  background: #ff4a48;
-}
-
-.bag2 {
-  background: #ff992f;
-}
-
-.bag3 {
-  background: #009ee0;
-}
-
-.bag4 {
-  background: #00d5d5;
-}
-
-.bag5 {
-  background: #28ccb0;
-}
-</style>
+<template>
+  <view class="user-page" :style="themeStyle">
+    <!-- 顶部沉浸式头部区域 -->
+    <view class="hero-header" :style="{ paddingTop: headerPaddingTop + 'px' }">
+      <!-- 用户信息区（沉降至胶囊安全区下方，舒展大气） -->
+      <view class="user-profile" @click="userDetail">
+        <view class="avatar-container">
+          <image class="avatar-img" :src="userInfo.face || userImage" mode="aspectFill"></image>
+          <view class="vip-tag-icon" v-if="userInfo.id">
+            <u-icon name="level" size="10" color="#ffffff"></u-icon>
+          </view>
+        </view>
+
+        <view class="user-detail-info">
+          <view class="user-title-row">
+            <text class="user-nickname">{{ userInfo.id ? userInfo.nickName : '登录 / 注册' }}</text>
+          </view>
+          <view class="user-sub-row">
+            <view class="badge-tag" v-if="userInfo.id">
+              <text>普通会员</text>
+            </view>
+            <text class="user-sub-text" v-else>
+              登录享受更多会员特权与折扣
+            </text>
+          </view>
+        </view>
+
+        <view class="profile-arrow">
+          <u-icon name="arrow-right" size="14" color="rgba(255, 255, 255, 0.75)"></u-icon>
+        </view>
+      </view>
+
+      <!-- 沉浸式核心资产栏（纯白字，融入顶部主色调） -->
+      <view class="hero-assets">
+        <view class="asset-col" @click="navigateTo('/pages/mine/deposit/operation')">
+          <view class="asset-number-row">
+            <text class="symbol">¥</text>
+            <text class="num money">{{ unitPrice(walletNum) }}</text>
+          </view>
+          <view class="asset-title">预存款</view>
+        </view>
+        <view class="asset-sep"></view>
+        <view class="asset-col" @click="navigateTo('/pages/cart/coupon/myCoupon')">
+          <view class="asset-number-row">
+            <text class="num">{{ couponNum || 0 }}</text>
+            <text class="unit">张</text>
+          </view>
+          <view class="asset-title">优惠券</view>
+        </view>
+        <view class="asset-sep"></view>
+        <view class="asset-col" @click="navigateTo('/pages/mine/myTracks')">
+          <view class="asset-number-row">
+            <text class="num">{{ footNum || 0 }}</text>
+            <text class="unit">条</text>
+          </view>
+          <view class="asset-title">浏览足迹</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 下方主内容卡片区域 -->
+    <view class="main-container">
+      <!-- 我的订单卡片 -->
+      <view class="card-box order-box">
+        <view class="card-title-bar">
+          <text class="card-title-text">我的订单</text>
+          <view class="card-more-btn" @click="navigateTo('/pages/order/myOrder?status=0')">
+            <text>全部订单</text>
+            <u-icon name="arrow-right" size="11" color="#a0a0a0"></u-icon>
+          </view>
+        </view>
+
+        <view class="order-action-row">
+          <view class="order-action-item" @click="navigateTo('/pages/order/myOrder?status=1')">
+            <view class="icon-wrap">
+              <u-icon name="bag-fill" size="27" color="#ff7a00"></u-icon>
+            </view>
+            <text class="order-action-label">待支付</text>
+          </view>
+
+          <view class="order-action-item" @click="navigateTo('/pages/order/myOrder?status=2')">
+            <view class="icon-wrap">
+              <u-icon name="gift-fill" size="27" color="#ff4d4f"></u-icon>
+            </view>
+            <text class="order-action-label">待发货</text>
+          </view>
+
+          <view class="order-action-item" @click="navigateTo('/pages/order/myOrder?status=3')">
+            <view class="icon-wrap">
+              <u-icon name="car-fill" size="27" color="#1677ff"></u-icon>
+            </view>
+            <text class="order-action-label">待收货</text>
+          </view>
+
+          <view class="order-action-item" @click="navigateTo('/pages/order/myOrder?status=4')">
+            <view class="icon-wrap">
+              <u-icon name="star-fill" size="27" color="#13c2c2"></u-icon>
+            </view>
+            <text class="order-action-label">待评价</text>
+          </view>
+
+          <view class="order-action-item" @click="navigateTo('/pages/order/myOrder?status=5')">
+            <view class="icon-wrap">
+              <u-icon name="server-fill" size="27" color="#20b286"></u-icon>
+            </view>
+            <text class="order-action-label">退款/售后</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 服务工具卡片（分组化重构） -->
+      <tool />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import {
+  onLoad,
+  onShow,
+  onPullDownRefresh,
+  onNavigationBarButtonTap,
+} from '@dcloudio/uni-app'
+import tool from '@/pages/tabbar/user/utils/tool.vue'
+import { getCouponsNum, getFootprintNum } from '@/api/members.js'
+import { getUserWallet } from '@/api/members'
+import configs from '@/config/config'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+import { isLogin, navigateToLogin, unitPrice } from '@/utils/filters.js'
+
+const store = useStore()
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+const lightColor = computed(() => store.getters.lightColor)
+const mainColor = computed(() => store.getters.mainColor)
+const aiderLightColor = computed(() => store.getters.aiderLightColor)
+
+const userImage = configs.defaultUserPhoto
+const userInfo = ref<any>({})
+const couponNum = ref<string | number>('')
+const footNum = ref<string | number>('')
+const walletNum = ref<string | number>('')
+
+// 动态计算顶部安全留白，避免顶到灵动岛/状态栏
+const headerPaddingTop = ref<number>(88)
+
+function initSafeTop() {
+  try {
+    const sys = uni.getSystemInfoSync()
+    const statusBar = sys.statusBarHeight || 44
+    // #ifdef MP-WEIXIN
+    const menu = uni.getMenuButtonBoundingClientRect()
+    if (menu && menu.bottom) {
+      // 头像整行落到微信胶囊下方，预留 16px 呼吸空隙，彻底消除压迫感
+      headerPaddingTop.value = menu.bottom + 16
+    } else {
+      headerPaddingTop.value = statusBar + 54
+    }
+    // #endif
+    // #ifndef MP-WEIXIN
+    headerPaddingTop.value = statusBar + 32
+    // #endif
+  } catch (e) {
+    headerPaddingTop.value = 88
+  }
+}
+
+onLoad(() => {
+  initSafeTop()
+})
+
+onShow(() => {
+  userInfo.value = isLogin() || {}
+  if (isLogin('auth')) {
+    getUserOrderNum()
+  } else {
+    walletNum.value = 0
+    couponNum.value = 0
+    footNum.value = 0
+  }
+})
+
+onPullDownRefresh(() => {
+  getUserOrderNum()
+  userInfo.value = isLogin()
+})
+
+// #ifndef MP
+onNavigationBarButtonTap((e) => {
+  if (e.index === 0) {
+    navigateTo('/pages/mine/set/setUp')
+  }
+})
+// #endif
+
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
+
+function userDetail() {
+  userInfo.value.id
+    ? navigateTo('/pages/mine/set/personMsg')
+    : navigateToLogin()
+}
+
+async function getUserOrderNum() {
+  uni.stopPullDownRefresh()
+
+  Promise.all([
+    getCouponsNum(),
+    getFootprintNum(),
+    getUserWallet(),
+  ]).then((res: any[]) => {
+    couponNum.value = res[0].data.result
+    footNum.value = res[1].data.result
+    walletNum.value = res[2].data.result.memberWallet
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.user-page {
+  min-height: 100vh;
+  background-color: #f5f6f9;
+  padding-bottom: 40rpx;
+  box-sizing: border-box;
+}
+
+/* 顶部沉浸式头部 */
+.hero-header {
+  position: relative;
+  width: 100%;
+  background: linear-gradient(175deg, #e53238 0%, #eb4448 45%, #ff5e62 100%);
+  padding-left: 28rpx;
+  padding-right: 28rpx;
+  padding-bottom: 64rpx;
+  border-bottom-left-radius: 36rpx;
+  border-bottom-right-radius: 36rpx;
+  /* CSS 静态兜底：状态栏高度 + 充足的沉降留白 */
+  padding-top: calc(var(--status-bar-height, 44px) + 88rpx);
+  box-sizing: border-box;
+}
+
+/* 用户信息行（移到胶囊下方，拥有充裕横纵向空间） */
+.user-profile {
+  display: flex;
+  align-items: center;
+  padding: 8rpx 6rpx;
+  transition: opacity 0.2s;
+
+  &:active {
+    opacity: 0.88;
+  }
+
+  .avatar-container {
+    position: relative;
+    flex-shrink: 0;
+
+    .avatar-img {
+      width: 124rpx;
+      height: 124rpx;
+      border-radius: 50%;
+      border: 4rpx solid rgba(255, 255, 255, 0.92);
+      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.16);
+      background-color: #ffffff;
+      display: block;
+    }
+
+    .vip-tag-icon {
+      position: absolute;
+      right: -2rpx;
+      bottom: 2rpx;
+      width: 34rpx;
+      height: 34rpx;
+      background: linear-gradient(135deg, #f59e0b, #d97706);
+      border: 2rpx solid #ffffff;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .user-detail-info {
+    flex: 1;
+    margin-left: 24rpx;
+    min-width: 0;
+
+    .user-title-row {
+      display: flex;
+      align-items: center;
+
+      .user-nickname {
+        font-size: 38rpx;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.5rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .user-sub-row {
+      margin-top: 12rpx;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 12rpx;
+
+      .badge-tag {
+        font-size: 20rpx;
+        color: #ffffff;
+        background: rgba(255, 255, 255, 0.22);
+        padding: 3rpx 14rpx;
+        border-radius: 20rpx;
+        border: 1rpx solid rgba(255, 255, 255, 0.35);
+        font-weight: 500;
+      }
+
+      .user-sub-text {
+        font-size: 23rpx;
+        color: rgba(255, 255, 255, 0.88);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .profile-arrow {
+    flex-shrink: 0;
+    margin-left: 16rpx;
+    opacity: 0.85;
+  }
+}
+
+/* 核心资产栏（沉浸在红色背景中） */
+.hero-assets {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 44rpx;
+  padding: 0 12rpx;
+
+  .asset-col {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.15s, opacity 0.15s;
+
+    &:active {
+      transform: scale(0.96);
+      opacity: 0.85;
+    }
+
+    .asset-number-row {
+      display: flex;
+      align-items: baseline;
+      color: #ffffff;
+
+      .symbol {
+        font-size: 22rpx;
+        font-weight: 600;
+        margin-right: 4rpx;
+        opacity: 0.95;
+      }
+
+      .num {
+        font-size: 40rpx;
+        font-weight: 700;
+        letter-spacing: 0.5rpx;
+      }
+
+      .unit {
+        font-size: 21rpx;
+        margin-left: 4rpx;
+        opacity: 0.85;
+      }
+
+      .money {
+        max-width: 230rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .asset-title {
+      margin-top: 10rpx;
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.88);
+      line-height: 1;
+    }
+  }
+
+  .asset-sep {
+    width: 2rpx;
+    height: 38rpx;
+    background-color: rgba(255, 255, 255, 0.22);
+  }
+}
+
+/* 主内容区（上浮自然压在红底圆角上） */
+.main-container {
+  position: relative;
+  margin-top: -36rpx;
+  padding: 0 24rpx;
+  z-index: 2;
+}
+
+/* 通用白底圆角卡片 */
+.card-box {
+  background: #ffffff;
+  border-radius: 20rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 18rpx rgba(17, 30, 79, 0.04);
+}
+
+/* 订单卡片 */
+.order-box {
+  .card-title-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 22rpx;
+    border-bottom: 1rpx solid #f6f7fa;
+
+    .card-title-text {
+      font-size: 29rpx;
+      font-weight: 700;
+      color: #1a1a1a;
+    }
+
+    .card-more-btn {
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      font-size: 23rpx;
+      color: #999999;
+      padding: 4rpx 0;
+
+      &:active {
+        opacity: 0.7;
+      }
+    }
+  }
+
+  .order-action-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 24rpx;
+
+    .order-action-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.15s, opacity 0.15s;
+
+      &:active {
+        transform: scale(0.93);
+        opacity: 0.85;
+      }
+
+      .icon-wrap {
+        width: 60rpx;
+        height: 60rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 12rpx;
+      }
+
+      .order-action-label {
+        font-size: 24rpx;
+        color: #333333;
+        font-weight: 500;
+        line-height: 1;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/tabbar/user/utils/tool.vue b/pages/tabbar/user/utils/tool.vue
index 241a195..93db174 100644
--- a/pages/tabbar/user/utils/tool.vue
+++ b/pages/tabbar/user/utils/tool.vue
@@ -1,136 +1,116 @@
 <template>
-  <view>
-    <!-- 常用工具 -->
-    <view class="interact-tools" style="margin-bottom: 15px">
+  <view class="tool-wrapper">
+    <!-- 卡片 1: 资产与常用 -->
+    <view class="service-card">
+      <view class="service-title-bar">
+        <text class="service-title-text">资产与常用</text>
+      </view>
 
-      <div class="paddingBox">
-        <view class="interact-container">
-			<view class="interact-item" @click="navigateTo('/pages/mine/address/addressManage')">
-			  <image class="interact-item-icon" src="/static/mine/myaddress.png" mode=""></image>
-			  <view>地址管理</view>
-			</view>
-			
-			<view class="interact-item" @click="navigateTo('/pages/mine/myTracks')">
-			  <image class="interact-item-icon" src="/static/mine/logistics.png" mode=""></image>
-			  <view>我的足迹</view>
-			</view>
-		
-			<view class="interact-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
-			  <image class="interact-item-icon" src="/static/mine/feedback.png" mode=""></image>
-			  <view>我的评价</view>
-			</view>
-			<view class="interact-item" @click="linkMsgDetail()">
-			  <image class="interact-item-icon" src="/static/mine/mycommit.png" mode=""></image>
-			  <view>我的消息</view>
-			</view>
-		
-		
-			<view class="interact-item" @click="navigateTo('/pages/mine/myCollect')">
-			  <image class="interact-item-icon" src="/static/mine/myfavorite.png" mode=""></image>
-			  <view>我的关注</view>
-			</view>
-			
-			
-			
-			<view class="interact-item" @click="navigateTo('/pages/mine/point/myPoint')">
-			  <image class="interact-item-icon" src="/static/mine/mypoint.png" mode=""></image>
-			  <view>我的积分</view>
-			</view>
-			
-			<view class="interact-item" @click="distribution">
-			  <image class="interact-item-icon" src="/static/mine/distribution.png" mode=""></image>
-			  <view>我的分销</view>
-			</view>
-			
-			
-			
-			<view class="interact-item" @click="navigateTo('/pages/order/complain/complainList')">
-			  <image class="interact-item-icon" src="/static/mine/shensu.png" mode=""></image>
-			  <view>我的投诉</view>
-			</view>
-				   
-			<view class="interact-item" @click="navigateTo('/pages/cart/coupon/myCoupon')">
-			  <image class="interact-item-icon" src="/static/mine/mycoupon.png" mode=""></image>
-			  <view>优惠券</view>
-			</view>
-			<view class="interact-item" @click="navigateTo('/pages/cart/gift-card/myGiftCards')">
-			  <image class="interact-item-icon" src="/static/mine/pointgift.png" mode=""></image>
-			  <view>礼品卡</view>
-			</view>
-			
-		
-			        
-					
-          <view class="interact-item" @click="navigateTo('/pages/mine/signIn')">
-            <image class="interact-item-icon" src="/static/mine/sign.png" mode=""></image>
-            <view>每日签到</view>
-          </view>
-         
-         
-       
-          
-
-      
-          <view class="interact-item" @click="navigateTo('/pages/cart/coupon/couponCenter')">
-            <image class="interact-item-icon" src="/static/mine/couponcenter.png" mode=""></image>
-            <view>领券中心</view>
-          </view>
-          
-         
-          
-          <view class="interact-item" @click="navigateTo('/pages/promotion/bargain/log')">
-            <image class="interact-item-icon" src="/static/mine/kanjia.png" mode=""></image>
-            <view>砍价记录</view>
-          </view>
-		  
-		
-		  
-          <view class="interact-item" @click="navigateTo('/pages/mine/set/feedBack')">
-            <image class="interact-item-icon" src="/static/mine/feedback.png" mode=""></image>
-            <view>意见反馈</view>
-          </view>
-          
-          <view class="interact-item" @click="navigateTo('/pages/mine/set/editionIntro')">
-            <image class="interact-item-icon" src="/static/mine/pointgift.png" mode=""></image>
-            <view>关于</view>
-          </view>
-          
-          <view class="interact-item" @click="navigateTo('/pages/passport/entry/seller/index')">
-            <image class="interact-item-icon" src="/static/mine/feedback.png" mode=""></image>
-            <view>店铺入驻</view>
-          </view>
-          
-          
-<!--          <view class="interact-item" @click="inviter()">-->
-<!--          	<image class="interact-item-icon" src="/static/mine/share.png" mode=""></image>-->
-<!--          	<view>邀新</view>-->
-<!--          </view>-->
-          <view class="interact-item" @click="navigateTo('/pages/mine/set/setUp')">
-            <image class="interact-item-icon" src="/static/mine/setting.png" mode=""></image>
-            <view>设置</view>
-          </view>
-        
-		  
+      <view class="service-grid">
+        <view class="service-grid-item" @click="navigateTo('/pages/cart/coupon/couponCenter')">
+          <image class="grid-icon" src="/static/mine/couponcenter.png" mode="aspectFit"></image>
+          <text class="grid-label">领券中心</text>
         </view>
-      </div>
-	  
-	  			<template>
-	  				<u-popup v-model:show="sharingShow" mode="bottom" border-radius="14">
-	  					<view style="margin: 10px; text-align: center;"> 请邀请用户扫描二维码或者将地址复制转发给其他用户 </view>
-	  					<view class='qrcode'>
-	  						<uqrcode v-if="sharingLink" ref="uqrcode" canvas-id="qrcode" :value="sharingLink" :options="{ margin: 10 }">
-	  						</uqrcode>
-	  					</view>
-	  
-						  <view class="copy-text" @click="getDetail(sharingLink)">
-							{{sharingLink}}
-						  </view>
-	  					<view class="confrim-btn">
-	  						<u-button @click="sharingShow = false;">关闭</u-button>
-	  					</view>
-	  				</u-popup>
-	  			</template>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/mine/point/myPoint')">
+          <image class="grid-icon" src="/static/mine/mypoint.png" mode="aspectFit"></image>
+          <text class="grid-label">我的积分</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/mine/signIn')">
+          <image class="grid-icon" src="/static/mine/sign.png" mode="aspectFit"></image>
+          <text class="grid-label">每日签到</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/cart/coupon/myCoupon')">
+          <image class="grid-icon" src="/static/mine/mycoupon.png" mode="aspectFit"></image>
+          <text class="grid-label">优惠券</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/mine/address/addressManage')">
+          <image class="grid-icon" src="/static/mine/myaddress.png" mode="aspectFit"></image>
+          <text class="grid-label">地址管理</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/mine/myTracks')">
+          <image class="grid-icon" src="/static/mine/logistics.png" mode="aspectFit"></image>
+          <text class="grid-label">我的足迹</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/mine/myCollect')">
+          <image class="grid-icon" src="/static/mine/myfavorite.png" mode="aspectFit"></image>
+          <text class="grid-label">我的关注</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
+          <image class="grid-icon" src="/static/mine/feedback.png" mode="aspectFit"></image>
+          <text class="grid-label">我的评价</text>
+        </view>
+      </view>
     </view>
+
+    <!-- 卡片 2: 更多服务 -->
+    <view class="service-card">
+      <view class="service-title-bar">
+        <text class="service-title-text">更多服务</text>
+      </view>
+
+      <view class="service-grid">
+        <view class="service-grid-item" @click="distribution">
+          <image class="grid-icon" src="/static/mine/distribution.png" mode="aspectFit"></image>
+          <text class="grid-label">我的分销</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/cart/gift-card/myGiftCards')">
+          <image class="grid-icon" src="/static/mine/pointgift.png" mode="aspectFit"></image>
+          <text class="grid-label">礼品卡</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/promotion/bargain/log')">
+          <image class="grid-icon" src="/static/mine/kanjia.png" mode="aspectFit"></image>
+          <text class="grid-label">砍价记录</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/passport/entry/seller/index')">
+          <image class="grid-icon" src="/static/mine/feedback.png" mode="aspectFit"></image>
+          <text class="grid-label">店铺入驻</text>
+        </view>
+
+        <view class="service-grid-item" @click="linkMsgDetail()">
+          <image class="grid-icon" src="/static/mine/mycommit.png" mode="aspectFit"></image>
+          <text class="grid-label">我的消息</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/order/complain/complainList')">
+          <image class="grid-icon" src="/static/mine/shensu.png" mode="aspectFit"></image>
+          <text class="grid-label">我的投诉</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/mine/set/feedBack')">
+          <image class="grid-icon" src="/static/mine/feedback.png" mode="aspectFit"></image>
+          <text class="grid-label">意见反馈</text>
+        </view>
+
+        <view class="service-grid-item" @click="navigateTo('/pages/mine/set/setUp')">
+          <image class="grid-icon" src="/static/mine/setting.png" mode="aspectFit"></image>
+          <text class="grid-label">系统设置</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 分享二维码弹窗（保留原有能力） -->
+    <u-popup v-model:show="sharingShow" mode="bottom" border-radius="14">
+      <view style="margin: 10px; text-align: center;">请邀请用户扫描二维码或者将地址复制转发给其他用户</view>
+      <view class="qrcode">
+        <uqrcode v-if="sharingLink" ref="uqrcode" canvas-id="qrcode" :value="sharingLink" :options="{ margin: 10 }"></uqrcode>
+      </view>
+      <view class="copy-text" @click="getDetail(sharingLink)">
+        {{ sharingLink }}
+      </view>
+      <view class="confrim-btn">
+        <u-button @click="sharingShow = false;">关闭</u-button>
+      </view>
+    </u-popup>
   </view>
 </template>
 
@@ -227,7 +207,6 @@ function distribution() {
   if (!tipsToLogin('normal')) {
     return
   }
-  // 入口按 distributionStatus 路由：有对象 ≠ 有效分销员。清退停住，不进 join / home。
   fetchDistribution().then((res) => {
     if (res.data.result) {
       const type = res.data.result.distributionStatus
@@ -264,6 +243,69 @@ function distribution() {
 </script>
 
 <style lang="scss" scoped>
+.tool-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  margin-top: 20rpx;
+}
+
+.service-card {
+  background: #ffffff;
+  border-radius: 20rpx;
+  padding: 24rpx 16rpx 20rpx;
+  box-shadow: 0 4rpx 18rpx rgba(17, 30, 79, 0.04);
+
+  .service-title-bar {
+    padding: 0 12rpx 20rpx;
+    border-bottom: 1rpx solid #f6f7fa;
+
+    .service-title-text {
+      font-size: 29rpx;
+      font-weight: 700;
+      color: #1a1a1a;
+      letter-spacing: 0.5rpx;
+    }
+  }
+
+  .service-grid {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-top: 14rpx;
+
+    .service-grid-item {
+      width: 25%;
+      flex: 0 0 25%;
+      box-sizing: border-box;
+      height: 146rpx;
+      padding: 12rpx 4rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.15s, opacity 0.15s;
+
+      &:active {
+        transform: scale(0.92);
+        opacity: 0.8;
+      }
+
+      .grid-icon {
+        width: 52rpx;
+        height: 52rpx;
+        margin-bottom: 12rpx;
+      }
+
+      .grid-label {
+        font-size: 24rpx;
+        color: #444444;
+        line-height: 1.2;
+      }
+    }
+  }
+}
+
 .copy-text {
   display: flex;
   align-items: center;
@@ -272,50 +314,8 @@ function distribution() {
   line-break: anywhere;
 }
 
-.interact-tools {
-	border-left: none;
-	border-right: none;
-
-
-	.interactBox {
-		height: 156rpx;
-	}
-
-	.interact-container {
-		margin: 0 20rpx;
-		background: #fff;
-		border-radius: 20rpx;
-		box-shadow: 0 4rpx 24rpx 0 rgba($color: #f6f6f6, $alpha: 1);
-
-		.interact-item-icon {
-			width: 56rpx;
-			height: 56rpx;
-			margin-bottom: 10rpx;
-		}
-
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		text-align: center;
-
-		.interact-item {
-			font-size: 24rpx;
-			width: 25%;
-			flex: 0 0 25%;
-			box-sizing: border-box;
-			height: 150rpx;
-			padding: 20rpx 8rpx;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			color: #666;
-		}
-	}
-}
-
 .qrcode {
-	margin: 0 auto;
-	width: 200px;
+  margin: 0 auto;
+  width: 200px;
 }
-</style>
+</style>
\ No newline at end of file