更新

hdApp/src/admin/home/me.vue

@@ -2,33 +2,35 @@
   <view class="me-page app-content">
     <block v-if="isLoggedIn">
       <view class="page-hero">
-        <view class="status-space" :style="{ height: statusBarHeight + 'px' }"></view>
+        <view class="status-space" :style="{ height: safeTopHeight + 'px' }"></view>
 
         <view class="hero-panel">
           <view class="profile-card">
-            <view class="profile-main" @click="pageTo({ url: '/admin/staff/admin' })">
-              <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="60" :height="60" />
+            <view class="profile-header-row" :style="profileHeaderStyle">
+              <view class="profile-main" @click="pageTo({ url: '/admin/staff/admin' })">
+                <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="60" :height="60" />
+                </view>
+                <view class="profile-text">
+                  <view class="shop-title">{{ shopTitle }}</view>
+                  <view class="admin-name">{{ adminLineText }}</view>
+                </view>
               </view>
-              <view class="profile-text">
-                <view class="shop-title">{{ shopTitle }}</view>
-                <view class="admin-name">{{ adminLineText }}</view>
-              </view>
-            </view>
 
-            <view class="quick-actions">
-              <view class="quick-action" @click.stop="changeShop">
-                <image class="quick-action-icon" :src="iconSrc('my-switch-shop')" mode="aspectFit" />
-                <text>切换门店</text>
-              </view>
-              <view class="quick-action" @click.stop="suggest">
-                <image class="quick-action-icon" :src="iconSrc('my-service')" mode="aspectFit" />
-                <text>客服</text>
-              </view>
-              <view class="quick-action" @click.stop="pageTo({ url: shopEditUrl })">
-                <image class="quick-action-icon" :src="iconSrc('my-settings-outline')" mode="aspectFit" />
-                <text>门店设置</text>
+              <view class="quick-actions">
+                <view class="quick-action" @click.stop="changeShop">
+                  <image class="quick-action-icon" :src="iconSrc('my-switch-shop')" mode="aspectFit" />
+                  <text class="quick-action-text">切换门店</text>
+                </view>
+                <view class="quick-action" @click.stop="suggest">
+                  <image class="quick-action-icon" :src="iconSrc('my-service')" mode="aspectFit" />
+                  <text class="quick-action-text">客服</text>
+                </view>
+                <view class="quick-action" @click.stop="pageTo({ url: shopEditUrl })">
+                  <image class="quick-action-icon" :src="iconSrc('my-settings-outline')" mode="aspectFit" />
+                  <text class="quick-action-text">设置</text>
+                </view>
               </view>
             </view>
           </view>
@@ -40,7 +42,6 @@
             </view>
             <view class="renew-link">
               <text class="renew-text">去续费</text>
-              <view class="renew-arrow">›</view>
             </view>
           </view>
         </view>
@@ -96,7 +97,7 @@
     <block v-else>
       <view class="guest-page">
         <view class="guest-hero">
-          <view class="status-space" :style="{ height: statusBarHeight + 'px' }"></view>
+          <view class="status-space" :style="{ height: safeTopHeight + 'px' }"></view>
           <view class="guest-hero-inner">
             <text class="guest-hero-title">我的</text>
             <text class="guest-hero-desc">登录后管理门店</text>
