style: 固定底部

src/views/Boat/components/BoatTable.vue

@@ -53,11 +53,12 @@
             </template>
           </el-table-column>
         </el-table>
-      </div>
         <div class="left-export">
           <svg-icon icon="Export" className="icon"></svg-icon>
           <div class="export-text" @click="onClickExportBoat">导出船期表</div>
         </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,7 +267,6 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
           background-color: rgb(109 0 14 / 100%);
         }
       }
-    }
       .left-export {
         box-sizing: border-box;
         display: flex;
@@ -299,6 +294,7 @@ const onClickCellOpenDetail = (row: BoatInfoType) => {
           cursor: pointer;
         }
       }
+    }
     .footer-pagination {
       box-sizing: border-box;
       width: 100%;
@@ -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,6 +56,7 @@
         <div class="text">{{ searchTableForm.vin }}</div>
         的航运物流跟踪
       </div>
+      <div class="vin-wrap">
         <div class="vin-table" v-for="(item, index) in vinData" :key="index">
           <div>{{ item.schedule.createDate }}</div>
           <div>{{ item.schedule.loadPort.name }}</div>
@@ -63,6 +64,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -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,9 +664,18 @@ onMounted(async () => {
         text-decoration: underline;
       }
     }
+    .vin-wrap {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      overflow-y: auto;
       .vin-table {
         box-sizing: border-box;
         display: flex;
+        flex-shrink: 0;
         align-items: center;
         justify-content: space-between;
         width: 80%;
@@ -675,5 +686,6 @@ onMounted(async () => {
         border-bottom: 1px solid rgb(215 215 215 / 100%);
       }
     }
+  }
 }
 </style>