From fc26544a85480701ad8cd6dc33eace03f71f9f4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 22 May 2022 14:09:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8=E5=88=86=E9=A1=B5=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ProjectItemsCard/index.vue     |  4 +--
 .../components/ProjectItemsList/index.vue     | 29 +++++++++++++------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/views/project/items/components/ProjectItemsCard/index.vue b/src/views/project/items/components/ProjectItemsCard/index.vue
index 04a3a0f5..1b996b7c 100644
--- a/src/views/project/items/components/ProjectItemsCard/index.vue
+++ b/src/views/project/items/components/ProjectItemsCard/index.vue
@@ -15,7 +15,7 @@
         <div class="list-content-img" @click="resizeHandle">
           <n-image
             object-fit="contain"
-            height="200"
+            height="180"
             preview-disabled
             :src="
               requireUrl('project/moke-20211219181327.png')
@@ -193,7 +193,7 @@ const resizeHandle = () => {
 </script>
 
 <style lang="scss" scoped>
-$contentHeight: 200px;
+$contentHeight: 180px;
 @include go('items-list-card') {
   position: relative;
   border-radius: $--border-radius-base;
diff --git a/src/views/project/items/components/ProjectItemsList/index.vue b/src/views/project/items/components/ProjectItemsList/index.vue
index 37782fe4..dc4f9206 100644
--- a/src/views/project/items/components/ProjectItemsList/index.vue
+++ b/src/views/project/items/components/ProjectItemsList/index.vue
@@ -12,9 +12,16 @@
           @resize="resizeHandle"
           @delete="deleteHandle($event, index)"
           @edit="editHandle"
-       ></project-items-card>
+        ></project-items-card>
       </n-grid-item>
     </n-grid>
+    <div class="list-pagination">
+      <n-pagination
+        :item-count="10"
+        :page-sizes="[10, 20, 30, 40]"
+        show-size-picker
+      />
+    </div>
   </div>
   <project-items-modal-card
     v-if="modalData"
@@ -22,7 +29,7 @@
     :cardData="modalData"
     @close="closeModal"
     @edit="editHandle"
- ></project-items-modal-card>
+  ></project-items-modal-card>
 </template>
 
 <script setup lang="ts">
@@ -34,21 +41,25 @@ import { useDataListInit } from './hooks/useData.hook'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
 const { list, deleteHandle } = useDataListInit()
-const {
-  modalData,
-  modalShow,
-  closeModal,
-  resizeHandle,
-  editHandle
-} = useModalDataInit()
+const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
+  useModalDataInit()
 </script>
 
 <style lang="scss" scoped>
 $contentHeight: 250px;
 @include go('items-list') {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: calc(100vh - #{$--header-height} * 2 - 2px);
   .list-content {
     position: relative;
     height: $contentHeight;
   }
+  .list-pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
 }
 </style>