From b8b549462dc5c58995bdf55a09e211aeb7378bba Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 19 Oct 2023 15:54:23 +0800
Subject: [PATCH] =?UTF-8?q?OrderTableColumn:=20=E5=95=86=E5=93=81=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E5=88=97=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B42?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit 5b3bcecef2355e2b30f0251c0d52b07c487c74e8)
---
 .../order/components/OrderTableColumn.vue     | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/views/mall/trade/order/components/OrderTableColumn.vue b/src/views/mall/trade/order/components/OrderTableColumn.vue
index c9aa8906..5d1e25ee 100644
--- a/src/views/mall/trade/order/components/OrderTableColumn.vue
+++ b/src/views/mall/trade/order/components/OrderTableColumn.vue
@@ -40,8 +40,8 @@
         <el-table-column min-width="300" prop="spuName">
           <template #header>
             <div
-              class="flex items-center"
-              style="width: 100%; height: 35px; background-color: #f7f7f7"
+              class="mr-[20px] h-[35px] flex items-center pl-[10px] pr-[10px]"
+              style="background-color: #f7f7f7"
             >
               <span class="mr-20px">订单号：{{ scope.row.no }} </span>
               <span class="mr-20px">下单时间：{{ formatDate(scope.row.createTime) }}</span>
@@ -64,16 +64,31 @@
           </template>
           <template #default="{ row }">
             <div class="flex flex-wrap">
-              <el-image
-                :src="row.picUrl"
-                class="mb-[13px] mr-[10px] h-[40px] w-[40px] v-middle"
-                @click="imagePreview(row.picUrl)"
-              />
-              <span class="mb-[13px] mr-[10px]">{{ row.spuName }}</span>
+              <div class="mb-[10px] mr-[10px] flex items-start">
+                <div class="mr-[10px]">
+                  <el-image
+                    :src="row.picUrl"
+                    class="!h-[45px] !w-[45px]"
+                    fit="contain"
+                    @click="imagePreview(row.picUrl)"
+                  >
+                    <template #error>
+                      <div class="image-slot">
+                        <icon icon="ep:picture" />
+                      </div>
+                    </template>
+                  </el-image>
+                </div>
+                <ElTooltip :content="row.spuName" placement="top">
+                  <span class="overflow-ellipsis max-h-[45px] overflow-hidden">
+                    {{ row.spuName }}
+                  </span>
+                </ElTooltip>
+              </div>
               <el-tag
                 v-for="property in row.properties"
                 :key="property.propertyId"
-                class="mb-[13px] mr-[10px]"
+                class="mb-[10px] mr-[10px]"
               >
                 {{ property.propertyName }}: {{ property.valueName }}
               </el-tag>