更新

hdApp/src/admin/home/apply.vue

@@ -113,15 +113,18 @@ export default {
     }
 
     .icon-grid {
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
-      row-gap: 34upx;
-      column-gap: 10upx;
+      display: flex;
+      flex-wrap: wrap;
+      margin-right: -16upx;
+      margin-bottom: -34upx;
       max-width: 100%;
 
       .icon-item {
-        width: 100%;
-        padding: 0;
+        width: 25%;
+        min-width: 0;
+        padding: 0 16upx 0 0;
+        margin-bottom: 34upx;
+        box-sizing: border-box;
         text-align: center;
         display: flex;
         flex-direction: column;
@@ -129,16 +132,19 @@ export default {
         border-radius: 12upx;
 
         .icon-wrapper {
-          width: 86upx;
-          height: 86upx;
+          width: 96upx;
+          height: 96upx;
           box-sizing: border-box;
-          padding-top: 6upx;
-          padding-bottom: 6upx;
-          margin-bottom: 8upx;
+          margin-bottom: 12upx;
           line-height: 0;
           display: flex;
           align-items: center;
           justify-content: center;
+          background: linear-gradient(135deg, #e9f8f3 0%, #f2f6fc 100%);
+          border-radius: 18upx;
+          box-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.06), 0 4upx 12upx rgba(0, 0, 0, 0.04);
+          padding-top: 10upx;
+          padding-bottom: 6upx;
 
           .menu-icon-img {
             display: block;
@@ -146,23 +152,20 @@ export default {
             height: 56upx;
           }
 
-          background: linear-gradient(135deg, #e9fff4 0%, #f3f7ff 100%);
-          border-radius: 20upx;
-          box-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.06), 0 4upx 12upx rgba(0, 0, 0, 0.04);
-
           .icon-empty {
-            width: 28px;
-            height: 28px;
+            width: 56upx;
+            height: 56upx;
             border-radius: 16upx;
             background: rgba(9, 197, 103, 0.12);
           }
         }
 
         .icon-text {
-          font-size: 24upx;
-          color: #4e5560;
-          line-height: 1.4;
+          font-size: 25upx;
+          color: #202733;
+          line-height: 32upx;
           font-weight: 500;
+          text-align: center;
         }
       }
     }

hdApp/src/admin/home/mall.vue

@@ -79,7 +79,7 @@
           <view class="header-title">快捷操作</view>
           <view class="edit-btn" @click="openMenuEditor('quickMenus')">编辑</view>
         </view>
-        <view class="home-menu-grid quick-grid">
+        <view class="home-menu-grid">
           <view class="home-menu-item" v-for="item in quickMenuList" :key="item.key" @click="handleMenuTap(item)">
             <view class="home-icon-box">
               <image
@@ -102,7 +102,7 @@
             <view class="edit-btn" @click="openMenuEditor('flowerMenus')">编辑</view>
           </view>
         </view>
-        <view class="home-menu-grid five-grid">
+        <view class="home-menu-grid">
           <view class="home-menu-item" v-for="item in flowerMenuList" :key="item.key" @click="handleMenuTap(item)">
             <view class="home-icon-box">
               <image
@@ -125,7 +125,7 @@
             <view class="edit-btn" @click="openMenuEditor('plantMenus')">编辑</view>
           </view>
         </view>
-        <view class="home-menu-grid five-grid">
+        <view class="home-menu-grid">
           <view class="home-menu-item" v-for="item in plantMenuList" :key="item.key" @click="handleMenuTap(item)">
             <view class="home-icon-box">
               <image
@@ -160,12 +160,12 @@
           <view class="header-title"><view class="title-inline-icon"><image class="title-icon-img" :src="iconSrc('settings-filled')" mode="aspectFit" /></view><text>更多功能</text></view>
           <view class="all-btn" @click="goPage({url: '/admin/home/apply'})">更多</view>
         </view>
-        <view class="home-menu-grid more-grid">
+        <view class="home-menu-grid">
           <view class="home-menu-item" v-for="item in moreMenuList" :key="item.key" @click="handleMenuTap(item)">
-            <view class="home-icon-box small-icon-box">
+            <view class="home-icon-box">
               <image
                 v-if="item.icon"
-                class="more-menu-icon-img"
+                class="home-menu-icon-img"
                 :src="iconSrc(item.icon)"
                 mode="aspectFit"
               />
@@ -837,36 +837,28 @@ export default {
 }
 
 .home-menu-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  row-gap: 28upx;
-  column-gap: 12upx;
-}
-
-.quick-grid {
-  grid-template-columns: repeat(5, 1fr);
-}
-
-.five-grid {
-  grid-template-columns: repeat(5, 1fr);
-}
-
-.more-grid {
-  grid-template-columns: repeat(4, 1fr);
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -16upx;
+  margin-bottom: -28upx;
 }
 
 .home-menu-item {
+  width: 25%;
   min-width: 0;
+  margin-bottom: 28upx;
+  padding-right: 16upx;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .home-icon-box {
-  width: 78upx;
-  height: 78upx;
+  width: 96upx;
+  height: 96upx;
   border-radius: 18upx;
-  background: linear-gradient(135deg, #e9fff4 0%, #f3f7ff 100%);
+  background: linear-gradient(135deg, #e9f8f3 0%, #f2f6fc 100%);
   box-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.06), 0 4upx 12upx rgba(0, 0, 0, 0.04);
   display: flex;
   align-items: center;
@@ -877,37 +869,18 @@ export default {
   line-height: 0;
 }
 
-.quick-menu-icon-img {
-  display: block;
-  width: 68upx;
-  height: 68upx;
-}
-
+.quick-menu-icon-img,
 .home-menu-icon-img {
   display: block;
-  width: 64upx;
-  height: 64upx;
-}
-
-.more-menu-icon-img {
-  display: block;
-  width: 44upx;
-  height: 44upx;
-}
-
-.small-icon-box {
-  width: 58upx;
-  height: 58upx;
-  border-radius: 14upx;
-  padding-top: 8upx;
-  padding-bottom: 3upx;
+  width: 56upx;
+  height: 56upx;
 }
 
 .home-menu-text {
   width: 100%;
-  margin-top: 8upx;
+  margin-top: 12upx;
   font-size: 25upx;
-  line-height: 1.25;
+  line-height: 32upx;
   color: #202733;
   text-align: center;
 }