回到顶部

assets/main.css

+html{
+  font-family:"微软雅黑 Light" !important;
+}
 body {
   background: #f2f2f2;
   height: 100%;
   width: 100%;
   min-width: 1120px;
+  font-family:"微软雅黑 Light"
 }
 #newBridge .nb-middle{
   display: none !important;
 }
 #newBridge .icon-right-center{
-  bottom: 100px !important;
+  bottom: 150px !important;
   top: auto !important;
 }
 .min-win{

components/footer.vue

@@ -13,7 +13,7 @@
             <p class="ft-12 tc color-ccc">欣新房车助手小程序</p>
           </div>
           <div class="footer-scan">
-            <img src="../assets/images/dfcapp.png" alt="欣新房车，让生活更美好"/>
+            <img src="https://mgmt.dfangche.com/xxfccn/image/qrcode/appQrcode.png" alt="欣新房车，让生活更美好"/>
             <p class="ft-12 tc color-ccc">滴房车App(欣新旗下)</p>
           </div>
         </div>

components/goTop.vue

+
+<template>
+  <div id="goTop">
+
+    <div class="show-go-top" v-show="goTopShow" @click="goTop">
+      <img style="width: 20px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjhGNUZDOUNDQTA4MTFFOTk5MENGOTY5QzExODBBNEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjhGNUZDOUJDQTA4MTFFOTk5MENGOTY5QzExODBBNEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY2NzE3NzI0LTA0YmUtYmU0Mi05MWNiLTdhMmEzYjNhZjkyMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpmOWM5ZDk3ZC02OTQwLWJkNGYtODJjMC02MTdkYTY5MDlkYmEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5ok33PAAAA1UlEQVR42mL8//8/A7UBEwMNwKihA2OoLxC/AmIHok0FJSk8WBeIf/2HgD9AHEhAPRjjk5QE4sdQA/8hGVxIrqFcQHwCyaBcIH74HwEmAzEzKYaCFG9EMqAUyeVnkMQ3ATE3sYZOQ9I4DU2OB4g3I8mDLJEgZGghkoaNOLwIEpuCpA4ULNq4DPWDht9/aHhyEYiQIiD+C1X/AYid0Q01B+KvUAWgGJchJukAcRAQf4Pq24Ju6F4kG3WJNBDZQXuAmB/dUF5oBDiRaCBWzDhaSFMdAAQYAIXvsMke49Y7AAAAAElFTkSuQmCC"/>
+      <div class="goTop">回到顶部</div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "goTop",
+    data() {
+      return {
+        scrollTop: "",
+        goTopShow: false
+      };
+    },
+    watch: {
+      scrollTop(val) {
+        if (this.scrollTop > 500) {
+          this.goTopShow = true;
+        } else {
+          this.goTopShow = false;
+        }
+      }
+    },
+    methods: {
+      handleScroll() {
+        this.scrollTop =
+          window.pageYOffset ||
+          document.documentElement.scrollTop ||
+          document.body.scrollTop;
+        if (this.scrollTop > 500) {
+          this.goTopShow = true;
+        }
+      },
+      goTop() {
+        let timer = null,
+          _that = this;
+        cancelAnimationFrame(timer);
+        timer = requestAnimationFrame(function fn() {
+          if (_that.scrollTop > 0) {
+            _that.scrollTop -= 50;
+            document.body.scrollTop = document.documentElement.scrollTop =
+              _that.scrollTop;
+            timer = requestAnimationFrame(fn);
+          } else {
+            cancelAnimationFrame(timer);
+            _that.goTopShow = false;
+          }
+        });
+      }
+    },
+    created(){
+      if (typeof window !== 'undefined') {
+        window.addEventListener('scroll', this.handleScroll);
+      }
+    },
+    destroyed() {
+      window.removeEventListener("scroll", this.handleScroll);
+    }
+  };
+</script>
+
+<style scoped>
+  .show-go-top{
+    position: fixed;
+    right: 40px;
+    bottom: 80px;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    background: #333;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+  }
+  .show-go-top:hover .goTop{
+    display: block !important;
+  }
+  .goTop {
+    display: none;
+    position: fixed;
+    right: 40px;
+    bottom: 80px;
+    width: 40px;
+    height: 40px;
+    font-size: 12px;
+    padding: 3px;
+    text-align: center;
+    background: #1bbb9f;
+    color: #fff;
+    cursor: pointer;
+    z-index: 9;
+  }
+  .goTop:hover .goTopIcon {
+    color: rgba(51, 153, 255, 1);
+  }
+  .goTopIcon {
+    font-size: 20px;
+    color: rgba(51, 153, 255, 0.8);
+  }
+</style>

components/vehicleBanner.vue

@@ -3,7 +3,7 @@
     <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.cover" style="width:100%;" :alt="item.title"/>
+          <img :src= "item.cover" style="width:100%;min-width: 1120px;" :alt="item.title"/>
         </li>
       </ul>
       <!--<div class="status">-->
@@ -150,7 +150,8 @@
     display: flex;
     justify-content: center;
   }
