From 99e1d51a98d41a1118f62f74d729c52ce8d47000 Mon Sep 17 00:00:00 2001
From: mixtan <424491071@qq.com>
Date: Sat, 19 Jul 2025 16:06:18 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E6=95=B0=E6=8D=AEUI=E7=BB=86?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/viewCenter/viewCenter.vue           | 131 ++++++++++--------
 java-mall-app-shop-admin/styles/myui.scss     |   7 +
 2 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/java-mall-app-shop-admin/pages/viewCenter/viewCenter.vue b/java-mall-app-shop-admin/pages/viewCenter/viewCenter.vue
index 62e879d..9b4803f 100644
--- a/java-mall-app-shop-admin/pages/viewCenter/viewCenter.vue
+++ b/java-mall-app-shop-admin/pages/viewCenter/viewCenter.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="view-container">
     <status-bar :backgroundColor="'#fff'" v-if="true"></status-bar>
-    <view class="item-content">
+    <view class="myui_card item-content">
       <view class="title">待办事处</view>
       <view class="item-list">
         <view class="item">
@@ -20,7 +20,7 @@
         </view>
       </view>
     </view>
-    <view class="order-content">
+    <view class="myui_card order-content">
       <view class="title">销量统计</view>
       <view class="order-list">
         <view class="order-item">
@@ -28,44 +28,47 @@
           <view class="order-item-num">{{ orderSalesAmoutInfo.today }}</view>
           <view class="order-bottom">
             昨日
-            {{
-              orderSalesAmoutInfo.daym2m && orderSalesAmoutInfo.daym2m > 0
-                ? "+"
-                : "-"
-            }}
-            {{
+            <text :class="[orderSalesAmoutInfo.daym2m && orderSalesAmoutInfo.daym2m > 0
+                ? 'up'
+                : 'down']">
+ {{
               orderSalesAmoutInfo.daym2m == null
-                ? "-"
+                ? "N/A"
                 : Number(orderSalesAmoutInfo.daym2m * 100).toFixed(0) + "%"
             }}
+            </text>
           </view>
         </view>
         <view class="order-item order-item-1">
           <view class="order-title">订单量</view>
           <view class="order-item-num">{{ orderNumInfo.today }}</view>
           <view class="order-bottom">
-            昨日{{ orderNumInfo.daym2m && orderNumInfo.daym2m > 0 ? "+" : "-" }}
-            {{
+            昨日
+            <text :class="[orderNumInfo.daym2m && orderNumInfo.daym2m > 0
+                ? 'up'
+                : 'down']">
+ {{
               orderNumInfo.daym2m == null
-                ? "-"
+                ? "N/A"
                 : Number(orderNumInfo.daym2m * 100).toFixed(0) + "%"
             }}
+            </text>
           </view>
         </view>
         <view class="order-item order-item-2">
           <view class="order-title">退货单数</view>
           <view class="order-item-num">{{ orderReturnNumInfo.today }}</view>
           <view class="order-bottom">
-            昨日{{
-              orderReturnNumInfo.daym2m && orderReturnNumInfo.daym2m > 0
-                ? "+"
-                : "-"
-            }}
-            {{
+            昨日
+             <text :class="[orderReturnNumInfo.daym2m && orderReturnNumInfo.daym2m > 0
+                ? 'up'
+                : 'down']">
+ {{
               orderReturnNumInfo.daym2m == null
-                ? "-"
+                ? "N/A"
                 : Number(orderReturnNumInfo.daym2m * 100).toFixed(0) + "%"
             }}
+            </text>
           </view>
         </view>
       </view>
@@ -166,28 +169,25 @@ export default {
   background: #fff;
 
   .item-content {
-    padding: 20rpx;
-    background: #fff;
-    border-radius: 12rpx;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-
     .item-list {
       display: flex;
       justify-content: space-around;
-      margin: 40rpx 0;
+      // margin: 40rpx 0;
 
       .item {
         text-align: center;
 
         .item-value {
-          margin-bottom: 16rpx;
-          font-size: 48rpx;
+          font-size: 56rpx;
           font-weight: bold;
+          color: #222;
+           font-family: math;
         }
 
         .item-title {
           min-width: 160rpx;
-          color: #b1b1b1;
+          color: #999;
+          font-size: 24rpx;
         }
       }
     }
@@ -195,23 +195,24 @@ export default {
 
   .title {
     position: relative;
-    padding-left: 20rpx; /* 给条状留出空间 */
+    // padding-left: 20rpx; /* 给条状留出空间 */
     font-size: 32rpx;
-    color: #333;
+    color: #222;
     font-weight: bold;
+    margin-bottom: 30rpx;
 
     /* 通过伪元素添加左侧条状 */
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 8rpx; /* 条状宽度 */
-      height: 32rpx; /* 条状高度 */
-      background-color: $base-color; /* 条状颜色 */
-      border-radius: 4rpx; /* 可选圆角 */
-    }
+    // &::before {
+    //   content: "";
+    //   position: absolute;
+    //   left: 0;
+    //   top: 50%;
+    //   transform: translateY(-50%);
+    //   width: 8rpx; /* 条状宽度 */
+    //   height: 32rpx; /* 条状高度 */
+    //   background-color: $base-color; /* 条状颜色 */
+    //   border-radius: 4rpx; /* 可选圆角 */
+    // }
   }
 
   .order-content {
@@ -219,42 +220,56 @@ export default {
 
     .order-list {
       display: flex;
-      margin: 40rpx 0;
+      // margin: 40rpx 0;
 
       .order-item {
         margin-right: 40rpx;
         padding: 12rpx;
         min-width: 26%;
-        border-radius: 12rpx;
-        background: #41e6f9;
-        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
-        color: #fff;
+        // border-radius: 12rpx;
+        // background: #41e6f9;
+        // box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
+        // color: #fff;
+        text-align: center;
 
         .order-title {
-          font-size: 24rpx;
+          font-size: 28rpx;
         }
 
         .order-item-num {
-          padding: 8rpx 0;
-          font-family: math;
-          text-align: center;
+          padding: 12rpx 0;
+          height: 56rpx;
+          font-size: 56rpx;
           font-weight: bold;
-          font-size: 44rpx;
+          font-family: math;
+          color: #222;
         }
 
+        .up{
+          color: #cf1322;
+        }
+        
+        .down{
+          color: #3f8600;
+        }
+        
+
         .order-bottom {
           font-size: 24rpx;
-          text-align: right;
+          color: #999;
+          display: flex;
+          gap: 4rpx;
+          justify-content: center;
         }
       }
 
-      .order-item-1 {
-        background: #de41f6;
-      }
+      // .order-item-1 {
+      //   background: #de41f6;
+      // }
 
-      .order-item-2 {
-        background: #6b7bfa;
-      }
+      // .order-item-2 {
+      //   background: #6b7bfa;
+      // }
     }
   }
 }
diff --git a/java-mall-app-shop-admin/styles/myui.scss b/java-mall-app-shop-admin/styles/myui.scss
index 3b4cb31..a8ce502 100644
--- a/java-mall-app-shop-admin/styles/myui.scss
+++ b/java-mall-app-shop-admin/styles/myui.scss
@@ -7,4 +7,11 @@
 
 .myui_btn_prev {
     margin-top: 20rpx;
+  }
+
+.myui_card{
+    padding: 30rpx 20rpx;
+    background: #fff;
+    border-radius: 12rpx;
+    box-shadow: 2rpx 2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
   }
\ No newline at end of file