更新

hdApp/src/admin/home/me.vue

@@ -3,44 +3,56 @@
     <view class="page-hero">
       <view class="status-space" :style="{ height: statusBarHeight + 'px' }"></view>
 
-      <view class="profile-head">
-        <view class="profile-main" @click="isLoggedIn ? pageTo({ url: '/admin/staff/admin' }) : pageTo({ url: '/admin/home/login' })">
+      <view class="hero-panel">
+      <view class="profile-card">
+        <view
+          class="profile-main"
+          @click="isLoggedIn ? pageTo({ url: '/admin/staff/admin' }) : pageTo({ url: '/admin/home/login' })"
+        >
           <image v-if="myInfo.shopImg" class="shop-avatar" :src="myInfo.shopImg" mode="aspectFill"></image>
           <view v-else class="shop-avatar avatar-placeholder">
-            <zui-svg-icon icon="home-flour" :width="54" :height="54" />
+            <zui-svg-icon icon="home-flour" :width="48" :height="48" />
           </view>
           <view class="profile-text">
             <view class="shop-title">{{ isLoggedIn ? shopTitle : '登录/注册' }}</view>
             <view class="admin-name">{{ isLoggedIn ? adminName : '点击登录花店账号' }}</view>
           </view>
+          <text v-if="isLoggedIn" class="profile-chevron">›</text>
         </view>
 
-        <view class="profile-actions" v-if="isLoggedIn">
-          <view class="profile-action" @click.stop="changeShop">
-            <image class="profile-action-icon" :src="iconSrc('my-switch-shop')" mode="aspectFit" />
+        <view class="quick-actions" v-if="isLoggedIn">
+          <view class="quick-action" @click.stop="changeShop">
+            <view class="quick-action-icon-wrap">
+              <image class="quick-action-icon" :src="iconSrc('my-switch-shop')" mode="aspectFit" />
+            </view>
             <text>切换门店</text>
           </view>
-          <view class="profile-action" @click.stop="suggest">
-            <image class="profile-action-icon" :src="iconSrc('my-service')" mode="aspectFit" />
+          <view class="quick-action" @click.stop="suggest">
+            <view class="quick-action-icon-wrap">
+              <image class="quick-action-icon" :src="iconSrc('my-service')" mode="aspectFit" />
+            </view>
             <text>专属客服</text>
           </view>
-          <view class="profile-action" @click.stop="pageTo({ url: '/admin/shop/sk' })">
-            <image class="profile-action-icon" :src="iconSrc('my-settings-outline')" mode="aspectFit" />
+          <view class="quick-action" @click.stop="pageTo({ url: '/admin/shop/sk' })">
+            <view class="quick-action-icon-wrap">
+              <image class="quick-action-icon" :src="iconSrc('my-settings-outline')" mode="aspectFit" />
+            </view>
             <text>设置</text>
           </view>
         </view>
       </view>
 
       <view class="expire-card" v-if="isLoggedIn" @click="goRenew">
-        <view class="expire-text">
-          <text>到期时间：</text>
+        <view class="expire-main">
+          <text class="expire-label">到期时间</text>
           <text class="expire-date">{{ deadlineText }}</text>
         </view>
         <view class="renew-link">
-          <text>去续费</text>
-          <text class="renew-arrow">›</text>
+          <text class="renew-text">去续费</text>
+          <view class="renew-arrow">›</view>
         </view>
       </view>
+      </view>
     </view>
 
     <view class="content-wrap" v-if="isLoggedIn">
@@ -51,7 +63,7 @@
           <view class="finance-actions">
             <view class="pill-btn" @click="pageTo({ url: '/pagesStore/me/shopYeChange' })">变动明细</view>
             <view class="pill-btn" @click="pageTo({ url: '/pagesStore/me/withdraw' })">提现记录</view>
-            <view class="pill-btn solid" v-if="Number(myInfo.txBalance) > 0" @click="checkToApplyCash">提现</view>
+            <view class="pill-btn pill-btn-solid" v-if="Number(myInfo.txBalance) > 0" @click="checkToApplyCash">提现</view>
           </view>
         </view>
 