-  @media screen and (min-width:1120px) and (max-width:1200px){
+
+  @media screen and (max-width:1200px){
     .box{
       position:relative;
       height:150px;

pages/aboutXx.vue

@@ -92,6 +92,7 @@
         </div>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -101,9 +102,11 @@
   import menuModal from "../components/menu";
   import footerModal from "../components/footer";
   import vehicleBanner from "../components/vehicleBanner"
+  import GoTop from "../components/goTop";
   export default {
     transition: "bounce",
     components: {
+      GoTop,
       menuModal,
       footerModal,
       vehicleBanner

pages/activity.vue

@@ -41,6 +41,7 @@
         </div>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -50,9 +51,11 @@
   import menuModal from "../components/menu";
   import footerModal from "../components/footer";
   import vehicleBanner from "../components/vehicleBanner"
+  import GoTop from "../components/goTop";
   export default {
     transition: "bounce",
     components: {
+      GoTop,
       menuModal,
       footerModal,
       vehicleBanner

pages/activityList/_id.vue

@@ -36,6 +36,7 @@
        </div>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -46,9 +47,11 @@
   import footerModal from "../../components/footer"
   import Swiper from 'swiper';
   import 'swiper/dist/css/swiper.min.css';
+  import GoTop from "../../components/goTop";
   export default {
     transition: 'bounce',
     components: {
+      GoTop,
       menuModal,
       footerModal
     },

pages/campsite.vue

@@ -57,6 +57,7 @@
         </ul>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -66,9 +67,11 @@ import axios from '../plugins/axios';
 import menuModal from "../components/menu";
 import footerModal from "../components/footer";
 import vehicleBanner from "../components/vehicleBanner"
+import GoTop from "../components/goTop";
 export default {
   transition: "bounce",
   components: {
+    GoTop,
     menuModal,
     footerModal,
     vehicleBanner

pages/campsiteDetails/_id.vue

@@ -101,6 +101,7 @@
 
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -111,9 +112,11 @@ import menuModal from "../../components/menu";
 import footerModal from "../../components/footer";
 import Swiper from "swiper";
 import "swiper/dist/css/swiper.min.css";
+import GoTop from "../../components/goTop";
 export default {
   transition: "bounce",
   components: {
+    GoTop,
     menuModal,
     footerModal
   },

pages/news.vue

@@ -41,6 +41,7 @@
         </div>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -50,12 +51,14 @@
   import menuModal from "../components/menu";
   import footerModal from "../components/footer";
   import vehicleBanner from "../components/vehicleBanner"
+  import GoTop from "../components/goTop";
   export default {
     transition: "bounce",
     components: {
       menuModal,
       footerModal,
-      vehicleBanner
+      vehicleBanner,
+      GoTop
     },
     data() {
       return {

pages/newsList/_id.vue

@@ -34,6 +34,7 @@
         </div>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -44,9 +45,11 @@
   import footerModal from "../../components/footer"
   import Swiper from 'swiper';
   import 'swiper/dist/css/swiper.min.css';
+  import GoTop from "../../components/goTop";
   export default {
     transition: 'bounce',
     components: {
+      GoTop,
       menuModal,
       footerModal
     },

pages/tour.vue

@@ -59,15 +59,16 @@
               <h2 style="font-size: 20px;font-weight:400;margin:0 0 18px 6px">{{item.name}}</h2>
               <h6 style="font-size: 14px;font-weight:400;margin:0 0 54px 14px">{{item.describe}}</h6>
 
-              
+
               <button class="buttonDetails">旅行详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
-            
+
             </div>
             </nuxt-link>
           </li>
         </ul>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -77,9 +78,11 @@
   import menuModal from "../components/menu"
   import footerModal from "../components/footer"
   import vehicleBanner from "../components/vehicleBanner"
+  import GoTop from "../components/goTop";
   export default {
     transition: 'bounce',
     components: {
+      GoTop,
       menuModal,
       footerModal,
       vehicleBanner

pages/tourDetails/_id.vue

@@ -154,6 +154,7 @@
         </div>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -165,10 +166,12 @@ import footerModal from "../../components/footer";
 
 import Swiper from "swiper";
 import "swiper/dist/css/swiper.min.css";
+import GoTop from "../../components/goTop";
 // import { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData';
 export default {
   transition: "bounce",
   components: {
+    GoTop,
     menuModal,
     footerModal
   },

pages/vehicle.vue

@@ -52,12 +52,14 @@
         </div>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
 
 <script>
   import axios from '../plugins/axios'
+  import GoTop from "../components/goTop";
 
   import menuModal from "../components/menu";
   import footerModal from "../components/footer";
@@ -67,7 +69,8 @@
     components: {
       menuModal,
       footerModal,
-      vehicleBanner
+      vehicleBanner,
+      GoTop
     },
     data() {
       return {

pages/vehicleList/_id.vue

@@ -92,6 +92,7 @@
         </div>
       </div>
     </div>
+    <go-top></go-top>
     <footer-modal></footer-modal>
   </div>
 </template>
@@ -102,9 +103,11 @@
   import footerModal from "../../components/footer"
   import Swiper from 'swiper';
   import 'swiper/dist/css/swiper.min.css';
+  import GoTop from "../../components/goTop";
   export default {
     transition: 'bounce',
     components: {
+      GoTop,
       menuModal,
       footerModal
     },