Image.vue 页面的 pageSize 设置为 12

src/views/home/Image.vue

@@ -5,10 +5,14 @@
       <!--电影列表-->
       <el-col :md="24">
         <div>
-          <el-col v-for="(image, index) in dataList"
-                  :key="image.thumbnailUrl"
-                  :md="6" :sm="12" :xs="12"
-                  style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-col
+            v-for="(image, index) in dataList"
+            :key="image.thumbnailUrl"
+            :md="6"
+            :sm="12"
+            :xs="12"
+            style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px"
+          >
             <el-card :body-style="{ padding: '0px' }" class="card">
               <div class="imgs">
                 <el-image
@@ -16,13 +20,13 @@
                   fit="cover"
                   class="coverImg"
                   :src="image.thumbnailUrl"
-                  @click="showImages(index)">
-                </el-image>
+                  @click="showImages(index)"
+                />
               </div>
               <div style="padding: 14px;">
                 <span style="position: relative; bottom: 0; left: 0%; color:green">
-                  <i v-if="image.collected" class='el-icon-star-on' @click="collectItem(image)"/>
-                  <i v-else class='el-icon-star-off' @click="collectItem(image)"/>
+                  <i v-if="image.collected" class="el-icon-star-on" @click="collectItem(image)" />
+                  <i v-else class="el-icon-star-off" @click="collectItem(image)" />
                 </span>
                 <span style="position: relative; bottom: 0; left: 0; color:blue">
                   来自相册:
@@ -44,13 +48,13 @@
         -->
         <el-col :span="24" class="pagination">
           <el-pagination
-              background
-              :small="screenWidth <= 768"
-              layout="prev, pager, next"
-              :page-size="pageSize"
-              :current-page="currentPage"
-              :total="totalSize"
-              @current-change="handleCurrentChange"
+            background
+            :small="screenWidth <= 768"
+            layout="prev, pager, next"
+            :page-size="pageSize"
+            :current-page="currentPage"
+            :total="totalSize"
+            @current-change="handleCurrentChange"
           />
         </el-col>
       </el-col>
@@ -65,8 +69,8 @@
 </template>
 
 <script>
-import {getImages} from '@/api/image'
-import {collectItem} from "@/api/collect";
+import { getImages } from '@/api/image'
+import { collectItem } from '@/api/collect'
 
 export default {
   name: 'Image',
@@ -86,9 +90,9 @@ export default {
       // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
-      pageSize: 24,
+      pageSize: 12,
       totalSize: 0,
-      dataList: [],
+      dataList: []
     }
   },
   created() {