@@ -63,7 +75,7 @@
           <view class="finance-actions">
             <view class="pill-btn" @click="pageTo({ url: '/admin/home/moneyChangeList' })">变动明细</view>
             <view class="pill-btn" @click="outAmountFn">取出</view>
-            <view class="pill-btn solid" @click="inAmountFn">存入</view>
+            <view class="pill-btn pill-btn-solid" @click="inAmountFn">存入</view>
           </view>
         </view>
       </view>
@@ -71,7 +83,7 @@
       <view class="menu-card">
         <view class="menu-row" v-for="item in menuList" :key="item.key" @click="handleMenuTap(item)">
           <view class="menu-left">
-            <view class="menu-icon">
+            <view class="menu-icon-wrap">
               <image class="menu-icon-img" :src="iconSrc(item.icon)" mode="aspectFit" />
             </view>
             <text class="menu-name">{{ item.name }}</text>
@@ -361,39 +373,44 @@ export default {
 <style lang="scss" scoped>
 .me-page {
   min-height: 100vh;
-  padding-bottom: 28upx;
+  padding-bottom: 32upx;
   background: #f5f8f6;
 }
 
 .page-hero {
-  padding: 0 28upx 0upx;
-  background: linear-gradient(180deg, #e9f8ef 0%, #f7fbf8 78%, rgba(247, 251, 248, 0) 100%);
+  padding: 0 24upx 24upx;
+  background: linear-gradient(180deg, #dff5e8 0%, #eaf8f0 38%, #f0faf4 72%, #f5f8f6 100%);
+}
+
+.hero-panel {
+  padding: 20upx 20upx 22upx;
+  border-radius: 24upx;
+  background: #fff;
+  box-shadow: 0 10upx 32upx rgba(24, 37, 30, 0.06);
 }
 
 .status-space {
   width: 100%;
 }
 
-.profile-head {
-  min-height: 196upx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.profile-card {
+  padding: 4upx 0 0;
 }
 
 .profile-main {
-  flex: 1;
-  min-width: 0;
   display: flex;
   align-items: center;
+  min-width: 0;
 }
 
 .shop-avatar,
 .avatar-placeholder {
-  width: 118upx;
-  height: 118upx;
+  width: 108upx;
+  height: 108upx;
   border-radius: 50%;
   flex-shrink: 0;
+  border: 4upx solid #fff;
+  box-shadow: 0 8upx 20upx rgba(9, 197, 103, 0.12);
 }
 
 .shop-avatar {
@@ -408,15 +425,15 @@ export default {
 }
 
 .profile-text {
+  flex: 1;
   min-width: 0;
-  margin-left: 24upx;
+  margin-left: 22upx;
 }
 
 .shop-title {
-  max-width: 300upx;
   color: #111416;
-  font-size: 36upx;
-  line-height: 46upx;
+  font-size: 34upx;
+  line-height: 44upx;
   font-weight: 800;
   overflow: hidden;
   white-space: nowrap;
@@ -424,43 +441,65 @@ export default {
 }
 
 .admin-name {
-  margin-top: 14upx;
-  color: #7c838c;
-  font-size: 28upx;
-  line-height: 34upx;
+  margin-top: 10upx;
+  color: #8a9199;
+  font-size: 26upx;
+  line-height: 32upx;
 }
 
-.profile-actions {
+.profile-chevron {
+  margin-left: 12upx;
+  color: #c5cad1;
+  font-size: 44upx;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.quick-actions {
   display: flex;
   align-items: flex-start;
-  flex-shrink: 0;
-  gap: 28upx;
+  justify-content: space-around;
+  margin-top: 24upx;
+  padding: 20upx 8upx 4upx;
+  border-radius: 18upx;
+  background: #f5faf7;
 }
 
 /* #ifdef MP-WEIXIN */
-.profile-actions {
-  transform: translateY(46upx);
+.quick-actions {
+  margin-top: 24upx;
 }
 /* #endif */
 
-.profile-action {
+.quick-action {
   display: flex;
   flex-direction: column;
   align-items: center;
-  flex-shrink: 0;
-  color: #111416;
+  flex: 1;
+  min-width: 0;
+  color: #33383f;
   font-size: 24upx;
   line-height: 30upx;
-  text-align: center;
 }
 
-.profile-action-icon {
-  width: 44upx;
-  height: 44upx;
-  flex-shrink: 0;
+.quick-action-icon-wrap {
+  width: 72upx;
+  height: 72upx;
+  border-radius: 50%;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 6upx 16upx rgba(24, 37, 30, 0.06);
+}
+
+.quick-action-icon {
+  width: 40upx;
+  height: 40upx;
+  display: block;
 }
 
-.profile-action text {
+.quick-action text {
   margin-top: 12upx;
   max-width: 100%;
   white-space: nowrap;
@@ -471,29 +510,30 @@ export default {
 .expire-card {
   position: relative;
   overflow: hidden;
-  min-height: 130upx;
-  padding: 0 36upx;
-  border-radius: 18upx;
+  min-height: 92upx;
+  margin-top: 18upx;
+  padding: 20upx 24upx;
+  border-radius: 16upx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: #fff;
-  background: linear-gradient(135deg, #15d36d 0%, #05b654 100%);
-  box-shadow: 0 14upx 28upx rgba(9, 197, 103, 0.24);
+  background: #f0faf4;
+  border: 1upx solid #dcefe4;
+  box-shadow: none;
 }
 
 .expire-card::after {
   content: "";
   position: absolute;
-  right: 120upx;
-  top: 16upx;
-  width: 190upx;
-  height: 190upx;
+  right: -20upx;
+  top: -24upx;
+  width: 120upx;
+  height: 120upx;
   border-radius: 50%;
-  border: 28upx solid rgba(255, 255, 255, 0.12);
+  background: rgba(9, 197, 103, 0.06);
 }
 
-.expire-text,
+.expire-main,
 .renew-link {
   position: relative;
   z-index: 1;
@@ -501,40 +541,60 @@ export default {
   align-items: center;
 }
 
-.expire-text {
-  font-size: 34upx;
-  font-weight: 700;
+.expire-main {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.expire-label {
+  font-size: 24upx;
+  line-height: 30upx;
+  color: #8a9199;
 }
 
 .expire-date {
-  margin-left: 5upx;
-  font-size: 36upx;
-  font-weight: 800;
+  margin-top: 6upx;
+  font-size: 30upx;
+  line-height: 38upx;
+  font-weight: 700;
+  color: #111416;
 }
 
 .renew-link {
-  font-size: 32upx;
-  font-weight: 800;
+  font-size: 28upx;
+  font-weight: 700;
+  line-height: 40upx;
+  color: #09c567;
+}
+
+.renew-text {
+  line-height: 40upx;
+  color: #09c567;
 }
 
 .renew-arrow {
-  margin-left: 8upx;
-  font-size: 48upx;
+  margin-left: 4upx;
+  height: 40upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #09c567;
+  font-size: 36upx;
   line-height: 1;
 }
 
 .content-wrap {
-  padding: 8upx 26upx 28upx;
+  padding: 4upx 24upx 28upx;
 }
 
 .finance-card {
   display: flex;
   align-items: stretch;
-  margin-top: 18upx;
-  padding: 32upx 28upx;
-  border-radius: 18upx;
+  margin-top: 8upx;
+  padding: 28upx 24upx;
+  border-radius: 20upx;
   background: #fff;
-  box-shadow: 0 12upx 30upx rgba(24, 37, 30, 0.07);
+  box-shadow: 0 8upx 24upx rgba(24, 37, 30, 0.05);
 }
 
 .finance-col {
@@ -548,67 +608,71 @@ export default {
 
 .finance-divider {
   width: 1upx;
-  margin: 4upx 28upx 10upx;
-  background: #e5e9e7;
+  margin: 6upx 24upx 8upx;
+  background: #edf0ef;
 }
 
 .finance-label {
-  color: #666d76;
-  font-size: 28upx;
-  line-height: 34upx;
+  color: #8a9199;
+  font-size: 26upx;
+  line-height: 32upx;
 }
 
 .finance-amount {
-  margin-top: 28upx;
-  color: #030303;
-  font-size: 50upx;
-  line-height: 64upx;
-  font-weight: 900;
+  margin-top: 16upx;
+  color: #111416;
+  font-size: 44upx;
+  line-height: 56upx;
+  font-weight: 800;
 }
 
 .finance-actions {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 14upx;
-  margin-top: 34upx;
+  margin-top: 22upx;
+  margin-bottom: -10upx;
 }
 
 .pill-btn {
-  min-width: 112upx;
-  height: 52upx;
-  padding: 0 20upx;
-  border: 1upx solid #09c567;
-  border-radius: 14upx;
+  min-width: 108upx;
+  height: 50upx;
+  padding: 0 18upx;
+  margin-right: 12upx;
+  margin-bottom: 10upx;
+  border: 1upx solid #d8ebe2;
+  border-radius: 999upx;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #09c567;
-  background: #fff;
-  font-size: 26upx;
-  font-weight: 700;
+  background: #f6fbf8;
+  font-size: 24upx;
+  font-weight: 600;
   box-sizing: border-box;
 }
 
-.pill-btn.solid {
+.pill-btn-solid {
   color: #fff;
+  border-color: transparent;
   background: linear-gradient(135deg, #18d36f 0%, #08b856 100%);
 }
 
 .menu-card {
-  margin-top: 28upx;
-  padding: 0 28upx;
-  border-radius: 18upx;
+  margin-top: 20upx;
+  padding: 4upx 8upx;
+  border-radius: 20upx;
   background: #fff;
-  box-shadow: 0 12upx 30upx rgba(24, 37, 30, 0.07);
+  box-shadow: 0 8upx 24upx rgba(24, 37, 30, 0.05);
 }
 
 .menu-row {
-  min-height: 98upx;
+  min-height: 100upx;
+  padding: 0 16upx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1upx solid #edf0ef;
+  border-bottom: 1upx solid #f0f2f1;
 }
 
 .menu-row:last-child {
@@ -621,59 +685,62 @@ export default {
   min-width: 0;
 }
 
-.menu-icon {
-  width: 52upx;
-  height: 52upx;
+.menu-icon-wrap {
+  width: 64upx;
+  height: 64upx;
+  border-radius: 18upx;
+  background: #f5f8f6;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-.avatar-icon,
-.profile-action-icon,
 .menu-icon-img {
+  width: 40upx;
+  height: 40upx;
   display: block;
 }
 
-.avatar-icon {
-  width: 54upx;
-  height: 54upx;
-}
-
-.menu-icon-img {
-  width: 54upx;
-  height: 54upx;
-}
-
 .menu-name {
-  margin-left: 24upx;
+  margin-left: 20upx;
   color: #15181c;
-  font-size: 34upx;
-  font-weight: 600;
+  font-size: 30upx;
+  font-weight: 500;
+  line-height: 38upx;
 }
 
 .menu-arrow {
-  color: #aeb4bd;
-  font-size: 56upx;
+  color: #c5cad1;
+  font-size: 44upx;
   line-height: 1;
+  flex-shrink: 0;
 }
 
 .bottom-agreement {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 48upx;
-  margin-top: 44upx;
-  color: #777e87;
-  font-size: 27upx;
+  margin-top: 40upx;
+}
+
+.bottom-agreement text {
+  margin-left: 40upx;
+  color: #9aa2ab;
+  font-size: 26upx;
+  line-height: 32upx;
+}
+
+.bottom-agreement text:first-child {
+  margin-left: 0;
 }
 
 .bottom-version {
-  margin-top: 20upx;
+  margin-top: 16upx;
   text-align: center;
-  color: #777e87;
-  font-size: 25upx;
+  color: #b0b6be;
+  font-size: 24upx;
+  line-height: 32upx;
 }
 
 .amount-input {