From f86c13b3016b6aa38f07d383c0467cf24474481c Mon Sep 17 00:00:00 2001
From: ChenQiuYu <chenqiuyu@jizhiweb.cn>
Date: Fri, 25 Apr 2025 13:44:28 +0800
Subject: [PATCH] dev

---
 src/assets/scss/main.scss                     |   2 +-
 src/components/inventory/apply/AddApply.vue   |   1 -
 .../inventory/apply/DetailApply.vue           |   1 -
 .../inventory/purchase/AddOrder.vue           |   2 -
 .../inventory/purchase/EditOrder.vue          |   1 -
 .../inventory/supplier/AddSupplier.vue        |   2 -
 src/views/inventory/apply.vue                 |  16 +-
 src/views/inventory/check.vue                 |  29 ++-
 src/views/inventory/goods.vue                 | 228 +++++++++---------
 src/views/inventory/inventory.vue             |  25 +-
 src/views/inventory/supplier.vue              |  48 +---
 11 files changed, 160 insertions(+), 195 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 99f88d0..394660d 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -43,7 +43,7 @@ body {
 
 .container-wrapper {
   height: 100%;
-  //background-color: base.$background-color-panel;
+  background-color: #fff;
   @include base.center-wrapper;
   //@include base.padding;
   @include base.border-radius;
diff --git a/src/components/inventory/apply/AddApply.vue b/src/components/inventory/apply/AddApply.vue
index 86468ab..a9cd397 100644
--- a/src/components/inventory/apply/AddApply.vue
+++ b/src/components/inventory/apply/AddApply.vue
@@ -1,5 +1,4 @@
 <template>
-  <CloseBtn @click="exit"></CloseBtn>
   <el-descriptions title="新增领用" border label-width="100">
     <el-descriptions-item label="领用人" width="200">
       <el-input v-model="formData.name" disabled></el-input>
diff --git a/src/components/inventory/apply/DetailApply.vue b/src/components/inventory/apply/DetailApply.vue
index f8b868c..2c28c06 100644
--- a/src/components/inventory/apply/DetailApply.vue
+++ b/src/components/inventory/apply/DetailApply.vue
@@ -1,5 +1,4 @@
 <template>
-  <CloseBtn @click="exit"></CloseBtn>
   <el-descriptions title="详情领用" border label-width="100">
     <el-descriptions-item label="领用人" width="200">
       <el-input v-model="formData.name" disabled></el-input>
diff --git a/src/components/inventory/purchase/AddOrder.vue b/src/components/inventory/purchase/AddOrder.vue
index 840d9eb..809b52c 100644
--- a/src/components/inventory/purchase/AddOrder.vue
+++ b/src/components/inventory/purchase/AddOrder.vue
@@ -1,6 +1,4 @@
 <template>
-
-  <CloseBtn @click="exit"></CloseBtn>
   <div class="edit-panel" v-loading="isLoading" element-loading-text="正在保存......">
 
     <div class="top">
diff --git a/src/components/inventory/purchase/EditOrder.vue b/src/components/inventory/purchase/EditOrder.vue
index e8c6cd2..3161485 100644
--- a/src/components/inventory/purchase/EditOrder.vue
+++ b/src/components/inventory/purchase/EditOrder.vue
@@ -1,5 +1,4 @@
 <template>
-  <CloseBtn @click="exit"></CloseBtn>
   <div class="edit-panel" v-loading="isLoading" element-loading-text="正在保存......">
     <div class="top">
       <el-descriptions title="采购订单" border>
diff --git a/src/components/inventory/supplier/AddSupplier.vue b/src/components/inventory/supplier/AddSupplier.vue
index 004be89..a1bcb5e 100644
--- a/src/components/inventory/supplier/AddSupplier.vue
+++ b/src/components/inventory/supplier/AddSupplier.vue
@@ -1,7 +1,5 @@
 <template>
-<CloseBtn @click="close"></CloseBtn>
   <el-descriptions
-      title="新增供货商"
       direction="vertical"
       :column="1"
   >
diff --git a/src/views/inventory/apply.vue b/src/views/inventory/apply.vue
index b836b59..0f6789a 100644
--- a/src/views/inventory/apply.vue
+++ b/src/views/inventory/apply.vue
@@ -28,10 +28,10 @@
         />
       </div>
     </div>
-    <Mask :width="1200" :height="600" :top="100" :is-show="is_add" @close="is_add=false">
+    <Mask :width="1200" :height="600" :top="100" :is-show="is_add" @close="is_add=false" title="新增">
       <AddApply @close="closeAddApply"/>
     </Mask>
-    <Mask :width="1200" :height="600" :top="100" :is-show="is_detail" @close="is_detail=false">
+    <Mask :width="1200" :height="600" :top="100" :is-show="is_detail" @close="is_detail=false" title="编辑">
       <DetailApply :id="id" @close="closeDetailApply"/>
     </Mask>
   </div>
@@ -97,7 +97,7 @@ const rowClick = (row: any) => {
 @use "@/assets/scss/base.scss";
 .container-wrapper {
   box-sizing: border-box;
-  padding: 20px;
+  padding: 24px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -115,12 +115,10 @@ const rowClick = (row: any) => {
     box-sizing: border-box;
     padding: 10px;
     position: relative;
-    border-bottom: 1px solid #EEE;
-    .page_btn_list {
-      position: absolute;
-      left: 0;
-      top: 10px;
-    }
+    border-top: 1px solid #EEE;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
   }
 }
 
diff --git a/src/views/inventory/check.vue b/src/views/inventory/check.vue
index 56965ed..c3064b6 100644
--- a/src/views/inventory/check.vue
+++ b/src/views/inventory/check.vue
@@ -2,7 +2,7 @@
   <div class="container-wrapper">
     <div class="top">
       <el-dropdown>
-        <el-button type="primary" @click="openAdd">开始盘点</el-button>
+        <el-button type="primary" :icon="Plus" @click="openAdd">开始盘点</el-button>
       </el-dropdown>
     </div>
     <div class="content_list">
@@ -32,18 +32,19 @@
     </div>
   </div>
   <Mask :width="1200" :height="500" :is-show="showAdd" :top="100" @close="showAdd = false">
-    <Add  @close="showAdd = false"/>
+    <Add @close="showAdd = false"/>
   </Mask>
-  <Mask :width="1200" :height="500" :is-show="showDetail"  :top="100" @close="showDetail = false">
+  <Mask :width="1200" :height="500" :is-show="showDetail" :top="100" @close="showDetail = false">
     <Detail :id="id" @close="showDetail = false"/>
   </Mask>
 </template>
 <script setup lang="ts">
-import { onMounted, ref} from "vue";
+import {onMounted, ref} from "vue";
 import {post} from "@/utils/request.ts";
 import Mask from "@/components/common/Mask.vue";
 import Add from "@/components/inventory/check/Add.vue";
 import Detail from "@/components/inventory/check/Detail.vue";
+import {Plus} from "@element-plus/icons-vue";
 
 const tableData = ref([])
 const getCheck = () => {
@@ -65,7 +66,7 @@ const openAdd = () => {
   showAdd.value = true
 }
 const editCheck = (row: any) => {
-  id.value=row.id
+  id.value = row.id
   showDetail.value = true
 }
 
@@ -88,34 +89,36 @@ let changePage = (value: number) => {
   })
 }
 // 转成YYYY-MM-DD格式
-const formatDate = (isoStr:any) => {
+const formatDate = (isoStr: any) => {
   const date = new Date(isoStr);
-  return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;
+  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
 }
 </script>
 <style scoped lang="scss">
 @use "../../assets/scss/base.scss";
+
 .container-wrapper {
   display: flex;
   flex-direction: column;
   height: 100%;
+  padding: 24px;
+
   .content_list {
     flex: 1;
     overflow: hidden;
     margin-top: base.$margin-base;
   }
+
   .bottom {
     height: 60px;
     background-color: #FFF;
     box-sizing: border-box;
     padding: 10px;
     position: relative;
-    border-bottom: 1px solid #EEE;
-    .page_btn_list {
-      position: absolute;
-      left: 0;
-      top: 10px;
-    }
+    border-top: 1px solid #EEE;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/inventory/goods.vue b/src/views/inventory/goods.vue
index 8c8de1a..78c7031 100644
--- a/src/views/inventory/goods.vue
+++ b/src/views/inventory/goods.vue
@@ -1,86 +1,77 @@
 <template>
   <div class="container-wrapper">
     <div class="top">
-      <el-dropdown>
-        <el-button type="primary">新增商品
-          <el-icon class="el-icon--right">
-            <arrow-down/>
-          </el-icon>
-        </el-button>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item @click="open_edit(1301,0)">中西成药</el-dropdown-item>
-            <el-dropdown-item @click="open_edit(1302,0)">中药饮片</el-dropdown-item>
-            <el-dropdown-item @click="open_edit(1306,0)">医疗器材</el-dropdown-item>
-            <el-dropdown-item @click="open_edit(0,0)">其他商品</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-    <div class="search">
-      <el-form :inline="true" :model="searchModel">
-        <el-form-item>
-          <el-input placeholder="请输入名称"
-                    clearable
-                    v-model="searchModel.name"
-                    style="width: 200px"
-          >
-            <template #prefix>
-              <el-icon class="el-input__icon">
-                <search/>
-              </el-icon>
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-cascader :options="allCateList" :show-all-levels="false" v-model="searchModel.cateId" clearable/>
-        </el-form-item>
-        <el-form-item>
-          <el-select
-              placeholder="利润分类"
-              style="width: 150px"
-              multiple
-              collapse-tags
-              collapse-tags-tooltip
-              v-model="searchModel.curProfitCate"
-          >
-            <el-option
-                v-for="item in profitCategory"
-                :key="item.name"
-                :label="item.name"
-                :value="item.name"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item style="margin-right: 0">
-          <el-input placeholder="最低毛利率" v-model="searchModel.minInterestRate" style="width: 100px">
-            <template #suffix>
-              <el-icon class="el-input__icon">%</el-icon>
-            </template>
-          </el-input>
-          <el-icon style="color: #ddd">
-            <SemiSelect/>
-          </el-icon>
-        </el-form-item>
+      <div class="search">
+        <el-form :inline="true" :model="searchModel">
+          <el-form-item>
+            <el-input placeholder="请输入名称"
+                      clearable
+                      v-model="searchModel.name"
+                      style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon class="el-input__icon">
+                  <search/>
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-cascader :options="allCateList" :show-all-levels="false" v-model="searchModel.cateId" clearable/>
+          </el-form-item>
+          <el-form-item>
+            <el-select
+                placeholder="利润分类"
+                style="width: 150px"
+                multiple
+                collapse-tags
+                collapse-tags-tooltip
+                v-model="searchModel.curProfitCate"
+            >
+              <el-option
+                  v-for="item in profitCategory"
+                  :key="item.name"
+                  :label="item.name"
+                  :value="item.name"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item style="margin-right: 0">
+            <el-input placeholder="最低毛利率" v-model="searchModel.minInterestRate" style="width: 100px">
+              <template #suffix>
+                <el-icon class="el-input__icon">%</el-icon>
+              </template>
+            </el-input>
+            <el-icon style="color: #ddd">
+              <SemiSelect/>
+            </el-icon>
+          </el-form-item>
 
-        <el-form-item>
-          <el-input placeholder="最高毛利率" v-model="searchModel.maxInterestRate" style="width: 100px">
-            <template #suffix>
-              <el-icon class="el-input__icon">%</el-icon>
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="searchGoods">搜索</el-button>
-        </el-form-item>
-      </el-form>
-      <div class="right">
-        <el-checkbox v-model="inventoryNumber" label="不看0库存" size="large" @change="searchGoods"/>
-        <el-checkbox v-model="status" label="不看已停用" size="large" @change="searchGoods"/>
+          <el-form-item>
+            <el-input placeholder="最高毛利率" v-model="searchModel.maxInterestRate" style="width: 100px">
+              <template #suffix>
+                <el-icon class="el-input__icon">%</el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="searchGoods">搜索</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="right">
+          <el-checkbox v-model="inventoryNumber" label="不看0库存" size="large" @change="searchGoods"/>
+          <el-checkbox v-model="status" label="不看已停用" size="large" @change="searchGoods"/>
+        </div>
+      </div>
+      <div class="addBtn">
+        <el-button type="primary" :icon="Plus" @click="open_edit(1301,0)">新增中西成药</el-button>
+        <el-button type="primary" :icon="Plus" @click="open_edit(1302,0)">新增中药饮片</el-button>
+        <el-button type="primary" :icon="Plus" @click="open_edit(1306,0)">新增医疗器材</el-button>
+        <el-button type="primary" :icon="Plus" @click="open_edit(0,0)">新增其他商品</el-button>
       </div>
     </div>
     <div class="content_goods" ref="content">
-      <el-table :data="tableData" style="width: 100%;height: 100%" @row-click="openMack">
+      <el-table :data="tableData" style="width: 100%;height: 100%;padding: 0 24px" @row-click="openMack">
         <el-table-column fixed prop="name" label="名称" width="200" show-overflow-tooltip/>
         <el-table-column fixed label="类型" width="200">
           <template #default="scope">
@@ -95,12 +86,12 @@
         <el-table-column fixed label="厂家" prop="producer" width="230" show-overflow-tooltip/>
         <el-table-column fixed label="进价" width="120">
           <template #default="scope">
-            ￥{{ scope.row.purchaseUnitPrice?.toFixed(2) }}
+            ￥{{ scope.row.purchaseUnitPrice.toFixed(2) }}
           </template>
         </el-table-column>
         <el-table-column fixed label="售价" width="120">
           <template #default="scope">
-            ￥{{ scope.row.unitPrice?.toFixed(2) }}
+            ￥{{ scope.row.unitPrice.toFixed(2) }}
           </template>
         </el-table-column>
         <el-table-column label="标签" prop="producer" width="200">
@@ -116,7 +107,7 @@
         </el-table-column>
         <el-table-column label="毛利率" width="120">
           <template #default="scope">
-            {{ (scope.row.interestRate * 100)?.toFixed(2) }}%
+            {{ (scope.row.interestRate * 100).toFixed(2) }}%
           </template>
         </el-table-column>
 
@@ -140,7 +131,7 @@
         </el-table-column>
         <el-table-column label="药品成本" prop="costPrice" show-overflow-tooltip>
           <template #default="scope">
-            ￥{{ scope.row.costPrice?.toFixed(2) }}
+            ￥{{ scope.row.costPrice.toFixed(2) }}
           </template>
         </el-table-column>
         <el-table-column label="医保码" prop="hilistCode" show-overflow-tooltip></el-table-column>
@@ -167,10 +158,13 @@
       </div>
     </div>
   </div>
-  <Mask :is-show="is_add" :top="50" :height="900" @close="is_add = false" title="新建档案">
+  <Mask :is-show="is_add" :top="50" :height="900">
     <Edit ref="editRef" @close="is_add = false;init()"/>
   </Mask>
-  <Mask :is-show="open" :top="50" :height="600" @close="open=false" title="列表信息">
+  <Mask :is-show="open" :top="50" :height="600">
+    <div style="height: 50px">
+      <CloseBtn @click="closeMack"></CloseBtn>
+    </div>
     <el-tabs v-model="activeName" @tab-change="changeTab">
       <el-tab-pane label="商品信息" name="first">
         <Edit ref="editRef" @close="open = false;init()"/>
@@ -188,11 +182,12 @@
 import {nextTick, onMounted, ref} from "vue";
 import {ElTabPane} from "element-plus";
 import {post} from '@/utils/request.ts';
-import Mask from "@/components/common/Mask.vue";
+import Mask from "@/components/Mask.vue";
 import Edit from "@/components/inventory/goods/Edit.vue";
 import InventoryBatchDetail from "@/components/inventory/goods/InventoryBatchDetail.vue";
 import InventoryStatistics from "@/components/inventory/goods/InventoryStatistics.vue";
-import {ArrowDown, SemiSelect} from "@element-plus/icons-vue";
+import CloseBtn from "@/components/CloseBtn.vue";
+import {Plus, SemiSelect} from "@element-plus/icons-vue";
 
 const inventoryNumber = ref(false)
 const status = ref(false)
@@ -398,41 +393,44 @@ const activeName = ref('first')
   height: 100%;
   display: flex;
   flex-direction: column;
+
+  .top {
+    height: 112px;
+    padding: 24px 24px 0;
+    background: #fff;
+
+    .search {
+      display: flex;
+      justify-content: space-between;
+
+      .el-form-item {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .content_goods {
+    width: 100%;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .bottom {
+    width: 100%;
+    height: 60px;
+    background-color: #FFF;
+    box-sizing: border-box;
+    padding: 10px;
+    position: relative;
+    border-top: 1px solid #EEE;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
 }
 
 .tags {
   margin-left: 5px;
 }
 
-.search {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 10px;
-
-  .el-form-item {
-    margin-right: 5px;
-  }
-}
-
-.content_goods {
-  width: 100%;
-  flex: 1;
-  overflow: hidden;
-}
-
-.bottom {
-  width: 100%;
-  height: 60px;
-  background-color: #FFF;
-  box-sizing: border-box;
-  padding: 10px;
-  position: relative;
-  border-bottom: 1px solid #EEE;
-
-  .page_btn_list {
-    position: absolute;
-    left: 0;
-    top: 10px;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/inventory/inventory.vue b/src/views/inventory/inventory.vue
index 2034e6c..c4c7435 100644
--- a/src/views/inventory/inventory.vue
+++ b/src/views/inventory/inventory.vue
@@ -6,7 +6,7 @@
     </el-dropdown>
   </div>
     <div class="content_list">
-      <el-table :data="tableData" style="width: 100%">
+      <el-table :data="tableData" style="width: 100%" @row-click="open_add">
         <el-table-column fixed label="进货单号" width="250" show-overflow-tooltip>
           <template #default="scope">
             <div class="link">{{ scope.row.code }}</div>
@@ -21,20 +21,17 @@
           </template>
         </el-table-column>
         <el-table-column label="采购人" prop="managerUserName" width="100"></el-table-column>
-        <el-table-column label="供应商" prop="supplierName" width="250"></el-table-column>
-        <el-table-column prop="purchaseDate" label="采购时间" width="250">
+        <el-table-column label="供应商" prop="supplierName"></el-table-column>
+        <el-table-column prop="purchaseDate" label="采购时间">
           <template #default="scope">
             {{ formatDate(scope.row.purchaseDate) }}
           </template>
         </el-table-column>
-        <el-table-column prop="createDatetime" label="创建时间" width="250">
+        <el-table-column prop="createDatetime" label="创建时间">
           <template #default="scope">
             {{ formatDate(scope.row.createDatetime) }}
           </template>
         </el-table-column>
-        <el-table-column fixed="right" label="操作" min-width="120" #default="scope">
-          <el-button link type="primary" size="small" @click="open_add(scope.row.code)">详情</el-button>
-        </el-table-column>
       </el-table>
   </div>
   <div class="bottom">
@@ -49,7 +46,7 @@
       />
     </div>
   </div>
-  <Mask :width="1200" :height="700" :top="100" :is-show="is_add">
+  <Mask :width="1200" :height="700" :top="100" :is-show="is_add" @close="is_add=false" :title="open_code?'编辑':'新增'">
     <AddOrder v-if="!open_code" @close="closeAddOrder"/>
     <EditOrder v-else :code="open_code" @close="is_add=false" @updateOrderDetail="init"/>
   </Mask>
@@ -117,7 +114,7 @@ const formatDate = (isoStr: any) => {
 @use "@/assets/scss/base.scss";
 .container-wrapper {
   box-sizing: border-box;
-  padding: 20px;
+  padding: 24px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -135,12 +132,10 @@ const formatDate = (isoStr: any) => {
     box-sizing: border-box;
     padding: 10px;
     position: relative;
-    border-bottom: 1px solid #EEE;
-    .page_btn_list {
-      position: absolute;
-      left: 0;
-      top: 10px;
-    }
+    border-top: 1px solid #EEE;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
   }
 }
 .full_screen {
diff --git a/src/views/inventory/supplier.vue b/src/views/inventory/supplier.vue
index 3c12e48..a14ede0 100644
--- a/src/views/inventory/supplier.vue
+++ b/src/views/inventory/supplier.vue
@@ -2,11 +2,11 @@
   <div class="container-wrapper">
     <div class="top">
       <el-dropdown>
-        <el-button type="primary" @click="openAdd">添加供应商</el-button>
+        <el-button type="primary" :icon="Plus" @click="openAdd">添加供应商</el-button>
       </el-dropdown>
     </div>
     <div class="content_list">
-      <el-table :data="tableData" style="width: 100%">
+      <el-table :data="tableData" @row-click="editSupplier">
         <el-table-column label="供应商名称" prop="name" width="250">
         </el-table-column>
         <el-table-column label="启用状态" prop="turn" width="80">
@@ -15,16 +15,10 @@
             <el-tag type="info" v-else>已禁用</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="许可证号" prop="licenseCode" width="150"></el-table-column>
+        <el-table-column label="许可证号" prop="licenseCode"></el-table-column>
         <el-table-column label="联系人" prop="contactName" width="100"></el-table-column>
         <el-table-column label="联系方式" prop="contactTel" width="150"></el-table-column>
-        <el-table-column label="备注" width="250" prop="reamark"/>
-        <el-table-column label="操作" width="150">
-          <template #default="scope">
-            <el-button link type="primary" size="small" @click="editSupplier(scope.row)">详情</el-button>
-          </template>
-
-        </el-table-column>
+        <el-table-column label="备注" prop="reamark"/>
       </el-table>
     </div>
     <div class="bottom">
@@ -39,7 +33,7 @@
         />
       </div>
     </div>
-    <Mask :width="400" :height="600" :is-show="showAdd" :top="100">
+    <Mask :width="400" :height="600" :is-show="showAdd" :top="100" @close="showAdd = false" :title="id?'编辑':'添加'">
       <AddSupplier @close="showAdd = false" @saveSuccess="getSupplier()" ref="addSupplierRef"></AddSupplier>
     </Mask>
   </div>
@@ -49,6 +43,7 @@ import {nextTick, onMounted, ref, watch} from "vue";
 import {post} from "@/utils/request.ts";
 import Mask from "@/components/common/Mask.vue";
 import AddSupplier from "@/components/inventory/supplier/AddSupplier.vue";
+import {Plus} from "@element-plus/icons-vue";
 
 const tableData = ref([])
 const getSupplier = () => {
@@ -67,7 +62,9 @@ const addSupplierRef = ref();
 const openAdd = () => {
   showAdd.value = true
 }
+const id = ref('')
 const editSupplier = (row: any) => {
+  id.value = row.id
   openAdd()
   nextTick(() => {
     addSupplierRef.value.edit(row)
@@ -95,25 +92,10 @@ let changePage = (value: number) => {
 </script>
 <style scoped lang="scss">
 @use "@/assets/scss/base.scss";
-.bottom {
-  width: 100%;
-  height: 60px;
-  background-color: #FFF;
-  box-sizing: border-box;
-  padding: 10px;
-  position: relative;
-  border-bottom: 1px solid #EEE;
-
-  .page_btn_list {
-    position: absolute;
-    left: 0;
-    top: 10px;
-  }
-}
 
 .container-wrapper {
   box-sizing: border-box;
-  padding: 20px;
+  padding: 24px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -133,14 +115,10 @@ let changePage = (value: number) => {
     box-sizing: border-box;
     padding: 10px;
     position: relative;
-    border-bottom: 1px solid #EEE;
-    margin-top: base.$margin-base;
-
-    .page_btn_list {
-      position: absolute;
-      left: 0;
-      top: 10px;
-    }
+    border-top: 1px solid #EEE;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
   }
 }
 </style>
\ No newline at end of file