Browse Source

排版优化

shish 6 months ago
parent
commit
c372b3b026
2 changed files with 78 additions and 64 deletions
  1. 1 0
      hdApp/src/admin/goods/category.vue
  2. 77 64
      hdApp/src/admin/home/workbench.vue

+ 1 - 0
hdApp/src/admin/goods/category.vue

@@ -339,6 +339,7 @@ export default {
   border-radius: 12rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  margin-bottom:60upx;
 }
 
 // 列表项

+ 77 - 64
hdApp/src/admin/home/workbench.vue

@@ -104,56 +104,54 @@
         <!-- 花束 -->
         <view class="flower-section">
           <view class="section-header">
-            <view class="header-line"></view>
-            <view class="header-title">绿植花束</view>
-            <view class="header-line"></view>
+            <view class="header-title">🌹 绿植花束</view>
           </view>
           <view class="icon-grid">
             <view class="icon-item" @click="goPage({url: '/admin/cg/mall'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">🏪</view>
               </view>
               <view class="icon-text">商城</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/work/list'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">✅</view>
               </view>
               <view class="icon-text">任务</view>
             </view>
             <view class="icon-item" @click="goHsKd">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/pandian2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">📝</view>
               </view>
               <view class="icon-text">开单</view>
             </view>
             <view class="icon-item" @click="goHsKjKd">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/pandian2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">⚡</view>
               </view>
               <view class="icon-text">快捷开单</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/goods/category'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/hcgl2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">📂</view>
               </view>
               <view class="icon-text">分类</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/goods/categorySort'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/hcgl2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">↕️</view>
               </view>
               <view class="icon-text">排序</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/goods/list'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/hcgl2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">🌸</view>
               </view>
               <view class="icon-text">绿植花束</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/goods/add'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/hcgl2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">➕</view>
               </view>
               <view class="icon-text">新增</view>
             </view>
@@ -163,127 +161,122 @@
         <!-- 花材 -->
         <view class="flower-section">
           <view class="section-header">
-            <view class="header-line"></view>
-            <view class="header-title">花材</view>
-            <view class="header-line"></view>
+            <view class="header-title">🌿 花材</view>
           </view>
           <view class="icon-grid">
             <view class="icon-item" @click="goPage({url: '/admin/cg/item'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">🏪</view>
               </view>
               <view class="icon-text">商城</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/item/list2'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/hcgl2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">🌿</view>
               </view>
               <view class="icon-text">花材</view>
             </view>
             <view class="icon-item" @click="goItemKd()">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/pandian2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">📝</view>
               </view>
               <view class="icon-text">开单</view>
             </view>
             <view class="icon-item" @click="goItemKjKd()">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/pandian2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">⚡</view>
               </view>
               <view class="icon-text">快捷开单</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/part/list'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/kcyjs2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">✂️</view>
               </view>
               <view class="icon-text">拆散</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/changePrice/list2'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/gj2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">💰</view>
               </view>
               <view class="icon-text">改价</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/pagesPurchase/shopping'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/icon_caigou2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">📊</view>
               </view>
               <view class="icon-text">买花记录</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/pagesPurchase/order'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/icon_ghs2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">🛍️</view>
               </view>
               <view class="icon-text">买花</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/breakage/list'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/kcyjs2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">🗑️</view>
               </view>
               <view class="icon-text">报损</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/itemClass/list'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/hcgl2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">📂</view>
               </view>
               <view class="icon-text">分类</view>
             </view>
           </view>
         </view>
 
+        <!-- 更多 -->
         <view class="flower-section">
           <view class="section-header">
-            <view class="header-line"></view>
-            <view class="header-title">更多</view>
-            <view class="header-line"></view>
+            <view class="header-title">⚙️ 更多功能</view>
           </view>
           <view class="icon-grid">
