Bläddra i källkod

feat(storeDecoration): 优化官方相册页面布局和分页组件位置

- 调整空状态提示位置,提升用户体验
- 修改分页组件样式,定位到底部右侧
- 更新相册列表间距,统一视觉风格
- 优化页面结构代码,提高可维护性
congxuesong 2 veckor sedan
förälder
incheckning
2e6154cf4f
1 ändrade filer med 22 tillägg och 21 borttagningar
  1. 22 21
      src/views/storeDecoration/officialPhotoAlbum/index.vue

+ 22 - 21
src/views/storeDecoration/officialPhotoAlbum/index.vue

@@ -53,26 +53,23 @@
           </div>
         </div>
       </div>
-
-      <!-- 分页 -->
-      <div class="pagination-section">
-        <el-pagination
-          v-model:current-page="pageable.pageNum"
-          v-model:page-size="pageable.pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          :total="pageable.total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
     </div>
-
     <!-- 空状态 -->
     <div v-else class="empty-state">
       <div class="empty-text">暂无相册,快来创建吧</div>
     </div>
-
+    <!-- 分页 -->
+    <div class="pagination-section">
+      <el-pagination
+        v-model:current-page="pageable.pageNum"
+        v-model:page-size="pageable.pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="pageable.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
     <!-- 新建/编辑相册弹窗 -->
     <el-dialog v-model="createDialogVisible" :title="editId ? '修改相册名称' : '新建相册'" width="500px" @close="resetCreateForm">
       <el-form :model="createForm" :rules="createRules" ref="createFormRef" label-width="0">
@@ -701,6 +698,7 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .photo-album-container {
+  position: relative;
   min-height: 100%;
   padding: 20px;
   background-color: white;
@@ -734,7 +732,7 @@ onMounted(async () => {
       display: grid;
       grid-template-columns: repeat(5, 1fr);
       gap: 16px;
-      margin-bottom: 24px;
+      margin-bottom: 20px;
       .upload-item {
         position: relative;
         width: 100%;
@@ -839,11 +837,6 @@ onMounted(async () => {
         }
       }
     }
-    .pagination-section {
-      display: flex;
-      justify-content: center;
-      margin-top: 24px;
-    }
   }
   .empty-state {
     display: flex;
@@ -876,4 +869,12 @@ onMounted(async () => {
     }
   }
 }
+.pagination-section {
+  position: absolute;
+  right: 40px;
+  bottom: 20px;
+  z-index: 1000;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>