针对分页的移动端适配

web/components/UserDocument.vue

@@ -91,7 +91,13 @@
       v-if="total > 0"
       :current-page="query.page"
       :page-size="query.size"
-      layout="total,  prev, pager, next, jumper"
+      :layout="
+        isMobile
+          ? 'total, prev, pager, next'
+          : 'total, prev, pager, next, jumper'
+      "
+      :pager-count="4"
+      :small="isMobile"
       :total="total"
       @current-change="pageChange"
     >

web/components/UserDynamic.vue

@@ -28,7 +28,13 @@
       v-if="total > 0"
       :current-page="query.page"
       :page-size="query.size"
-      layout="total,  prev, pager, next, jumper"
+      :layout="
+        isMobile
+          ? 'total, prev, pager, next'
+          : 'total, prev, pager, next, jumper'
+      "
+      :pager-count="4"
+      :small="isMobile"
       :total="total"
       @current-change="pageChange"
     >

web/components/UserFavorite.vue

@@ -62,7 +62,13 @@
       v-if="total > 0"
       :current-page="query.page"
       :page-size="query.size"
-      layout="total,  prev, pager, next, jumper"
+      :layout="
+        isMobile
+          ? 'total, prev, pager, next'
+          : 'total, prev, pager, next, jumper'
+      "
+      :pager-count="4"
+      :small="isMobile"
       :total="total"
     >
     </el-pagination>

web/pages/category/_id.vue

@@ -126,7 +126,13 @@
             v-if="total > 0"
             :current-page="query.page"
             :page-size="size"
-            layout="total,  prev, pager, next, jumper"
+            :layout="
+              isMobile
+                ? 'total, prev, pager, next'
+                : 'total, prev, pager, next, jumper'
+            "
+            :pager-count="4"
+            :small="isMobile"
             :total="total"
             @current-change="pageChange"
           >

web/pages/document/_id.vue

@@ -164,10 +164,12 @@
         <el-card
           shadow="never"
           class="mgt-20px relate-docs"
-          v-if="relatedDocuments.length > 0"
+          v-if="isMobile && relatedDocuments.length > 0"
         >
           <div slot="header">相关文档</div>
-          <document-simple-list :docs="relatedDocuments" />
+          <document-simple-list
+            :docs="isMobile ? relatedDocuments.slice(0, 5) : relatedDocuments"
+          />
         </el-card>
         <el-card
           v-if="document.id > 0"
@@ -604,13 +606,7 @@ export default {
         id: this.documentId,
       })
       if (res.status === 200) {
-        // 如果是移动端，则只显示5条，否则显示10条
-        let relatedDocuments = res.data.document || []
-        if (this.isMobile) {
-          this.relatedDocuments = relatedDocuments.slice(0, 5)
-        } else {
-          this.relatedDocuments = relatedDocuments
-        }
+        this.relatedDocuments = res.data.document || []
       }
     },
     prevPage() {

web/pages/index.vue

@@ -661,6 +661,7 @@ export default {
 @media screen and (max-width: $mobile-width) {
   .page-index {
     .searchbox {
+      margin-bottom: 15px;
       .search-form {
         width: 90%;
         .el-input__inner {

web/pages/search.vue

@@ -167,6 +167,13 @@
             :current-page="query.page"
             :page-size="query.size"
             layout="total,  prev, pager, next, jumper"
+            :layout="
+              isMobile
+                ? 'total, prev, pager, next'
+                : 'total, prev, pager, next, jumper'
+            "
+            :pager-count="4"
+            :small="isMobile"
             :total="total"
             @current-change="onPageChange"
           >

web/store/module/device.js

@@ -33,13 +33,16 @@ export const device = {
   },
   getters: {
     isMobile(state) {
-      return state.device.isMobile
+      return state.device.isMobile || window.innerWidth < 768
     },
     isPad(state) {
-      return state.device.isPad
+      return (
+        state.device.isPad ||
+        (window.innerWidth < 992 && window.innerWidth >= 768)
+      )
     },
     isPC(state) {
-      return state.device.isPC
+      return state.device.isPC || window.innerWidth >= 992
     },
     width() {
       return state.device.width