首页-接口联调

components/banner.vue

 <template>
-    <div class="banner" style="width:100%;height: 400px;">
+    <div class="banner">
         <div class="box">
             <ul>
                 <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
-                    <img :src= "item.image_url" style="width:100%;" :alt="item.name"/>
+                    <img :src= "item.cover" style="width:100%;" :alt="item.title"/>
                 </li>
             </ul>
             <div class="status">
             <span class="name-t" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''"
                   @mouseenter="changeBanner(index)"
                   @mouseleave="startLoop"
-            >{{item.name}}
+            >{{item.title}}
         </span>
             </div>
             <!--<div class="btn">-->
@@ -152,7 +152,7 @@
     }
     .box{
         position:relative;
-        height:100%;
+        height:500px;
     }
     span{
         display:block;
@@ -177,8 +177,7 @@
         transform: translateY(-50%);
     }
     .banner{
-        width:400px;
-        height:200px;
-        overflow:hidden;
+        width:100%;
+        max-height:500px;
     }
 </style>

components/bannerActivity.vue

@@ -3,14 +3,14 @@
     <div class="box">
       <ul>
         <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
-          <img :src= "item.image_url" style="width:100%;" :alt="item.name"/>
+          <img :src= "item.banner" style="width:100%;height: auto" :alt="item.title"/>
         </li>
       </ul>
       <div class="status">
             <div class="name-t" v-for="(item, index) in list" :key="item.id">
-              <div class="ft-20" v-if="index === current">{{item.name}}</div>
-              <div class="ft-14" v-if="index === current">活动时间：{{item.desc}}</div>
-              <div class="ft-14" v-if="index === current">活动地点：{{item.desc}}</div>
+              <div class="ft-20" v-if="index === current">{{item.title}}</div>
+              <div class="ft-14" v-if="index === current">活动时间：{{item.startTime}}至{{item.endTime}}</div>
+              <div class="ft-14" v-if="index === current">活动地点：{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
         </div>
       </div>
       <div class="btn">
@@ -112,20 +112,21 @@
     position:absolute;
     left:0;
     width:100%;
-    height:100%;
+    height:auto;
     font-size:inherit;
     color:#fff;
     font-size:80px;
     text-align:center;
     opacity:0;
     transition: all 1.5s;
+    list-style: none;
   }
   .active{
     opacity:1;
     transition: all 1.5s;
   }
   ul{
-    height:100%;
+    height:auto;
   }
   .name-t div{
     /*font-size: 14px;*/
@@ -170,7 +171,7 @@
   }
   .banner-active{
     width: 1200px;
-    height: 250px;
-    overflow:hidden;
+    height: 312px;
+    /*overflow:hidden;*/
   }
 </style>

components/footer.vue

@@ -9,7 +9,7 @@
             <p class="ft-12 tc">欣新房车微信公众号</p>
           </div>
           <div class="footer-scan">
-            <img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
+            <img src="../assets/images/xxfczs.jpg" alt="欣新房车，让生活更美好"/>
             <p class="ft-12 tc">欣新房车助手小程序</p>
           </div>
           <div class="footer-scan">

nuxt.config.js

@@ -20,7 +20,9 @@ module.exports = {
     loading: '~/components/loading.vue',
 
     plugins: [
-        { src: '~plugins/muse-ui.js', ssr: true }
+      { src: '~plugins/muse-ui.js', ssr: true },
+      { src: '~plugins/loadMore.js', ssr: false },
+      { src: '~plugins/dateFormattor.js', ssr: false }
     ],
     build: {
 

package.json

@@ -21,6 +21,8 @@
     "multer": "^1.3.0",
     "muse-ui": "^2.1.0",
     "swiper": "^4.0.7",
+    "vue-infinite-loading": "^2.4.4",
+    "vue-infinite-scroll": "^2.0.2",
     "nuxt": "^1.0.0"
   },
   "devDependencies": {