-            <view class="icon-item" @click.stop="">
+            <view class="icon-item" @click="goPage({url: '/admin/order/expend'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/dbck2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">💰</view>
               </view>
               <view class="icon-text">支出</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/staff/list'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/yggl2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">👥</view>
               </view>
               <view class="icon-text">员工</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/stat/profit'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/jyzk2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">📈</view>
               </view>
               <view class="icon-text">利润表</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/picText/picTextList'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/kcyjs2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">🖼️</view>
               </view>
               <view class="icon-text">图文</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/order/scanPay'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/kcyjs2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">📱</view>
               </view>
               <view class="icon-text">收款码流水</view>
             </view>
             <view class="icon-item" @click="goPage({url: '/admin/cg/code'})">
               <view class="icon-wrapper">
-                <image class="icon-image" :src="`${constant.hostUrl}/image/ghs/home/shop2.png`" mode="aspectFit"></image>
+                <view class="icon-emoji">💳</view>
               </view>
               <view class="icon-text">收款码</view>
             </view>
           </view>
         </view>
-
-
       </view>
 
       <template v-if="lookMoney == 1">
         <view class="module-com overview-module">
           <view class="overview-header">
-            <view class="overview-title">总览</view>
+            <view class="overview-title">📊 数据总览</view>
           </view>
           <view class="overview-grid">
             <view class="overview-item" v-for="(item, index) in overview" :key="index" @click="pageTo(item)">
@@ -1154,6 +1147,9 @@ export default {
   background-color: #fff;
 }
 
+// 功能网格部分 - 删除
+
+
 // 今日概况卡片
 .today-overview-card {
   background: linear-gradient(to right, #1ba85e 0%, #22C55E 50%, #16A34A 100%);
@@ -1455,67 +1451,84 @@ export default {
   padding: 0;
   
   .flower-section {
-    padding: 30upx 20upx;
+    padding: 24upx 20upx;
+    background: #ffffff;
+    border-bottom: 12upx solid #f5f5f5;
     
-
+    &:last-child {
+      border-bottom: none;
+    }
     
     .section-header {
       display: flex;
       align-items: center;
-      justify-content: center;
-      margin-bottom: 30upx;
+      justify-content: flex-start;
+      margin-bottom: 24upx;
+      padding-left: 0;
       
       .header-line {
-        flex: 1;
-        height: 1upx;
-        background: linear-gradient(to right, transparent, #e0e0e0);
-        
-        &:last-child {
-          background: linear-gradient(to left, transparent, #e0e0e0);
-        }
+        display: none;
       }
       
       .header-title {
-        padding: 0 30upx;
-        font-size: 32upx;
-        font-weight: 600;
+        padding: 0;
+        font-size: 28upx;
+        font-weight: 700;
         color: #333;
+        letter-spacing: 1upx;
       }
     }
     
     .icon-grid {
-      display: flex;
-      flex-wrap: wrap;
-      margin: -10upx;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16upx;
+      max-width: 100%;
       
       .icon-item {
-        width: 25%;
-        padding: 10upx;
+        width: 100%;
+        padding: 12upx;
         text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8upx;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.95);
+        }
         
         .icon-wrapper {
-          width: 120upx;
-          height: 120upx;
-          margin: 0 auto 4upx;
+          width: 100upx;
+          height: 100upx;
           display: flex;
           align-items: center;
           justify-content: center;
+          background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+          border-radius: 20upx;
           transition: all 0.3s ease;
           
           &:active {
-            transform: scale(0.95);
+            background: linear-gradient(135deg, #e0f2fe 0%, #d1e7f5 100%);
+          }
+          
+          .icon-emoji {
+            font-size: 48upx;
+            line-height: 1;
           }
           
           .icon-image {
-            width: 95upx;
-            height: 95upx;
+            width: 85upx;
+            height: 85upx;
           }
         }
         
         .icon-text {
-          font-size: 26upx;
+          font-size: 22upx;
           color: #333;
-          line-height: 1.2;
+          line-height: 1.3;
+          font-weight: 500;
         }
       }
     }