style: 固定底部

src/views/Boat/components/BoatTable.vue

@@ -53,11 +53,12 @@
             </template>
           </el-table-column>
         </el-table>
+        <div class="left-export">
+          <svg-icon icon="Export" className="icon"></svg-icon>
+          <div class="export-text" @click="onClickExportBoat">导出船期表</div>
+        </div>
       </div>
-      <div class="left-export">
+
-        <svg-icon icon="Export" className="icon"></svg-icon>
-        <div class="export-text" @click="onClickExportBoat">导出船期表</div>
-      </div>
       <!-- 分页 -->
       <div class="footer-pagination">
         <div class="notice-wrap"><div class="notice">仅列出最近十日收到的订阅船期信息</div></div>
@@ -238,14 +239,9 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
     flex-direction: column;
     padding: 16px;
     overflow: hidden;
-    .footer-util {
-      display: flex;
-      flex-shrink: 0;
-      justify-content: flex-end;
-      margin-bottom: 15px;
-    }
     .footer-table {
       position: relative;
+      flex: 1;
       .goods-name {
         overflow: hidden;
         text-overflow: ellipsis;
@@ -271,32 +267,32 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
           background-color: rgb(109 0 14 / 100%);
         }
       }
-    }
+      .left-export {
-    .left-export {
+        box-sizing: border-box;
-      box-sizing: border-box;
+        display: flex;
-      display: flex;
+        align-items: center;
-      align-items: center;
+        width: fit-content;
-      width: fit-content;
+        height: 50px;
-      height: 50px;
+        padding: 0 20px 0 15px;
-      padding: 0 20px 0 15px;
+        margin-top: 20px;
-      margin-top: 20px;
+        margin-bottom: 10px;
-      margin-bottom: 10px;
+        font-size: 18px;
-      font-size: 18px;
-      color: #00bfbf;
-      border-bottom: #00bfbf 1px solid;
-      .icon {
-        width: 40px;
-        height: 40px;
-        font-weight: 400;
-        line-height: normal;
         color: #00bfbf;
-      }
+        border-bottom: #00bfbf 1px solid;
-      .export-text {
+        .icon {
-        margin-left: 15px;
+          width: 40px;
-      }
+          height: 40px;
-      .export-text:hover {
+          font-weight: 400;
-        color: rgb(2 167 240);
+          line-height: normal;
-        cursor: pointer;
+          color: #00bfbf;
+        }
+        .export-text {
+          margin-left: 15px;
+        }
+        .export-text:hover {
+          color: rgb(2 167 240);
+          cursor: pointer;
+        }
       }
     }
     .footer-pagination {
@@ -313,7 +309,6 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
           justify-content: center;
           width: 700px;
           height: 40px;
-          margin-top: 30px;
           overflow: hidden;
           font-size: 16px;
           color: #d7d7d7;

src/views/Home/index.vue

@@ -56,10 +56,12 @@
         <div class="text">{{ searchTableForm.vin }}</div>
         的航运物流跟踪
       </div>
-      <div class="vin-table" v-for="(item, index) in vinData" :key="index">
+      <div class="vin-wrap">
-        <div>{{ item.schedule.createDate }}</div>
+        <div class="vin-table" v-for="(item, index) in vinData" :key="index">
-        <div>{{ item.schedule.loadPort.name }}</div>
+          <div>{{ item.schedule.createDate }}</div>
-        <div>{{ item.shipStatus }}</div>
+          <div>{{ item.schedule.loadPort.name }}</div>
+          <div>{{ item.shipStatus }}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -555,7 +557,7 @@ onMounted(async () => {
   flex-direction: column;
   width: 100%;
   height: 100%;
-  padding: 40px;
+  padding: 40px 40px 16px;
   .home-search {
     display: flex;
     align-items: center;
@@ -617,17 +619,17 @@ onMounted(async () => {
     }
   }
   .home-footer {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 20px;
+    padding-bottom: 16px;
     .notice {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 700px;
       height: 40px;
-      margin-top: 30px;
       overflow: hidden;
       font-size: 16px;
       color: #d7d7d7;
@@ -662,17 +664,27 @@ onMounted(async () => {
         text-decoration: underline;
       }
     }
-    .vin-table {
+    .vin-wrap {
-      box-sizing: border-box;
       display: flex;
+      flex: 1;
+      flex-direction: column;
       align-items: center;
-      justify-content: space-between;
+      justify-content: center;
-      width: 80%;
+      width: 100%;
-      height: 50px;
+      overflow-y: auto;
-      font-size: 18px;
+      .vin-table {
-      color: #fff;
+        box-sizing: border-box;
-      background-color: rgb(255 255 255 / 0%);
+        display: flex;
-      border-bottom: 1px solid rgb(215 215 215 / 100%);
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: space-between;
+        width: 80%;
+        height: 50px;
+        font-size: 18px;
+        color: #fff;
+        background-color: rgb(255 255 255 / 0%);
+        border-bottom: 1px solid rgb(215 215 215 / 100%);
+      }
     }
   }
 }