【页面优化】优化商城相关页面的黑暗模式适配问题，临时优化客服的页面

src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="isObject(getMessageContent)">
     <div :key="getMessageContent.id" class="order-list-card-box mt-14px">
-      <div class="order-card-header flex items-center justify-between p-x-20px">
+      <div class="order-card-header flex items-center justify-between p-x-5px">
         <div class="order-no">订单号：{{ getMessageContent.no }}</div>
         <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
           {{ formatOrderStatus(getMessageContent) }}
@@ -16,7 +16,7 @@
           :title="item.spuName"
         />
       </div>
-      <div class="pay-box flex justify-end pr-20px">
+      <div class="pay-box flex justify-end pr-5px">
         <div class="flex items-center">
           <div class="discounts-title pay-color"
             >共 {{ getMessageContent?.productCount }} 件商品,总金额:
@@ -97,18 +97,21 @@ function formatOrderStatus(order: any) {
 .order-list-card-box {
   border-radius: 10px;
   padding: 10px;
-  background-color: #e2e2e2;
+  border: 1px #6a6a6a solid;
+  background-color: var(--app-content-bg-color);
 
   .order-card-header {
     height: 28px;
 
     .order-no {
-      font-size: 16px;
+      font-size: 10px;
       font-weight: 500;
     }
   }
 
   .pay-box {
+    padding-top: 10px;
+
     .discounts-title {
       font-size: 16px;
       line-height: normal;
@@ -123,24 +126,33 @@ function formatOrderStatus(order: any) {
     }
 
     .pay-color {
-      color: #333;
+      font-size: 13px;
+      color: var(--left-menu-text-color);
     }
   }
 }
 
 .warning-color {
   color: #faad14;
+  font-size: 11px;
+  font-weight: bold;
 }
 
 .danger-color {
   color: #ff3000;
+  font-size: 11px;
+  font-weight: bold;
 }
 
 .success-color {
   color: #52c41a;
+  font-size: 11px;
+  font-weight: bold;
 }
 
 .info-color {
   color: #999999;
+  font-size: 11px;
+  font-weight: bold;
 }
 </style>