出错页面添加

assets/main.css

@@ -3,7 +3,6 @@ body {
     height: 100%;
     width: 100%;
 }
-
 .min-win{
   width: 1200px;
 }
@@ -33,7 +32,7 @@ body {
   margin: 20px 0;
   width: 480px;
 }
-.hot-t-r{
+.hot-t-r, .content-t-l{
   border-bottom: none;
   margin-bottom: 0;
   border-bottom: 1px solid #eee;
@@ -235,6 +234,50 @@ h2{
 .tc{
   text-align: center;
 }
+.scroll_content{
+  min-height: 700px;
+}
+.scroll_content::-webkit-scrollbar {
+  width:0px;
+  height:0px;
+}
+.scroll_content .-o-scrollbar{
+  -moz-appearance: none !important;
+  background: rgba(0,255,0,0) !important;
+}
+.scroll_content{
+  -ms-scroll-chaining: chained;
+  -ms-overflow-style: none;
+  -ms-content-zooming: zoom;
+  -ms-scroll-rails: none;
+  -ms-content-zoom-limit-min: 100%;
+  -ms-content-zoom-limit-max: 500%;
+  -ms-scroll-snap-type: proximity;
+  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+  -ms-overflow-style: none;
+  overflow: auto;
+}
+.swiper-button-prev.swiper-button-black{
+  background-image: url('/assets/images/l.png') !important;
+}
+.swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black{
+  background: #000;
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  cursor: pointer;
+  background-repeat:no-repeat;
+  background-position:center;
+}
+.swiper-button-next.swiper-button-black{
+  background-image: url('/assets/images/r.png') !important;
+}
+.swiper-button-prev.swiper-button-black:hover, .swiper-button-next.swiper-button-black:hover{
+  opacity: 0.7;
+}
 
 /*路由跳转页面动画*/
 /*.page-enter-active,*/

components/bannerActivity.vue

@@ -88,9 +88,9 @@
       },
       // 初始化加载
       int (time){
-//        this.timerId = setInterval(()=> {
-//          this.next();
-//        }, time);
+        this.timerId = setInterval(()=> {
+          this.next();
+        }, time);
         // 初始化样式
         this.intStyle = {
           width: this.width + 'px',
@@ -160,6 +160,9 @@
     margin: 0 10px;
     opacity: 0.6;
   }
+  span:hover{
+    opacity: 0.7;
+  }
   span.prev{
     float:left;
   }

layouts/error.vue

+<template>
+  <div class="container error-container">
+    <div v-if="error.statusCode === 404" class="content-error">
+      404
+    </div>
+    <div v-else  class="content-error">
+      服务器开小差了
+    </div>
+    <nuxt-link to="/"><span class="to-home">首 页</span></nuxt-link>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['error'],
+    layout: 'blog' // 你可以为错误页面指定自定义的布局
+  }
+</script>
+<style>
+  .to-home{
+    padding: 10px;
+    color: #1bbb9f;
+    border: 1px solid #1bbb9f;
+    text-align: center;
+  }
+  .to-home:hover{
+    background: #1bbb9f;
+    color: #fff;
+  }
+  .error-container{
+    width: 1120px;
+    margin: 200px auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 200px;
+    align-items: center;
+  }
+  .content-error{
+    height: 200px;
+  }
+</style>

pages/activity.vue

 <template>
-  <div>
+  <div class="scroll_content">
     <menu-modal></menu-modal>
     <div class="main-container">
       <vehicle-banner

pages/index.vue

@@ -219,7 +219,7 @@
               <div class="gallery-thumbs-box">
                 <div class="swiper-container gallery-thumbs">
                   <div class="swiper-wrapper swiper-wrapper-thu flex-aic-jcb">
-                    <div class="swiper-slide"  v-for="(item,index) in vehicleList0" :key="item.id"  @click="changeImgIndex(index)">
+                    <div class="swiper-slide"  v-for="(item,index) in vehicleList1" :key="item.id"  @click="changeImgIndex(index)">
                       <img :src="item.sUrl"  :class="preIndex==index?'active':''" alt="">
                     </div>
                   </div>
@@ -241,7 +241,7 @@
               <div class="gallery-thumbs-box">
                 <div class="swiper-container gallery-thumbs">
                   <div class="swiper-wrapper swiper-wrapper-thu flex-aic-jcb">
-                    <div class="swiper-slide"  v-for="(item,index) in vehicleList0" :key="item.id"  @click="changeImgIndex(index)">
+                    <div class="swiper-slide"  v-for="(item,index) in vehicleList2" :key="item.id"  @click="changeImgIndex(index)">
                       <img :src="item.sUrl"  :class="preIndex==index?'active':''" alt="">
                     </div>
                   </div>
@@ -263,7 +263,7 @@
               <div class="gallery-thumbs-box">
                 <div class="swiper-container gallery-thumbs">
                   <div class="swiper-wrapper swiper-wrapper-thu flex-aic-jcb">
-                    <div class="swiper-slide"  v-for="(item,index) in vehicleList0" :key="item.id"  @click="changeImgIndex(index)">
+                    <div class="swiper-slide"  v-for="(item,index) in vehicleList3" :key="item.id"  @click="changeImgIndex(index)">
                       <img :src="item.sUrl"  :class="preIndex==index?'active':''" alt="">
                     </div>
                   </div>
@@ -608,7 +608,7 @@ export default {
     position: relative;
     margin-bottom: 25px;
   }
-  .v-type-active{
+  .v-type-active, .v-type:hover{
     background: #1bbb9f;
     color: #fff;
   }

pages/vehicle.vue

@@ -122,10 +122,8 @@
         let {
           data: { data }
         } = await axios.get(`/api/uccn/vehicleModel/app/unauth/findVehicleModelPage?page=1&limit=100`);
-        // console.log(data);
         this.totalCount = data.totalCount;
         data.data.map(function(item){
-//          item.modelParam = JSON.parse( item.modelParam);
           item.link = encodeURI('/vehicleList/' + item.id+'?name='+item.name);
           item.link = encodeURI(item.link);
           item.pictureList = item.picture.split(",");

pages/vehicleList/_id.vue

 <template>
-  <div>
+  <div class="vehicle-container">
     <menu-modal></menu-modal>
     <div class="main-container" style="margin-top: 110px;">
       <div class="wrap">
@@ -69,7 +69,7 @@
         </div>
         <div class="flex-jcb">
           <div style="width: 800px;background: #fff;margin: 20px 0;padding: 20px;">
-            <h3 class="content-t">房车详情</h3>
+            <h3 class="content-t content-t-l" style="text-align: left;">房车详情</h3>
             <div class="models-details" v-html="detail.modelsDetails"></div>
             <h3 class="content-t">租车须知</h3>
             <div class="models-details" v-html="notice[0].value"></div>
@@ -313,19 +313,22 @@
     width: 474px;
     height: 325px;
   }
-  .swiper-wrapper-thu{
+  .vehicle-container .swiper-wrapper-thu{
     /*max-width: 293px;*/
     margin: 0 !important;
   }
-  .swiper-wrapper-thu img{
+  .vehicle-container .swiper-wrapper-thu img{
     width: 103px !important;
     height: 64px !important;
     border: 2px solid #fff;
   }
-  .swiper-wrapper-thu img.active{
+  .vehicle-container .swiper-wrapper-thu img.active{
     border: 2px solid #1bbb9f;
     padding: 5px;
     width: 103px;
     height: 64px;
   }
+  .vehicle-container .gallery-thumbs{
+    width: 540px !important;
+  }
 </style>