固定端口

front_end/src/views/hotel/hotelList.vue

@@ -1,15 +1,14 @@
 <template>
   <div class="hotelList">
-    <a-divider></a-divider>
     <a-layout>
         <a-layout-content style="min-width: 800px">
           <a-spin :spinning="hotelListLoading">
             <div class="card-wrapper">
-            <HotelCard :hotel="item" v-for="item in hotelList" :key="item.index" @click.native="jumpToDetails(item.id)"></HotelCard>
-              <div v-for="item in emptyBox" :key="item.name" class="emptyBox ant-col-xs-8 ant-col-lg-6 ant-col-xxl-4">
-              </div>
-            <a-pagination showQuickJumper :total="hotelList.totalElements" :defaultCurrent="1" @change="pageChange"></a-pagination>
-          </div>
+                <HotelCard :hotel="item" v-for="item in hotelList" :key="item.index" @click.native="jumpToDetails(item.id)"></HotelCard>
+                <div v-for="item in emptyBox" :key="item.name" class="emptyBox ant-col-xs-7 ant-col-lg-5 ant-col-xxl-3">
+                </div>
+                <a-pagination showQuickJumper :total="hotelList.totalElements" :defaultCurrent="1" @change="pageChange"></a-pagination>
+            </div>
           </a-spin>
       </a-layout-content>
     </a-layout>
@@ -26,12 +25,11 @@ export default {
   },
   data(){
     return{
-      emptyBox: [{ name: 'box1' }, { name: 'box2'}, {name: 'box3'}, {name:'box4'}]
+      emptyBox: [{ name: 'box1' }, { name: 'box2'}, {name: 'box3'}]
     }
   },
   async mounted() {
     await this.getHotelList()
-    console.log(this.hotelList)
   },
   computed: {
     ...mapGetters([
@@ -65,9 +63,10 @@ export default {
 <style scoped lang="less">
   .hotelList {
     text-align: center;
+    padding: 50px 0;
     .emptyBox {
       height: 0;
-      margin: 10px 20px
+      margin: 10px 10px
     }
     .card-wrapper{
       display: flex;

front_end/vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    devServer: {
+        port: 8000
+    }
+}