【优化】客服订单卡片样式优化

Author: puhui999

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

@@ -13,7 +13,7 @@
       <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-no">订单号：{{ getMessageContent.no }}</div>
-          <div :class="formatOrderColor(getMessageContent)" class="order-state font-26">
+          <div :class="formatOrderColor(getMessageContent)" class="order-state font-16">
             {{ formatOrderStatus(getMessageContent) }}
           </div>
         </div>
@@ -26,7 +26,7 @@
             :title="item.spuName"
           />
         </div>
-        <div class="pay-box mt-30px flex justify-end pr-20px">
+        <div class="pay-box flex justify-end pr-20px">
           <div class="flex items-center">
             <div class="discounts-title pay-color"
               >共 {{ getMessageContent?.productCount }} 件商品,总金额:
@@ -108,23 +108,23 @@ function formatOrderStatus(order: any) {
   background-color: #e2e2e2;
 
   .order-card-header {
-    height: 80px;
+    height: 28px;
 
     .order-no {
-      font-size: 26px;
+      font-size: 16px;
       font-weight: 500;
     }
   }
 
   .pay-box {
     .discounts-title {
-      font-size: 24px;
+      font-size: 16px;
       line-height: normal;
       color: #999999;
     }
 
     .discounts-money {
-      font-size: 24px;
+      font-size: 16px;
       line-height: normal;
       color: #999;
       font-family: OPPOSANS;
@@ -134,34 +134,6 @@ function formatOrderStatus(order: any) {
       color: #333;
     }
   }
-
-  .order-card-footer {
-    height: 100px;
-
-    .more-item-box {
-      padding: 20px;
-
-      .more-item {
-        height: 60px;
-
-        .title {
-          font-size: 26px;
-        }
-      }
-    }
-
-    .more-btn {
-      color: #999999;
-      font-size: 24px;
-    }
-
-    .content {
-      width: 154px;
-      color: #333333;
-      font-size: 26px;
-      font-weight: 500;
-    }
-  }
 }
 
 .warning-color {

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

@@ -110,33 +110,26 @@ const skuString = computed(() => {
 </script>
 
 <style lang="scss" scoped>
-.score-img {
-  width: 36px;
-  height: 36px;
-  margin: 0 4px;
-}
-
 .ss-order-card-warp {
+  max-width: 60%;
   padding: 20px;
   border-radius: 10px;
   background-color: #e2e2e2;
 
   .img-box {
-    width: 164px;
-    height: 164px;
+    width: 80px;
+    height: 80px;
     border-radius: 10px;
     overflow: hidden;
 
     .order-img {
-      width: 164px;
-      height: 164px;
+      width: 80px;
+      height: 80px;
     }
   }
 
   .box-right {
     flex: 1;
-    // width: 500px;
-    // height: 164px;
     position: relative;
 
     .tool-box {
@@ -147,13 +140,13 @@ const skuString = computed(() => {
   }
 
   .title-text {
-    font-size: 28px;
+    font-size: 16px;
     font-weight: 500;
-    line-height: 40px;
+    line-height: 20px;
   }
 
   .spec-text {
-    font-size: 24px;
+    font-size: 16px;
     font-weight: 400;
     color: #999999;
     min-width: 0;
@@ -165,15 +158,15 @@ const skuString = computed(() => {
   }
 
   .price-text {
-    font-size: 24px;
+    font-size: 16px;
     font-weight: 500;
     font-family: OPPOSANS;
   }
 
   .total-text {
-    font-size: 24px;
+    font-size: 16px;
     font-weight: 400;
-    line-height: 24px;
+    line-height: 16px;
     color: #999999;
     margin-left: 8px;
   }