移动端抽屉侧边栏

src/layouts/MainLayout.vue

@@ -16,10 +16,13 @@
       />
     </el-header>
     <el-container>
-      <el-aside width="240px">
+      <!-- 桌面端显示侧边栏，移动端隐藏（移动端使用抽屉式侧边栏） -->
+      <el-aside v-if="!appStore.isMobile" width="240px">
         <AppSidebar :menu-items="currentMenuItems" :theme="sidebarTheme" />
       </el-aside>
-      <el-main>
+      <!-- 移动端也渲染侧边栏，但使用固定定位的抽屉式效果 -->
+      <AppSidebar v-if="appStore.isMobile" :menu-items="currentMenuItems" :theme="sidebarTheme" />
+      <el-main :class="{ 'mobile-main': appStore.isMobile }">
         <div class="content-wrapper">
           <!-- 企业认证提示 - 根据当前页面路径显示 -->
           <CertificationNotice
@@ -50,10 +53,12 @@ import AppHeader from '@/components/layout/AppHeader.vue'
 import AppSidebar from '@/components/layout/AppSidebar.vue'
 import NotificationPanel from '@/components/layout/NotificationPanel.vue'
 import { getCurrentPageCertificationConfig, getUserAccessibleMenuItems } from '@/constants/menu'
+import { useAppStore } from '@/stores/app'
 import { useUserStore } from '@/stores/user'
 import { ElMessageBox } from 'element-plus'
 
 const router = useRouter()
+const appStore = useAppStore()
 const userStore = useUserStore()
 
 const showNotifications = ref(false)
@@ -192,6 +197,13 @@ const handleUserCommand = async (command) => {
 .el-main {
   background: transparent;
   padding: 0;
+  transition: margin-left 0.3s ease;
+}
+
+/* 移动端内容区域全宽显示 */
+.mobile-main {
+  width: 100% !important;
+  margin-left: 0 !important;
 }
 
 /* 性能优化：为低端设备提供简化样式 */
@@ -199,6 +211,11 @@ const handleUserCommand = async (command) => {
   .content-wrapper {
     padding: 0 12px 12px 12px;
   }
+
+  /* 确保移动端容器全宽 */
+  .el-container {
+    width: 100%;
+  }
 }
 
 /* 性能优化：减少动画效果 */

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>