diff --git a/src/styles/common/animation.scss b/src/styles/common/animation.scss
index 5720d743..86294947 100644
--- a/src/styles/common/animation.scss
+++ b/src/styles/common/animation.scss
@@ -44,7 +44,7 @@
 }
 
 // 渐变
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }
@@ -58,7 +58,7 @@
 .list-complete-item {
   transition: all 1s;
 }
-.list-complete-enter,
+.list-complete-enter-from,
 .list-complete-leave-to {
   opacity: 0;
   transform: translateY(30px);
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>