Merge branch 'dev' of https://gitee.com/MTrun/go-view into master-fetch

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);

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;

src/views/project/items/components/ProjectItemsList/index.vue

@@ -15,6 +15,13 @@
         ></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"
@@ -34,21 +41,25 @@ import { useDataListInit } from './hooks/useData.hook'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
 const { list, deleteHandle } = useDataListInit()
-const {
+const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
-  modalData,
+  useModalDataInit()
-  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>