移动端抽屉侧边栏

src/pages/products/index.vue

@@ -63,9 +63,17 @@
     </template>
 
     <template #pagination>
-      <el-pagination v-if="total > 0" v-model:current-page="currentPage" v-model:page-size="pageSize"
-        :page-sizes="[12, 24, 48, 96]" :total="total" layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      <el-pagination 
+        v-if="total > 0" 
+        v-model:current-page="currentPage" 
+        v-model:page-size="pageSize"
+        :page-sizes="[12, 24, 48, 96]" 
+        :total="total" 
+        :layout="paginationLayout"
+        :small="appStore.isMobile"
+        class="pagination-wrapper"
+        @size-change="handleSizeChange" 
+        @current-change="handleCurrentChange" />
     </template>
   </ListPageLayout>
 </template>
@@ -76,9 +84,11 @@ import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
 import ProductCard from '@/components/product/ProductCard.vue'
+import { useAppStore } from '@/stores/app'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const router = useRouter()
+const appStore = useAppStore()
 
 // 响应式数据
 const loading = ref(false)
@@ -97,6 +107,16 @@ const filters = reactive({
   keyword: ''
 })
 
+// 响应式分页布局：移动端简化，桌面端完整
+const paginationLayout = computed(() => {
+  if (appStore.isMobile) {
+    // 移动端：只显示上一页、页码、下一页和总数
+    return 'prev, pager, next, total'
+  }
+  // 桌面端：显示完整功能
+  return 'total, sizes, prev, pager, next, jumper'
+})
+
 // 搜索防抖
 let searchTimer = null
 
@@ -277,5 +297,68 @@ const handleCancelSubscribe = async (product) => {
 </script>
 
 <style scoped>
-/* 页面特定样式可以在这里添加 */
+/* 分页组件移动端适配 */
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: 16px 0;
+}
+
+/* 移动端分页样式优化 */
+@media (max-width: 768px) {
+  .pagination-wrapper {
+    padding: 12px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* 确保分页组件在小屏幕上可以横向滚动 */
+  .pagination-wrapper :deep(.el-pagination) {
+    flex-wrap: nowrap;
+    min-width: fit-content;
+  }
+
+  /* 移动端隐藏部分不必要的元素，确保核心功能可见 */
+  .pagination-wrapper :deep(.el-pagination__sizes) {
+    display: none;
+  }
+
+  /* 优化移动端分页按钮间距 */
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    margin: 0 2px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+  }
+
+  /* 移动端总数显示优化 */
+  .pagination-wrapper :deep(.el-pagination__total) {
+    font-size: 12px;
+    margin-right: 8px;
+    white-space: nowrap;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .pagination-wrapper {
+    padding: 8px 0;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    display: none;
+  }
+
+  /* 只显示最核心的分页功能 */
+  .pagination-wrapper :deep(.el-pagination) {
+    font-size: 12px;
+  }
+}
 </style>