@@ -251,12 +252,25 @@ export default {
       const shopInfo = this.myInfo.shopInfo || {};
       const id = shopInfo.id || this.myInfo.shopId || "";
       return `/admin/shop/add?id=${id}`;
+    },
+    safeTopHeight () {
+      return this.heroTopOffset > 0 ? this.heroTopOffset : this.statusBarHeight;
+    },
+    profileHeaderStyle () {
+      if (this.capsuleSafeRight > 0) {
+        return {
+          paddingRight: this.capsuleSafeRight + "px"
+        };
+      }
+      return {};
     }
   },
   data () {
     return {
       constant: this.$constant,
       statusBarHeight: 0,
+      heroTopOffset: 0,
+      capsuleSafeRight: 0,
       myInfo: {},
       version: "1.0.0",
       lookMoney: 0,
@@ -326,8 +340,21 @@ export default {
       try {
         const systemInfo = uni.getSystemInfoSync();
         this.statusBarHeight = systemInfo.statusBarHeight || 0;
+        this.heroTopOffset = 0;
+        this.capsuleSafeRight = 0;
+        // #ifdef MP-WEIXIN
+        const menuButton = uni.getMenuButtonBoundingClientRect();
+        if (menuButton && menuButton.bottom) {
+          this.heroTopOffset = menuButton.bottom + 12;
+        }
+        if (menuButton && menuButton.left) {
+          this.capsuleSafeRight = systemInfo.windowWidth - menuButton.left + 8;
+        }
+        // #endif
       } catch (e) {
         this.statusBarHeight = 0;
+        this.heroTopOffset = 0;
+        this.capsuleSafeRight = 0;
       }
     },
     resetGuestState () {
@@ -512,11 +539,39 @@ export default {
 }
 
 .page-hero {
-  padding: 0 24upx 20upx;
-  background: linear-gradient(180deg, #e8f5ed 0%, #ecf6f0 72%, #f2f7f4 100%);
+  position: relative;
+  padding: 0 24upx 32upx;
+  overflow: hidden;
+  background: linear-gradient(
+    180deg,
+    #a8d8bc 0%,
+    #b8e0c8 22%,
+    #c8e9d6 48%,
+    #daf0e4 76%,
+    #f2f7f4 100%
+  );
+}
+
+.page-hero::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 120upx;
+  z-index: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(242, 247, 244, 0) 0%,
+    rgba(242, 247, 244, 0.75) 50%,
+    #f2f7f4 100%
+  );
+  pointer-events: none;
 }
 
 .hero-panel {
+  position: relative;
+  z-index: 1;
   padding: 12upx 0 0;
   background: transparent;
 }
@@ -529,10 +584,21 @@ export default {
   padding: 0;
 }
 
+.profile-header-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
 .profile-main {
   display: flex;
+  flex-direction: row;
   align-items: center;
+  flex: 1;
   min-width: 0;
+  margin-right: 16upx;
+  margin-top: -24upx;
 }
 
 .shop-avatar,
@@ -575,8 +641,11 @@ export default {
 .admin-name {
   margin-top: 12upx;
   color: #8a9199;
-  font-size: 30upx;
-  line-height: 36upx;
+  font-size: 26upx;
+  line-height: 32upx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .profile-chevron {
@@ -589,38 +658,39 @@ export default {
 
 .quick-actions {
   display: flex;
+  flex-direction: row;
   align-items: flex-start;
-  justify-content: space-around;
-  margin-top: 22upx;
-  padding: 22upx 12upx 14upx;
-  border-radius: 18upx;
-  background: rgba(255, 255, 255, 0.58);
+  flex-shrink: 0;
+  margin-top: 4upx;
+  padding: 0;
+  background: transparent;
 }
 
 .quick-action {
   display: flex;
   flex-direction: column;
   align-items: center;
-  flex: 1;
+  flex-shrink: 0;
   min-width: 0;
-  color: #33383f;
-  font-size: 26upx;
-  line-height: 28upx;
 }
 
 .quick-action + .quick-action {
-  margin-left: 0;
+  margin-left: 28upx;
 }
 
 .quick-action-icon {
-  width: 46upx;
-  height: 46upx;
+  width: 48upx;
+  height: 48upx;
   display: block;
 }
 
-.quick-action text {
-  margin-top: 10upx;
-  max-width: 100%;
+.quick-action-text {
+  margin-top: 8upx;
+  max-width: 120upx;
+  color: #09c567;
+  font-size: 24upx;
+  line-height: 30upx;
+  text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -703,7 +773,9 @@ export default {
 }
 
 .content-wrap {
-  padding: 8upx 24upx 28upx;
+  position: relative;
+  z-index: 1;
+  padding: 4upx 24upx 28upx;
 }
 
 .finance-card {
@@ -904,7 +976,14 @@ export default {
   position: relative;
   padding: 0 24upx 28upx;
   overflow: hidden;
-  background: linear-gradient(180deg, #e8f5ed 0%, #ecf6f0 72%, #f2f7f4 100%);
+  background: linear-gradient(
+    180deg,
+    #a8d8bc 0%,
+    #b8e0c8 22%,
+    #c8e9d6 48%,
+    #daf0e4 76%,
+    #f2f7f4 100%
+  );
 }
 
 .guest-hero-inner {
@@ -913,6 +992,12 @@ export default {
   padding: 56upx 8upx 0;
 }
 
+/* #ifdef MP-WEIXIN */
+.guest-hero-inner {
+  padding-top: 16upx;
+}
+/* #endif */
+
 .guest-hero-title {
   display: block;
   color: #161819;