style(订单组件): 优化订单详情和商品条目的视觉样式

src/views/mallOrder/all/components/order-base-info.vue

@@ -62,7 +62,7 @@
                     </div>
                     <div class="info-item">
                         <span class="label">用户备注：</span>
-                        <span class="value">{{ detail.remark || '无' }}</span>
+                        <span class="value" :style="{ color: detail.remark ? '#f56c6c' : '' }">{{ detail.remark || '无' }}</span>
                     </div>
                     <div class="info-item warning-text" v-if="detail.shortageNote">
                         <span class="label" style="color: #f56c6c;">如遇缺货：</span>

src/views/mallOrder/all/components/order-item.vue

@@ -19,9 +19,9 @@
                     v-if="order.orderFrom == 1 || order.orderFrom == 2"
                     style="width: 16px; height: 16px; margin-left: 4px; vertical-align: text-bottom;" />
             </span>
-            <span class="flag-icon" v-if="order.flag"><el-icon>
+            <span class="flag-icon"><el-icon size="23">
                     <Flag />
-                </el-icon></span>
+            </el-icon></span>
             <span class="urge-tag" v-if="order.isUrge">催发货</span>
         </div>
 
@@ -40,9 +40,10 @@
                                 </el-icon> (品相: {{ getConditionText(product.conditionType) }})
                             </div>
                             <div class="product-tags">
-                                <span class="tag">回收折扣: {{ product.discount || 1 }}折</span>
-                                <span class="tag success">(回收状态: {{ getRecycleStatusText(product.recycleStatus)
-                                }})</span>
+                                <span class="tag">回收折扣: <span style="color: #67c23a; font-weight: bold;">{{
+                                        product.discount || 1 }}折</span></span>
+                                <span class="tag">(回收状态: <span style="color: #67c23a; font-weight: bold;">{{
+                                        getRecycleStatusText(product.recycleStatus) }}</span>)</span>
                             </div>
                         </div>
                     </div>
@@ -92,13 +93,13 @@
 
 <script setup>
     import { Flag, CopyDocument } from '@element-plus/icons-vue';
-import { EleMessage } from 'ele-admin-plus/es';
-import { useClipboard } from '@vueuse/core';
-import wxIcon from '@/assets/wx.png';
-import alipayIcon from '@/assets/alipay.png';
-import { formatPhone } from '@/utils/common';
+    import { EleMessage } from 'ele-admin-plus/es';
+    import { useClipboard } from '@vueuse/core';
+    import wxIcon from '@/assets/wx.png';
+    import alipayIcon from '@/assets/alipay.png';
+    import { formatPhone } from '@/utils/common';
 
-const props = defineProps({
+    const props = defineProps({
         order: {
             type: Object,
             required: true
@@ -120,7 +121,7 @@ const props = defineProps({
 
     const getDetailStatusText = (status) => {
         const map = {
-            '1': '正常',
+            '1': '',
             '2': '退款中',
             '3': '已退款'
         };
@@ -285,10 +286,10 @@ const props = defineProps({
     }
 
     .buyer-note {
-        background-color: #fff8e6;
+        background-color: #fef0f0;
         padding: 8px 20px;
-        color: #e6a23c;
-        border-top: 1px solid #faecd8;
+        color: #f56c6c;
+        border-top: 1px solid #fde2e2;
     }
 
     .text-blue {
@@ -300,7 +301,7 @@ const props = defineProps({
     }
 
     .flag-icon {
-        color: #f56c6c;
+        color: #aaa;
         margin-left: 10px;
     }
 
@@ -309,16 +310,16 @@ const props = defineProps({
         color: #fff;
         padding: 2px 6px;
         border-radius: 4px;
-        font-size: 12px;
+        font-size: 13px;
         margin-left: 10px;
     }
 
     .tag {
-        background-color: #f0f2f5;
-        padding: 2px 6px;
+        padding: 2px 0;
         border-radius: 4px;
         margin-right: 5px;
-        font-size: 12px;
+        font-size: 13px;
+        font-weight: 400;
     }
 
     .tag.success {

src/views/mallOrder/all/index.vue

@@ -4,7 +4,7 @@
 
         <ele-card :body-style="{ padding: '10px 16px' }">
             <!-- Tabs -->
-            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+            <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
                 <el-tab-pane label="全部订单状态" name="all" />
                 <el-tab-pane v-for="item in shop_order_status" :key="item.dictValue" :label="item.dictLabel" :name="item.dictValue" />
             </el-tabs>