feat: 修改表头

src/styles/element.scss

@@ -2,9 +2,6 @@
   --el-table-border-color: rgb(127 127 127 / 100%);
   --el-table-current-row-bg-color: #ffc;
 }
-.el-table .cell {
-  white-space: pre;
-}
 .el-table__header th {
   font-weight: bold;
   color: #fff;

src/views/Boat/components/BoatTable.vue

@@ -25,24 +25,14 @@
         >
           <el-table-column prop="ship.name" label="船名" align="center" />
           <el-table-column prop="voyage" label="航次" align="center" />
-          <el-table-column align="center">
+          <el-table-column align="center" label="装货港/装货码头" width="130">
-            <template #header>
-              <el-tooltip effect="dark" :content="'装货港 / 装货码头'" placement="top">
-                <span>装货港 / 装货码头</span>
-              </el-tooltip>
-            </template>
             <template #default="scope">
               <div class="goods-name">
                 {{ scope.row.loadPort.name }} / {{ scope.row.loadWharf.name }}
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="卸货港 / 卸货码头" align="center">
+          <el-table-column label="卸货港/卸货码头" width="130" align="center">
-            <template #header>
-              <el-tooltip effect="dark" content="卸货港 / 卸货码头" placement="top">
-                <span>卸货港 / 卸货码头</span>
-              </el-tooltip>
-            </template>
             <template #default="scope">
               <div class="goods-name">
                 {{ scope.row.dischargePort.name }} / {{ scope.row.dischargeWharf.name }}
@@ -252,6 +242,11 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
     }
     .footer-table {
       position: relative;
+      .goods-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
       .update-btn {
         display: flex;
         align-items: center;

src/views/Boat/components/HistoryTable.vue

@@ -54,12 +54,7 @@
         <el-table-column prop="deck" label="舱层" align="center" />
         <el-table-column prop="cabin" label="舱段" align="center" />
         <el-table-column prop="billNo" label="提单号" align="center" />
-        <el-table-column label="货名/品牌/型号" align="center">
+        <el-table-column label="货名/品牌/型号" width="130" align="center">
-          <template #header>
-            <el-tooltip effect="dark" content="货名/品牌/型号" placement="top">
-              <span>货名/品牌/型号</span>
-            </el-tooltip>
-          </template>
           <template #default="scope">
             <div class="goods-name">
               {{ scope.row.goodsName }}/{{ scope.row.brand.name }}/{{ scope.row.model }}
@@ -83,7 +78,6 @@
             </el-tooltip>
           </template>
         </el-table-column>
-        <!-- TODO:港口没有 -->
         <el-table-column prop="consigner" label="发货人" align="center" />
         <el-table-column prop="consignee" label="收货人" align="center" />
         <el-table-column prop="goodsStatus" label="货物状态" align="center" />
@@ -424,6 +418,11 @@ const onClickExportManifestDetail = () => {
         color: #aaa;
       }
     }
+    .goods-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 </style>

src/views/Boat/components/LoadMap.vue

@@ -440,8 +440,11 @@ const onClickReturn = () => {
       border-radius: 13px;
       .map-content {
         display: flex;
-        flex-direction: row-reverse;
+        flex-flow: row-reverse nowrap;
         width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        white-space: nowrap;
         .triangle-right {
           width: 0;
           height: 0;
@@ -453,8 +456,8 @@ const onClickReturn = () => {
           width: 258px;
           height: 300px;
           margin-right: 3px;
-          overflow: hidden;
           .map-deck-title {
+            width: 100%;
             height: 30px;
             font-weight: 700;
             line-height: 30px;

src/views/History/components/HistoryTable.vue

@@ -32,12 +32,7 @@
         <el-table-column prop="deck" label="舱层" align="center" />
         <el-table-column prop="cabin" label="舱段" align="center" />
         <el-table-column prop="billNo" label="提单号" align="center" />
-        <el-table-column label="货名/品牌/型号" align="center">
+        <el-table-column label="货名/品牌/型号" width="130" align="center">
-          <template #header>
-            <el-tooltip effect="dark" content="货名/品牌/型号" placement="top">
-              <span>货名/品牌/型号</span>
-            </el-tooltip>
-          </template>
           <template #default="scope">
             <div class="goods-name">
               {{ scope.row.goodsName }}/{{ scope.row.brand.name }}/{{ scope.row.model }}
@@ -222,5 +217,10 @@ const onClickOpenManifestDetail = async (row: ManifestType) => {
       }
     }
   }
+  .goods-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 </style>

src/views/Send/components/HistoryTable.vue

@@ -57,12 +57,7 @@
         <el-table-column prop="deck" label="舱层" align="center" />
         <el-table-column prop="cabin" label="舱段" align="center" />
         <el-table-column prop="billNo" label="提单号" align="center" />
-        <el-table-column label="货名/品牌/型号" align="center">
+        <el-table-column label="货名/品牌/型号" width="130" align="center">
-          <template #header>
-            <el-tooltip effect="dark" content="货名/品牌/型号" placement="top">
-              <span>货名/品牌/型号</span>
-            </el-tooltip>
-          </template>
           <template #default="scope">
             <div class="goods-name">
               {{ scope.row?.goodsName }}/{{ scope.row.brand?.name }}/{{ scope.row?.model }}
@@ -390,6 +385,11 @@ const endManifestDetail = () => {
         box-shadow: 5px 5px 5px rgb(0 0 0 / 34.9%);
       }
     }
+    .goods-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 </style>

src/views/Send/components/SendTable.vue

@@ -17,24 +17,14 @@
         >
           <el-table-column prop="ship.name" label="船名" align="center" />
           <el-table-column prop="voyage" label="航次" align="center" />
-          <el-table-column label="装货港 / 装货码头" align="center">
+          <el-table-column label="装货港/装货码头" width="130" align="center">
-            <template #header>
-              <el-tooltip effect="dark" :content="'装货港 / 装货码头'" placement="top">
-                <span>装货港 / 装货码头</span>
-              </el-tooltip>
-            </template>
             <template #default="scope">
               <div class="goods-name">
                 {{ scope.row.loadPort?.name }} / {{ scope.row.loadWharf?.name }}
               </div>
             </template>
           </el-table-column>
-          <el-table-column label="卸货港 / 卸货码头" align="center">
+          <el-table-column label="卸货港/卸货码头" width="130" align="center">
-            <template #header>
-              <el-tooltip effect="dark" content="卸货港 / 卸货码头" placement="top">
-                <span>卸货港 / 卸货码头</span>
-              </el-tooltip>
-            </template>
             <template #default="scope">
               <div class="goods-name">
                 {{ scope.row.dischargePort?.name }} / {{ scope.row.dischargeWharf?.name }}
@@ -185,6 +175,11 @@ const onClickOpenDetail = async (row: BoatInfoType) => {
     .footer-table {
       position: relative;
       flex: 1;
+      .goods-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
       .update-btn {
         display: flex;
         align-items: center;