订单

src/views/order/afterSale/index.vue

@@ -30,19 +30,17 @@
             ><el-icon><Search /></el-icon
           ></template>
         </el-input>
-        <el-date-picker
-          v-model="queryParams.dateRange"
-          type="daterange"
-          range-separator="—"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          style="width: 240px"
-        />
-      </div>
-
-      <div class="filter-bar">
-        <span class="filter-label">状态</span>
-        <el-select v-model="queryParams.status" placeholder="请选择" style="width: 100px" clearable>
+        <div style="width: 240px">
+          <el-date-picker
+            v-model="queryParams.dateRange"
+            type="daterange"
+            range-separator="—"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            style="width: 240px"
+          />
+        </div>
+        <el-select v-model="queryParams.status" placeholder="状态" style="width: 240px" clearable>
           <el-option label="申请中" value="0" />
           <el-option label="已退货" value="1" />
           <el-option label="已拒绝" value="2" />

src/views/order/orderAudit/index.vue

@@ -10,41 +10,34 @@
 
     <!-- 搜索栏 -->
     <div class="search-bar">
-      <el-input v-model="queryParams.keyword" placeholder="搜索" style="width: 150px" clearable>
+      <el-input v-model="queryParams.keyword" placeholder="搜索" style="width: 240px" clearable>
         <template #prefix>
           <el-icon><Search /></el-icon>
         </template>
       </el-input>
-      <el-date-picker
-        v-model="queryParams.dateRange"
-        type="daterange"
-        range-separator="—"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        style="width: 240px"
-      />
-    </div>
+      <div style="width: 240px">
+        <el-date-picker
+          v-model="queryParams.dateRange"
+          type="daterange"
+          range-separator="—"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 240px"
+        />
+      </div>
 
-    <!-- 筛选栏 -->
-    <div class="filter-bar">
-      <span class="filter-label">下单部门</span>
       <el-tree-select
         v-model="queryParams.department"
-        style="width: 100px"
+        style="width: 240px"
         :data="deptList"
         :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
         value-key="deptId"
-        placeholder="请选择"
+        placeholder="下单部门"
         check-strictly
         :render-after-expand="false"
         clearable
       >
       </el-tree-select>
-      <!-- <span class="filter-label">筛选</span>
-      <el-select v-model="queryParams.filter1" placeholder="请选择" style="width: 100px" clearable>
-        <el-option label="条件1" value="1" />
-        <el-option label="条件2" value="2" />
-      </el-select> -->
     </div>
 
     <!-- 订单列表 -->
@@ -92,7 +85,7 @@
             </div>
             <div class="product-cell amount-cell">
               <div class="amount-info">
-                <span class="label">支付款</span>
+                <span class="label">支付款:</span>
                 <span class="value highlight">¥{{ order.payableAmount }}</span>
               </div>
               <div class="amount-info">
@@ -114,7 +107,7 @@
             </div>
             <div class="product-cell action-cell">
               <template v-if="activeMainTab === 'myAudit' && order.checkStatus === '0'">
-                <el-button type="primary" link size="small" @click="handleApprove(order)">同意</el-button>
+                <el-button type="success" link size="small" @click="handleApprove(order)">同意</el-button>
                 <el-button type="danger" link size="small" @click="handleReject(order)">拒绝</el-button>
               </template>
               <template v-if="activeMainTab === 'myApply' && order.checkStatus === '0'">
