|
|
@@ -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>
|