@@ -544,7 +537,7 @@ const handleSubmitAudit = async () => {
       }
 
       .amount-cell {
-        width: 120px;
+        width: 150px;
         border-left: 1px solid #f5f5f5;
 
         .amount-info {
@@ -552,6 +545,7 @@ const handleSubmitAudit = async () => {
           .label {
             font-size: 12px;
             color: #999;
+            margin-right: 5px;
           }
           .value {
             font-size: 14px;
@@ -597,7 +591,7 @@ const handleSubmitAudit = async () => {
         width: 100px;
         border-left: 1px solid #f5f5f5;
         // align-items: flex-start;
-        gap: 5px;
+        // gap: 5px;
       }
     }
   }

src/views/order/orderEvaluation/index.vue

@@ -4,56 +4,65 @@
     <StatusTabs v-model="activeMainTab" :tabs="mainTabs" type="line" />
 
     <div class="search-bar">
-      <el-input v-model="queryParams.keyword" placeholder="搜索" style="width: 150px" clearable>
+      <el-input v-model="queryParams.keyword" placeholder="搜索" style="width: 260px" clearable>
         <template #prefix
           ><el-icon><Search /></el-icon
         ></template>
       </el-input>
-      <el-date-picker
-        v-model="queryParams.dateRange"
-        type="daterange"
-        range-separator="—"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        style="width: 240px"
-      />
+      <div style="width: 260px">
+        <el-date-picker
+          v-model="queryParams.dateRange"
+          type="daterange"
+          range-separator="—"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 260px"
+        />
+      </div>
     </div>
 
     <div class="filter-bar">
-      <span class="filter-label">下单部门</span>
+      <!-- <span class="filter-label">下单部门</span> -->
       <el-tree-select
         v-model="queryParams.department"
-        style="width: 100px"
+        style="width: 160px"
         :data="deptList"
         :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
         value-key="deptId"
-        placeholder="请选择"
+        placeholder="下单部门"
         check-strictly
         :render-after-expand="false"
         clearable
       >
       </el-tree-select>
-      <span class="filter-label">状态</span>
-      <el-select v-model="queryParams.status" placeholder="请选择" style="width: 100px" clearable>
+      <!-- <span class="filter-label">状态</span> -->
+      <el-select v-model="queryParams.status" placeholder="状态" style="width: 160px" clearable>
         <el-option v-for="dict in order_status" :key="dict.value" :label="dict.label" :value="dict.value" />
       </el-select>
-      <span class="filter-label">支付方式</span>
-      <el-select v-model="queryParams.payType" placeholder="请选择" style="width: 100px" clearable>
+      <!-- <span class="filter-label">支付方式</span> -->
+      <el-select v-model="queryParams.payType" placeholder="支付方式" style="width: 160px" clearable>
         <el-option v-for="dict in pay_method" :key="dict.value" :label="dict.label" :value="dict.value" />
       </el-select>
     </div>
 
     <div class="order-list">
       <div v-for="(order, orderIndex) in orderList" :key="orderIndex" class="order-card">
-        <div class="order-header">
-          <span class="order-time">{{ order.orderTime }}</span>
-          <span class="order-no">订单号：{{ order.orderNo }}</span>
-          <el-button type="primary" link class="expand-btn" @click="order.expanded = !order.expanded"
-            >{{ order.expanded ? '收起' : '展开' }} <el-icon><ArrowRight /></el-icon
-          ></el-button>
-          <el-button type="primary" link class="detail-btn" @click="handleViewDetail(order)"
-            >订单详情 <el-icon><ArrowRight /></el-icon
-          ></el-button>
+        <div class="order-header flex-row-between">
+          <div class="flex-row-start">
+            <span class="order-time">{{ order.orderTime }}</span>
+            <span class="order-no">订单号：{{ order.orderNo }}</span>
+          </div>
+          <div class="flex-row-start">
+            <div class="expand-btn" @click="handleViewDetail(order)">
+              <span style="margin-right: 5px; margin-bottom: 2px">订单详情</span>
+              <el-icon><ArrowRight /></el-icon>
+            </div>
+            <div class="open-btn" v-if="order.products && order.products.length > 1" @click="order.expanded = !order.expanded">
+              <span style="margin-right: 5px"> {{ order.expanded ? '收起' : '展开' }}</span>
+              <el-icon v-if="order.expanded"><ArrowUp /></el-icon>
+              <el-icon v-else><ArrowDown /></el-icon>
+            </div>
+          </div>
         </div>
         <div class="product-list">
           <div
@@ -61,7 +70,7 @@
             :key="productIndex"
             class="product-row"
           >
-            <div class="product-cell product-info-cell">
+            <div class="product-info-cell">
               <div class="product-image">
                 <el-image :src="product.image" fit="contain">
                   <template #error
@@ -71,27 +80,27 @@
                 </el-image>
               </div>
               <div class="product-detail">
-                <div class="product-name">{{ product.name }}</div>
-                <div class="product-spec">{{ product.spec1 }} {{ product.spec2 }}</div>
+                <div class="product-name ellipsis">{{ product.name }}</div>
+                <div class="product-spec">{{ product.spec1 }} | {{ product.spec2 }}</div>
                 <div class="product-price">¥{{ product.price }}</div>
               </div>
               <div class="product-quantity">x{{ product.quantity }}</div>
             </div>
-            <div class="product-cell amount-cell" v-if="productIndex === 0">
+            <div class="amount-cell" v-if="productIndex === 0">
               <div class="amount-info">
-                <span class="label">支付款</span><span class="value highlight">¥{{ order.payAmount }}</span>
+                <span class="label">支付款：</span><span class="value highlight">¥{{ order.payAmount }}</span>
               </div>
               <div class="amount-info">
                 <span class="label">{{ order.payMethod }}</span>
               </div>
             </div>
-            <div class="product-cell status-cell" v-if="productIndex === 0">
+            <div class="status-cell" v-if="productIndex === 0">
               <span class="status-text success">{{ order.statusText }}</span>
             </div>
-            <div class="product-cell action-cell" v-if="productIndex === 0">
-              <el-button v-if="activeMainTab === '0'" type="primary" link size="small" @click="handleEvaluate(order)">评价</el-button>
-              <el-button v-if="activeMainTab === '1'" type="primary" link size="small" @click="handleFollowUpEvaluate(order)">追评</el-button>
-              <el-button v-if="activeMainTab === '2'" type="primary" link size="small" @click="handleViewEvaluation(order)">查看评价</el-button>
+            <div class="action-cell" v-if="productIndex === 0">
+              <el-button v-if="activeMainTab === '0'" type="primary" link @click="handleEvaluate(order)">评价</el-button>
+              <el-button v-if="activeMainTab === '1'" type="primary" link @click="handleFollowUpEvaluate(order)">追评</el-button>
+              <el-button v-if="activeMainTab === '2'" type="primary" link @click="handleViewEvaluation(order)">查看评价</el-button>
             </div>
           </div>
           <!-- 显示更多商品提示 -->
@@ -396,6 +405,7 @@ onMounted(() => {
   background: #fff;
   min-height: 100%;
   width: 100%;
+  margin-bottom: 20px;
 }
 .search-bar {
   display: flex;
@@ -428,6 +438,16 @@ onMounted(() => {
       border-bottom: 1px solid #eee;
       font-size: 13px;
       color: #666;
+      .open-btn {
+        color: #364153;
+        margin-left: 10px;
+        cursor: pointer;
+      }
+      .expand-btn {
+        color: #165dff;
+        margin-left: 10px;
+        cursor: pointer;
+      }
       .order-time {
         color: #333;
       }
@@ -454,9 +474,9 @@ onMounted(() => {
         justify-content: center;
       }
       .product-info-cell {
+        display: flex;
         flex: 1;
-        flex-direction: row;
-        align-items: center;
+        padding: 15px;
         gap: 15px;
         .product-image {
           width: 80px;
@@ -483,12 +503,11 @@ onMounted(() => {
             font-size: 14px;
             color: #333;
             margin-bottom: 5px;
-            line-height: 1.4;
           }
           .product-spec {
             font-size: 12px;
             color: #999;
-            margin-bottom: 5px;
+            margin-bottom: 10px;
           }
           .product-price {
             font-size: 16px;
@@ -502,8 +521,8 @@ onMounted(() => {
         }
       }
       .amount-cell {
-        width: 120px;
-        border-left: 1px solid #f5f5f5;
+        width: 200px;
+        padding: 15px;
         .amount-info {
           margin-bottom: 5px;
           .label {
@@ -523,8 +542,8 @@ onMounted(() => {
       }
       .status-cell {
         width: 80px;
-        border-left: 1px solid #f5f5f5;
         align-items: center;
+        padding: 15px;
         .status-text {
           font-size: 13px;
           font-weight: 500;
@@ -534,8 +553,8 @@ onMounted(() => {
         }
       }
       .action-cell {
+        padding: 15px;
         width: 80px;
-        border-left: 1px solid #f5f5f5;
         align-items: center;
       }
     }

src/views/order/orderManage/detail.vue

@@ -244,6 +244,7 @@ const handleBack = () => {
 
 <style scoped lang="scss">
 .order-detail-container {
+  flex: 1;
   background: #f5f5f5;
   min-height: 100%;
 }

src/views/order/orderManage/index.vue

@@ -2,64 +2,71 @@
   <div class="order-manage-container">
     <div class="page-title"><i class="title-bar"></i><span>订单管理</span></div>
     <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-input v-model="queryParams.keyword" placeholder="搜索订单号" style="width: 200px" clearable @keyup.enter="handleQuery">
-        <template #prefix
-          ><el-icon><Search /></el-icon
-        ></template>
-      </el-input>
-      <el-date-picker
-        v-model="queryParams.dateRange"
-        type="daterange"
-        range-separator="—"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        style="width: 240px"
-      />
-      <el-button type="primary" @click="handleQuery">搜索</el-button>
-      <el-button @click="handleReset">重置</el-button>
+    <div class="flex-row-between">
+      <div class="flex-row-start">
+        <el-input v-model="queryParams.keyword" placeholder="搜索订单号" style="width: 260px" clearable @keyup.enter="handleQuery">
+          <template #prefix
+            ><el-icon><Search /></el-icon
+          ></template>
+        </el-input>
+        <el-date-picker
+          v-model="queryParams.dateRange"
+          type="daterange"
+          range-separator="—"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 260px; margin-left: 10px"
+        />
+      </div>
+      <div>
+        <el-button type="primary" @click="handleQuery">搜索</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </div>
     </div>
-    <!-- 筛选栏 -->
-    <div class="filter-bar">
-      <span class="filter-label">下单部门</span>
-      <el-tree-select
-        v-model="queryParams.department"
-        style="width: 100px"
-        :data="deptList"
-        :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
-        value-key="deptId"
-        placeholder="请选择"
-        check-strictly
-        :render-after-expand="false"
-        clearable
-      >
-      </el-tree-select>
-      <span class="filter-label">状态</span>
-      <el-select v-model="queryParams.status" placeholder="请选择" style="width: 100px" clearable>
-        <el-option v-for="dict in order_status" :key="dict.value" :label="dict.label" :value="dict.value" />
-      </el-select>
-      <span class="filter-label">支付方式</span>
-      <el-select v-model="queryParams.payType" placeholder="请选择" style="width: 100px" clearable
-        ><el-option v-for="dict in pay_method" :key="dict.value" :label="dict.label" :value="dict.value"
-      /></el-select>
-      <div class="filter-right">
-        <el-dropdown
-          ><el-button
-            >订单导出 <el-icon><ArrowDown /></el-icon></el-button
-          ><template #dropdown
-            ><el-dropdown-menu><el-dropdown-item>导出Excel</el-dropdown-item><el-dropdown-item>导出PDF</el-dropdown-item></el-dropdown-menu></template
-          ></el-dropdown
+    <div class="flex-row-between" style="margin-top: 10px">
+      <div class="flex-row-start">
+        <el-tree-select
+          v-model="queryParams.department"
+          style="width: 160px"
+          :data="deptList"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="deptId"
+          placeholder="下单部门"
+          check-strictly
+          :render-after-expand="false"
+          clearable
         >
-        <el-dropdown
-          ><el-button
-            >订单打印 <el-icon><ArrowDown /></el-icon></el-button
-          ><template #dropdown
+        </el-tree-select>
+        <el-select v-model="queryParams.status" placeholder="状态" style="width: 160px; margin-left: 10px" clearable>
+          <el-option v-for="dict in order_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+        <el-select v-model="queryParams.payType" placeholder="支付方式" style="width: 160px; margin-left: 10px" clearable
+          ><el-option v-for="dict in pay_method" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </div>
+      <div class="flex-row-start">
+        <el-dropdown>
+          <el-button
+            >订单导出 <el-icon><ArrowDown /></el-icon
+          ></el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item>导出Excel</el-dropdown-item>
+              <el-dropdown-item>导出PDF</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown style="margin-left: 10px">
+          <el-button
+            >订单打印 <el-icon><ArrowDown /></el-icon
+          ></el-button>
+          <template #dropdown
             ><el-dropdown-menu
               ><el-dropdown-item>打印订单</el-dropdown-item><el-dropdown-item>打印发货单</el-dropdown-item></el-dropdown-menu
             ></template
-          ></el-dropdown
-        >
-        <el-button>下载电子签单</el-button>
+          >
+        </el-dropdown>
+        <el-button style="margin-left: 10px">下载电子签单</el-button>
       </div>
     </div>
     <!-- Tab切换 -->
@@ -76,29 +83,27 @@
     <!-- 订单列表 -->
     <div class="order-list">
       <div v-for="order in orderList" :key="order.id" class="order-card">
-        <div class="order-header">
-          <el-checkbox v-model="order.checked" @change="handleOrderCheck" />
-          <span class="order-time">{{ order.orderTime }}</span>
-          <span class="order-info">订单号：{{ order.orderNo }}</span>
-          <span class="order-info">下单人：{{ order.orderPerson }}</span>
-          <span class="order-info">部门：{{ order.department }}</span>
-          <el-button
-            class="expand-btn"
-            v-for="action in getOrderActions(order)"
-            :key="action"
-            type="primary"
-            link
-            @click="handleAction(action, order)"
-            >{{ action }}</el-button
-          >
-          <el-button v-if="order.products && order.products.length > 5" type="primary" link class="expand-btn" @click="handleExpand(order)"
-            >{{ order.expanded ? '收起' : '展开' }} <el-icon><ArrowDown /></el-icon
-          ></el-button>
+        <div class="order-header flex-row-between">
+          <div class="flex-row-start" style="gap: 0 15px">
+            <el-checkbox style="margin: 2px 0px 0px 0" v-model="order.checked" @change="handleOrderCheck" />
+            <div>{{ order.orderTime }}</div>
+            <div>订单号：{{ order.orderNo }}</div>
+            <div>下单人：{{ order.orderPerson }}</div>
+            <div>部门：{{ order.department }}</div>
+          </div>
+          <div class="flex-row-start">
+            <div class="expand-btn" v-for="action in getOrderActions(order)" :key="action" @click="handleAction(action, order)">{{ action }}</div>
+            <div class="open-btn" v-if="order.products && order.products.length > 5" @click="handleExpand(order)">
+              <span style="margin-right: 5px"> {{ order.expanded ? '收起' : '展开' }}</span>
+              <el-icon v-if="order.expanded"><ArrowUp /></el-icon>
+              <el-icon v-else><ArrowDown /></el-icon>
+            </div>
+          </div>
         </div>
         <div v-if="order.countdown" class="countdown-bar">订单锁定剩余时间：{{ order.countdown }}</div>
         <div class="product-list">
           <div v-for="(item, itemIndex) in order.expanded ? order.products : order.products.slice(0, 5)" :key="itemIndex" class="product-row">
-            <div class="product-cell product-info-cell">
+            <div class="product-info-cell">
               <div class="product-image">
                 <el-image :src="item.image" fit="contain"
                   ><template #error
@@ -107,31 +112,30 @@
                 ></el-image>
               </div>
               <div class="product-detail">
-                <div class="product-name">{{ item.name }}</div>
-                <div class="product-spec">{{ item.spec1 }} {{ item.spec2 }}</div>
+                <div class="product-name ellipsis">{{ item.name }}</div>
+                <div class="product-spec">{{ item.spec1 }} | {{ item.spec2 }}</div>
                 <div class="product-price">¥{{ item.price }}</div>
+                <div class="cat-bnt">加入购物车</div>
               </div>
               <div class="product-quantity">x{{ item.quantity }}</div>
             </div>
-            <div class="product-cell amount-cell" v-if="itemIndex === 0">
+            <div class="amount-cell" v-if="itemIndex === 0">
               <div class="amount-info">
-                <span class="label">支付款</span><span class="value highlight">¥{{ order.payAmount }}</span>
+                <span class="label">支付款：</span><span class="value highlight">¥{{ order.payAmount }}</span>
               </div>
               <div class="amount-info">
                 <span class="label">含运费：</span><span class="value">¥{{ order.freight }}</span>
               </div>
             </div>
-            <div class="product-cell status-cell" v-if="itemIndex === 0">
+            <div class="status-cell" v-if="itemIndex === 0">
               <span class="status-text" :style="{ color: getStatusColor(order.status) }">{{ order.statusText }}</span>
+              <span v-if="order.auditStatus" :class="['audit-status', getAuditStatusClass(order.auditStatus)]">{{
+                order.auditStatus == '0' ? '待审批' : order.auditStatus == '1' ? '审批通过' : '审批驳回'
+              }}</span>
               <!-- <el-button type="primary" link size="small" @click="handleViewDetail(order)">查看订单轨迹</el-button> -->
-              <template v-if="order.auditStatus"
-                ><span :class="['audit-status', getAuditStatusClass(order.auditStatus)]">{{
-                  order.auditStatus == '0' ? '待审批' : order.auditStatus == '1' ? '审批通过' : '审批驳回'
-                }}</span>
-                <!-- <el-button type="primary" link size="small">查看审批流</el-button> -->
-              </template>
               <el-button v-if="order.fileCount" type="primary" link size="small">审核文件({{ order.fileCount }})</el-button>
             </div>
+            <div v-else style="width: 340px"></div>
             <!-- <div class="product-cell action-cell" v-if="itemIndex === 0">
               <el-button
                 v-for="action in getOrderActions(order)"
@@ -697,7 +701,8 @@ onMounted(() => {
   width: 100%;
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 120px); // 减去顶部导航栏和其他元素高度
+  margin-bottom: 20px;
+  // max-height: calc(100vh - 120px); // 减去顶部导航栏和其他元素高度
 }
 .page-title {
   font-size: 16px;
@@ -714,28 +719,7 @@ onMounted(() => {
   background: #e60012;
   border-radius: 2px;
 }
-.search-bar {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  margin-bottom: 15px;
-}
-.filter-bar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 15px;
-  .filter-label {
-    font-size: 14px;
-    color: #666;
-  }
-  .filter-right {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-  }
-}
+
 .tab-bar {
   display: flex;
   justify-content: space-between;
@@ -766,8 +750,8 @@ onMounted(() => {
   }
 }
 .order-list {
-  flex: 1;
-  overflow-y: auto;
+  // flex: 1;
+  // overflow-y: auto;
   margin-bottom: 15px;
   .order-card {
     border: 1px solid #eee;
@@ -775,19 +759,20 @@ onMounted(() => {
     margin-bottom: 15px;
     overflow: hidden;
     .order-header {
-      display: flex;
-      align-items: center;
-      gap: 15px;
       padding: 12px 15px;
       background: #f9f9f9;
       border-bottom: 1px solid #eee;
-      font-size: 13px;
-      color: #666;
-      .order-time {
-        color: #333;
-      }
+      font-size: 14px;
+      color: #101828;
       .expand-btn {
-        margin-left: auto;
+        color: #165dff;
+        margin-left: 10px;
+        cursor: pointer;
+      }
+      .open-btn {
+        color: #364153;
+        margin-left: 10px;
+        cursor: pointer;
       }
     }
     .countdown-bar {
@@ -800,7 +785,7 @@ onMounted(() => {
     .product-list {
       .product-row {
         display: flex;
-        border-bottom: 1px solid #f5f5f5;
+        // border-bottom: 1px solid #f5f5f5;
         &:last-child {
           border-bottom: none;
         }
@@ -812,9 +797,9 @@ onMounted(() => {
         justify-content: center;
       }
       .product-info-cell {
+        display: flex;
         flex: 1;
-        flex-direction: row;
-        align-items: center;
+        padding: 15px;
         gap: 15px;
         .product-image {
           width: 80px;
@@ -837,16 +822,16 @@ onMounted(() => {
         }
         .product-detail {
           flex: 1;
+          width: 0;
           .product-name {
             font-size: 14px;
-            color: #333;
+            color: #000000;
             margin-bottom: 5px;
-            line-height: 1.4;
           }
           .product-spec {
             font-size: 12px;
             color: #999;
-            margin-bottom: 5px;
+            margin-bottom: 10px;
           }
           .product-price {
             font-size: 16px;
@@ -860,13 +845,14 @@ onMounted(() => {
         }
       }
       .amount-cell {
-        width: 120px;
-        border-left: 1px solid #f5f5f5;
+        width: 200px;
+        padding: 15px;
         .amount-info {
           margin-bottom: 5px;
           .label {
             font-size: 12px;
             color: #999;
+            margin-right: 4px;
           }
           .value {
             font-size: 14px;
@@ -880,16 +866,18 @@ onMounted(() => {
         }
       }
       .status-cell {
-        width: 120px;
-        border-left: 1px solid #f5f5f5;
+        width: 140px;
+        padding: 15px;
+        display: flex;
         align-items: flex-start;
-        gap: 5px;
+        justify-content: flex-end;
+        gap: 10px;
         .status-text {
           font-size: 14px;
           font-weight: 500;
         }
         .audit-status {
-          font-size: 12px;
+          font-size: 14px;
           &.success {
             color: #e60012;
           }