车型tab定位

assets/styles/base.scss

@@ -33,6 +33,9 @@ input[disabled] {
   display: flex;
   justify-content: space-between;
 }
+.flex{
+  display: flex;
+}
 
 .flex-aic-jcc-fdc{
   display: flex;
@@ -40,11 +43,16 @@ input[disabled] {
   justify-content: center;
   flex-direction: column;
 }
+.flex-jcb-fdc{
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
 .header-top{
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 1.87733rem;
+  height: px2rem(88px);
   position: fixed;
   z-index: 999;
   top: 0;
@@ -64,6 +72,15 @@ input[disabled] {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+.loading{
+  padding: 10px;
+  text-align: center;
+  color: #666;
+}
+
+.total-div{
+  font-size: px2rem(30px);
+}
 
 .main-padding{
   padding: 0.7rem 0.4rem;
@@ -131,10 +148,20 @@ a:active {
 body,
 html {
   @include wh(100%, 100%);
-  background-color: $fill-base;
+  background-color: #fff;
 }
 
 img {
   display: block;
   max-width: 100%;
 }
+.isFixed {
+  position: fixed;
+  width: 100%;
+  top: px2rem(88px);
+  background: #fff;
+  z-index: 999;
+}
+.bt-line{
+  border-bottom: 1px solid #dfdfdf;
+}

pages/activity.vue

@@ -36,9 +36,13 @@
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -89,6 +93,7 @@
     created() {
       // handleScroll为页面滚动的监听回调
       window.addEventListener('scroll', this.handleScroll);
+      this.preventRepeatReuqest = true;
       this.getAll();
     },
     async asyncData() {

pages/campsite.vue

@@ -33,9 +33,13 @@
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -87,6 +91,7 @@
     created() {
       // handleScroll为页面滚动的监听回调
       window.addEventListener('scroll', this.handleScroll);
+      this.preventRepeatReuqest = true;
       this.getType();
       this.getAll();
     },
@@ -121,6 +126,7 @@
       chooseSelect(e) {
         console.log(e.target.value);
         this.listQuery.tagId = e.target.value;
+        this.preventRepeatReuqest = true;
         this.getAll();
       },
       getType() {

pages/news.vue

@@ -3,6 +3,7 @@
     <Head/>
     <ul
       v-if="dataDetail.length"
+      id="scroll-area"
       type="1"
       class="main-padding">
       <router-link
@@ -11,17 +12,22 @@
         :key="item.id"
         class="flex-jcb news-item">
         <img
-          :src="item.cover"
+          :src="item.coverImage"
           class="tour-img-home">
         <div class="tour-home-r">
-          <div class="ellipsis2">{{ item.name }}</div>
+          <div class="ellipsis2">{{ item.title }}</div>
+          <div class="ellipsis2 epitome">导语：{{ item.epitome }}</div>
+          <div class="epitome">{{ item.addTime.substring(0, 10) }}</div>
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
-    <Footer/>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -67,23 +73,51 @@
       ...mapGetters(["userInfo"])
     },
     created() {
+      this.preventRepeatReuqest = true;
+      window.addEventListener('scroll', this.handleScroll);
       this.getAll();
     },
     methods: {
       chooseSelect(e) {
         console.log(e.target.value);
         this.listQuery.tagId = e.target.value;
+        this.preventRepeatReuqest = true;
         this.getAll();
       },
+      handleScroll: function () {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+        // 设备/屏幕高度
+        let scrollObj = document.getElementById("scroll-area"); // 滚动区域
+        if(scrollObj){
+          let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
+          //滚动条到底部的条件
+          if(document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
+            if (this.touchend) {
+              return;
+            }
+            //防止重复请求
+            if (this.preventRepeatReuqest) {
+              return;
+            }
+            this.preventRepeatReuqest = true;
+            //数据的定位加20位
+            this.listQuery.page = this.currentPage + 1;
+            this.getAll();
+          }
+        }
+      },
       getAll() {
         let t = this;
         axios.get('/api/uccn/article/app/unauth/list?type=1&page='+this.listQuery.page+'&limit='+this.listQuery.limit)
           .then(function(response) {
             t.totalCount = response.data.data.total;
-            t.dataDetail = response.data.data.list;
+            let list = response.data.data.list;
+            t.dataDetail = [...t.dataDetail, ...list];
+            t.currentPage = response.data.data.pageNum;
             if (response.data.data.total < t.listQuery.limit*t.listQuery.page) {
               t.touchend = true;
             }
+            t.preventRepeatReuqest = false;
           });
       },
     },

pages/tour.vue

@@ -13,7 +13,7 @@
       @next="next"
       @change="changeBanner"
       @click="bannerClick"/>
-    <div class="main-padding"> 共{{ totalCount }}个旅行路线</div>
+    <div class="main-padding total-div"> 共{{ totalCount }}个旅行路线</div>
     <ul
       v-if="dataDetail.length"
       id="scroll-area"
@@ -33,9 +33,13 @@
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -88,6 +92,7 @@
       // handleScroll为页面滚动的监听回调
       window.addEventListener('scroll', this.handleScroll);
       this.getType();
+      this.preventRepeatReuqest = true;
       this.getAll();
     },
     async asyncData() {
@@ -121,6 +126,7 @@
       chooseSelect(e) {
         console.log(e.target.value);
         this.listQuery.tagId = e.target.value;
+        this.preventRepeatReuqest = true;
         this.getAll();
       },
       getType() {

pages/vehicle.vue

@@ -24,19 +24,43 @@
         v-for="item in dataDetail"
         :to="{ path: 'vehicleDetail', query:{id: item.id, name:item.name }}"
         :key="item.id"
-        class="flex-jcb news-item">
+        class="news-item flex">
         <img
           :src="item.coverPic"
           :alt = "item.name"
-          class="tour-img-home">
-        <div class="tour-home-r">
-          <div class="ellipsis2">{{ item.name }}</div>
+          class="vehicle-img-list">
+        <div class="vehicle-list flex-jcb-fdc">
+          <div class="ellipsis2 vehicle-img-list-name">{{ item.name }}</div>
+          <div class="flex-aic-jcb">
+            <span
+              v-for="(iitem,iindex) in item.uccnCataList"
+              :key="iitem.id"
+              class="flex-aic config">
+              <img
+                v-if="iindex==0"
+                style="margin-right: 5px;"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg==">
+              <img
+                v-if="iindex==1"
+                style="margin-right: 5px;"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII=">
+              <img
+                v-if="iindex==2"
+                style="margin-right: 5px;"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC">
+              {{ iitem.name }}
+            </span>
+          </div>
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -87,6 +111,7 @@
     created() {
       // handleScroll为页面滚动的监听回调
       window.addEventListener('scroll', this.handleScroll);
+      this.preventRepeatReuqest = true;
       this.getAll();
     },
     async asyncData() {
@@ -162,10 +187,24 @@
   .tour-home-r, .news-home-r{
     width: 58%;
   }
-  .tour-img-home, .news-home-img{
-    width: px2rem(300px);
-    height: px2rem(150px);
+  .vehicle-img-list-name{
+    font-size:px2rem(24px);
+    font-weight: 700;
+  }
+  .vehicle-img-list{
+    width: px2rem(277px);
+    height: px2rem(225px);
   }
+  .vehicle-list{
+    border-bottom: 1px solid #dfdfdf;
+    margin-left: px2rem(20px);
+    width: 100%;
+    padding: px2rem(20px);
+    .config{
+      color: #999;
+    }
+  }
+
   .order-page {
     padding: px2rem(88px) 0 3px 0;
 

pages/vehicleDetail/index.vue

@@ -15,66 +15,152 @@
       @next="next"
       @change="changeBanner"
       @click="bannerClick"/>
-    <h1>{{ detail.name }}</h1>
-    <div class="flex-aic">
-      <span
-        v-for="(iitem,iindex) in detail.uccnCataList"
-        :key="iitem.id"
-        class="flex-aic config">
-        <img
-          v-if="iindex==0"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjhENDhDNkJDQjE0MTFFOTk0MUREQkQzM0YxMUZBRUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjhENDhDNkFDQjE0MTFFOTk0MUREQkQzM0YxMUZBRUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YzVjMmRkNzUtNGY5Yi01YjRhLTk4ZTYtYmVjNjQ3ODNiZTllIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Phl/8IYAAAC0SURBVHjaYvz//z8DtQATAxXBSDJs1qxZ74A4hlLDWKC0IBCLAA0UAtIdQCwOpV8BsS4e/XfS0tKuoBsGA41AnAplGwNxDxD343MN0AG9QANLsIXZdyT2DyJ9l4vPZT+h3gS56A0QHyA1zEBABYhNgXgvlC8OxfgAGxB/wmZYNhSTCv7DggvZsGYgnkeiQUlAXIvNZe+AsfKAFJNA6RNbDngPDWxSwRuoXjBgHC2CSAYAAQYAfXwuGq186TUAAAAASUVORK5CYII=">
-        <img
-          v-if="iindex==1"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY1Njc2QjBDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY1Njc2QUZDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyNzJmMTRhLTgyMTMtYTY0Zi1iODBlLTUzN2QwNTZiNjYwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6RyQnQAAABs0lEQVR42uyVu0vDUBTGk5oWtUodCiK+QVBElC4+QEHE/0D6FwhBcHByESf/BSczO7i4iIOgDq6CDj4QJxFFFB+tIr5j/A58KTdpIqVSQfDAr4Hcc7977ndOqO44jlaqiGgljL8rbsiPZVlJPExQB6I/0HsC26ZpLuXEEQ1gGhyDGyBdfgM2KAMxoBcg3g26gEdcnqdgEuzwXTmoAffgucDKZ0G/xxaGOpP1YBg0gxOwBjJci/Mmar5OS6LqeyOgwZIwAVrALhgCHWCBa2nQDt4V4QgLSNLKPPFPJqZY3TrYAD1gCqyCI7DHvtiKuHAABtQJNAJ8i3HjGbgA1TxYch9pUzZAXHJf1cYbPkvEr30wDmbYHJmAB3AFEqAPtIIPny1CFQsJbWgtmyObBkEFq63kIbf03vYV9qJYmyducyFNoXmKycSM0c8VcMix9U/LNQ/Qwjx36FtKuXqcSLVtYBT08iNzhQ1+OIkwWwwmLoItNtbdLBWd8+A7TpG/oTIAnUHT4vok03BJwiLzzVo2SFyu3wjmWGGxMcKp8ojLi2XQxKsVG9LozVyX///mfl38S4ABAAkGaQ2QPNTRAAAAAElFTkSuQmCC">
-        <img
-          v-if="iindex==2"
-          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY1Njc2QjRDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY1Njc2QjNDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyNzJmMTRhLTgyMTMtYTY0Zi1iODBlLTUzN2QwNTZiNjYwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Lid0AAAACXklEQVR42rTVX2iNcRjA8XM2m1GHbTE0Oakh3FitkD9JufAnXGy5ELKLU0pRLoiUC26UpLg5SXKN2GoXFFohzZ+iCGMWUQrzn20c3199j17nvGNLe+vT9nbe3/N73ud53vdN5nK5xHAdI/L/ZLPZga4ZiXKvTeIn+vAd/XELMpnMn8FjjhIsxDLMwSSU4T0e4xra8OqfmRccaWzBSkxGD17jGyqxCsvRiOM4hx+DCT4De9GEezjq326D16AOi9xkqhueslwDBg+3vhPrveUjuBCTwEWcwS1sxz68w9nCuuaPcm8zuIpWjEKtv8/FJoz3PGT70OtGu0naphcFn4k1eIYTWGJ5pvt7k+ehuaVYiwM2+KTrV5tQUfB6zEIHrjiCNU5IOFIqN7uxmIAuSxhGcymq4oLXufA2PiNnkBBgCiqc6ypLVek1IehTPPEuU3ENrXZxt5uE5o7DDmx0iqqt7QbMxkR78AEvMc21f53zpHXNWZ5qa1lqsIrI7D8vqEDsKL71PO2IvfHpO+Sc78J8HLMvKTe/7oa1jmNvXPBOf6h3jst8KB7hppn22ZPLBUkusGc38DGuoXdwHw2OYb/Z91qO8Hh/sYHRI9R9hbW+ZPZFmT/AeezHZrQ4Ad1u1ObYdRb0Jsz/OksX1nyNCx4yPO1D0oxPuBt567WYWU8k4zA12yzFYRMZ8N0SAh10Qhqd6Xlm1WVWDY7cYp/IF65pHcxbMbwv9rgovHK3RsYuNHSMD1boQftQX7kJb2+3dY5+LPLz3fE/H4uEn7N2x2tIn7nf3R7OD3RJYhiPXwIMAOl1oVeVFxg4AAAAAElFTkSuQmCC">
-        {{ iitem.name }}
-      </span>
-    </div>
-    <div class="member-list member-list-c">可用租赁 详情可咨询客服</div>
-    <div
-      style="display: flex;"
-      class="member-list">
-      <div style="min-width: 45px;">会员价</div>
-      <div class="member-list-c">
+    <div class="detail-main-container">
+      <div>
+        <h1 class="vehicle-detail-name">{{ detail.name }}</h1>
+        <div class="flex-aic vehicle-detail-config">
+          <span
+            v-for="(iitem,iindex) in detail.uccnCataList"
+            :key="iitem.id"
+            class="flex-aic config">
+            <img
+              v-if="iindex==0"
+              style="margin-right: 5px;"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg==">
+            <img
+              v-if="iindex==1"
+              style="margin-right: 5px;"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII=">
+            <img
+              v-if="iindex==2"
+              style="margin-right: 5px;"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC">
+            {{ iitem.name }}
+          </span>
+        </div>
+      </div>
+
+      <div class="vehicle-lower">房车租赁<span>900</span>元起/天</div>
+      <div
+        style="display: flex;"
+        class="member-list">
+        <div class="member-list-c">
+          <div
+            v-for="ictem in detail.userMemberLevel"
+            :key="ictem.level"
+            class="flex-aic member-list-name">
+            <img
+              v-if="ictem.level == 1"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY2RDk5NzRDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY2RDk5NzNDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyNzJmMTRhLTgyMTMtYTY0Zi1iODBlLTUzN2QwNTZiNjYwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7q1ObTAAAFEklEQVR42rRVW2gcZRQ+Mzu72WRnZ3Z2N7eG7m43NpWKiSJe0DZFIa3G+JAXQQSt+hDpiyARb4ggCCpeHlLBVxW0fav4ZFVohPSWajFtEkmyS9Jskp3dTC57352b3z+bDS1o6YMuzM7t/8/5zvd95wxn2zb9Xz+B/Y2MjNx2Ec/zVC6XyeVykdfr5QzDuCNE/J0sKpVK1IZfV1fXd8ViMcZxHP0nwRltLPjRo0dHlYD83NLS4gmgpzuh83bBOYYQFFBra+vdoOX1P65epcVk4jWgf9Dvlxy6kMTF1u4c/x78ZjQIbJum2e7xeD7A9flTp753ra9rFIt3u1Op5TPp9Oo7CB5vavKa2Me0s/8xOAvqdrtJ13Xa2NggwzRZ8CGvt2mqUMi/l0wmlIWFBBUKBWoCJcVCYU8ymfxwYX7ujK7XHkcIPZvNUrVaZaLzt7jFsiyqVMpP9Pf3j0SjscKvv/zMpdX0S5nMNq2srBBooI6ODqyzaW01Tb6WZjINkzKZzL2FYuHU0NAzXw8PDwtTU39KMzMzX6Kaq4xSJzhDnc/n134bP/dsb999ZKGSdFolVU0TFlJPTw/19fXRlSuTNDujkrurq843aNY0rS21vPxGMBikv2ZngFx4l+N4hyW+gbytvX02kUyOfv7pJwQagLZAouiHvysObSaEZa6xbZMBaehCok+k8fFz9PZbb9J2Lv+iLAfUBv1Cg59qpULd3Xd9FpDlE7lcPl6r6c7mYFBxGmjq+jXy+XwUCCgUUBQgdzkcm4blgOvt7ZvcuzfyQ7lcakI4A4e5Sz6znNfbzARTS6Ui2djQDPE6O9rpwIEe6o7HKQOa2tpayeMWyDQNcgkC6dhngP9gMDQnCIKNfc0No/A3WY9My2AovQyJCfEkyQ8H1Wh1dYW84P7Rxw6x6mhrawvJERy7Dd1wkFdrVR5nD9Xbl7uFFueZzTE7JuDv+9ltJrtOfr+PdFA0rV8H6na6dm2KzRfieI5ymznikYHHYvSDwazM4tg7DcM3AsPPFA6FxGPHnnxIwIBi7yuVKmWzmlMR8/+F8xMkCC4E5nG/DWosqoH3zs5OGhoaehpOOYjKC4hn7AZnGQXBQwMDA6cDshRhiXggsy3T0YIlyOdysGUTGqgIi2ad5FiCZ27a0DTWicHDhw997NBrmrcij8UidOnSRd/Y2JipQyCWsAIHiaJIoVCYlGCYYvviJEoKZk2bk6gGPURRAt86jZ08aU3PTOcxOc0dauqcQ+17Ll+eHNU2tARqfhg94AoEgiRHJYi3zcYtKbDf0o0bELQbjbMOdArt2dNJc3NzZNYpNs7+dHYtqCjfhMLh07Dtj3y9Q4UtTds4rq6pLzO3uGGxnp79NDg4CJRhisf3OYdf9NGRI/2oMkbhcIiNYYpEIsTWY9540KkvYMY8j45f3aVFlqWVaDRyHD5l7UvsvLCwQMlE0rlOpVK0vJxyHDY/P0+bm5u0jYomJiagRd6xIksgwP/RWPQLWZZ/d3Ssf2nKPlVV32cNYVqm423W4ptbW5rH7fboumFJkiRbeLe4uFhlcwXXdmolVYbwCuvmEroYQpKaVl+FRl9hOs45wTFK92PY5IH+AmgxaliNcicxCT8CAi+OaigUfARJHgDqb+Fz9oGwUJUGZ72ChE9BYG9LS4sbiUVQdNAvSfMcUxUfaI61bn0Uc7sfDlZuw03Mkuzs2umBxvP6NXteb3aGHmvdTOC/BRgAuNux8NL5oHcAAAAASUVORK5CYII=">
+            <img
+              v-if="ictem.level == 2"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY2RDk5NzBDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY2RDk5NkZDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyNzJmMTRhLTgyMTMtYTY0Zi1iODBlLTUzN2QwNTZiNjYwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiLz4gPC9y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">
+            <img
+              v-if="ictem.level == 3"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY2RDk5NkNDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY2RDk5NkJDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyNzJmMTRhLTgyMTMtYTY0Zi1iODBlLTUzN2QwNTZiNjYwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz648742AAAFfElEQVR42rRVa0xTZxh+zumhF2hL70BbBKktxa5IUQTUTd0i3l0yp8bMOWPY2GaybD+2n8uyH0sWfy0ZS8h0Ubfs31SM8QIyqlGnRoYEodwELNgC5dLS0vb0dvadYyQ6L/9s8vVyvu973ud7nud7S3Ech9f1Yvi3hoaGF05mMhlhOBwOmExGRpqtaXw0NnREoZCn+vr64fV6kZ2d/cK9TU1NoF9VmaZpxONxdHd3welcUW8usn4SY7kvw+EQAoEAGIYRir90/8smeLWSySTYeBQyWTaYLMWPA/0ePJqYOTo8/DCfpjJQKBSkQBbS6TReJC/zMvD5+aCwede7u3etrl73dY5coXS+UYbSUivmg7PN9zpufdHr6b4tkUghFudQ0WhUQKco6tXgc3MzsFhs5sP1DSf0BvM73rFx3O3oQIow1KjV0Gj0q/fsP3xroK/71Jm//jySSiUjcrmcikQizxR4Bpx/ODvLA1vN3373Q49/IqA8e/Yc5kMh5OTkQJmrRGfnPSRTKSiVcmzduv3ggYOfOo8f+6mW6M/KZDKQE0AkEj2vOW+eVCrFZ59/1ToVmFNeutQqmGY0GeFylaOszA65XAGDXo+FSBQnT/wGrSHftXXbe03B4ByysrIoMhZNpv+vc13dtkNavcHe3u6GSpWLSDjMxxCVFaWgKRqWEovAjKYpMhi0XWmBs7zyI7O5eF0sFuXEYvGiuYvgvOM86wrXqvqhoVEhKel0CvyysbEx3OnwkPhNIkQYxmILSCQT4GUYGRnBzOwcX+DD6EJEkPaJLMzT4LlKFZUlkRT5vRNCFnmZatdUQ52rEtYQw0jRNLQ6HWZmpnG/twcsm8DU1CQMeXkOmhaJCOsMAeeek4XMiTNpThqPx4Rk1NbWwLHcIrAcGBwgjFl4PH2kQArWZTaUO8sJOCuQoCiayXCcmDCnn6SFfjop8/MhNpFgA7yJLNnA60dqQK1RE31FaGu/Ar1BJ3ghkYjJkIBNsML3VCpFExnjxEzuGc0TiYQQwSVFxXk2m80kk0mFSP3d1k76hw855PfKlZXYuWMn7KVl0Om0GPU+hNvthkwqgSo3F3b78lUVFZWbQ6Fght+7qDkBJMw57H7/QMuDYa+yID8PKnUuAtMBnDnTjC1b6mC1WojhMqhVavR6etHS2kK0nsKG9euE5z29Hmrvvg9+TbDsUnL81CJzjUaF6po3d4z7p52NjT97fD7f9Nq1a0jGRcTEME6fPo3h4RGYjFoMPRhE87lmcotnUbK0EDU1tdzVa1d9v/9xarB/0GtYubp2n9GY/1hqXp/jx49hmrCUypTFyx2uk8STpXZ7WWGcjQvgfKY1Gi20GgV8/mmydkZITmHhEj5lXJ+nZ1ClVgdv/3PtmwQbvmo0mlBf//FjWXQGU0NVzcb9fp8vXVxseYtvRoMkHX6fF+UrKgXDujo7YLM7MOF/hLz8AhJbJW5cd6OkxEZVVa+xxWIxJOLxowXGguD42Oh1Avu9IEvr5YtuuUK9vsBU/DavIzmPcFvd7ivwE7BOAnzjhhvj46PCJ996vWMP0dvThXAkJCRrcsKPAtOSKp2+YFNn5133U5co2d/ddafRYnUe4XsDMhy58oXYVLcDhUuKodHqSEL0MJuLkHAlCHMj6R8cNmzcTGKqRTqTJn1FDEbEoOPuzfNTk+PXFjW/ePGyy1W1/t+5uSBhwYK/AxxHAs6l+8m8RCqTMnxTSiWT5KowVCwa4+KxGAeKjpP+YuHTwjcrvn2oSTjcbee3792z+4LAfD4Sqxka7LtJjrZAjEqResmZad/l3vv3fiEAgqEQSuLJ4Mil4xYWwlyp3blrmdVxiFwiaXa2jCEmSzMcVUXWXKBe57//fwIMAOMFkafXozmfAAAAAElFTkSuQmCC">
+            {{ ictem.name }} {{ ictem.price }}元/天  可节省￥{{ ictem.disPrice }}
+          </div>
+        </div>
+      </div>
+      <div
+        class="market-price">市场统一售价<span style="margin-left: 5px;">{{ detail.buyPrice }}万/辆</span></div>
+      <div>
+        <div style="height: 10px;background: #eee;"/>
+      </div>
+      <div
+        id="nav"
+        :class="searchBarFixed == true ? 'isFixed' :''"
+        class="scroll">
         <div
-          v-for="ictem in detail.userMemberLevel"
-          :key="ictem.level"
-          class="flex-aic">
-          <img
-            v-if="ictem.level == 1"
-            style="width: 21px;margin-right: 9px;"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY2RDk5NzRDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY2RDk5NzNDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyNzJmMTRhLTgyMTMtYTY0Zi1iODBlLTUzN2QwNTZiNjYwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7q1ObTAAAFEklEQVR42rRVW2gcZRQ+Mzu72WRnZ3Z2N7eG7m43NpWKiSJe0DZFIa3G+JAXQQSt+hDpiyARb4ggCCpeHlLBVxW0fav4ZFVohPSWajFtEkmyS9Jskp3dTC57352b3z+bDS1o6YMuzM7t/8/5zvd95wxn2zb9Xz+B/Y2MjNx2Ec/zVC6XyeVykdfr5QzDuCNE/J0sKpVK1IZfV1fXd8ViMcZxHP0nwRltLPjRo0dHlYD83NLS4gmgpzuh83bBOYYQFFBra+vdoOX1P65epcVk4jWgf9Dvlxy6kMTF1u4c/x78ZjQIbJum2e7xeD7A9flTp753ra9rFIt3u1Op5TPp9Oo7CB5vavKa2Me0s/8xOAvqdrtJ13Xa2NggwzRZ8CGvt2mqUMi/l0wmlIWFBBUKBWoCJcVCYU8ymfxwYX7ujK7XHkcIPZvNUrVaZaLzt7jFsiyqVMpP9Pf3j0SjscKvv/zMpdX0S5nMNq2srBBooI6ODqyzaW01Tb6WZjINkzKZzL2FYuHU0NAzXw8PDwtTU39KMzMzX6Kaq4xSJzhDnc/n134bP/dsb999ZKGSdFolVU0TFlJPTw/19fXRlSuTNDujkrurq843aNY0rS21vPxGMBikv2ZngFx4l+N4hyW+gbytvX02kUyOfv7pJwQagLZAouiHvysObSaEZa6xbZMBaehCok+k8fFz9PZbb9J2Lv+iLAfUBv1Cg59qpULd3Xd9FpDlE7lcPl6r6c7mYFBxGmjq+jXy+XwUCCgUUBQgdzkcm4blgOvt7ZvcuzfyQ7lcakI4A4e5Sz6znNfbzARTS6Ui2djQDPE6O9rpwIEe6o7HKQOa2tpayeMWyDQNcgkC6dhngP9gMDQnCIKNfc0No/A3WY9My2AovQyJCfEkyQ8H1Wh1dYW84P7Rxw6x6mhrawvJERy7Dd1wkFdrVR5nD9Xbl7uFFueZzTE7JuDv+9ltJrtOfr+PdFA0rV8H6na6dm2KzRfieI5ymznikYHHYvSDwazM4tg7DcM3AsPPFA6FxGPHnnxIwIBi7yuVKmWzmlMR8/+F8xMkCC4E5nG/DWosqoH3zs5OGhoaehpOOYjKC4hn7AZnGQXBQwMDA6cDshRhiXggsy3T0YIlyOdysGUTGqgIi2ad5FiCZ27a0DTWicHDhw997NBrmrcij8UidOnSRd/Y2JipQyCWsAIHiaJIoVCYlGCYYvviJEoKZk2bk6gGPURRAt86jZ08aU3PTOcxOc0dauqcQ+17Ll+eHNU2tARqfhg94AoEgiRHJYi3zcYtKbDf0o0bELQbjbMOdArt2dNJc3NzZNYpNs7+dHYtqCjfhMLh07Dtj3y9Q4UtTds4rq6pLzO3uGGxnp79NDg4CJRhisf3OYdf9NGRI/2oMkbhcIiNYYpEIsTWY9540KkvYMY8j45f3aVFlqWVaDRyHD5l7UvsvLCwQMlE0rlOpVK0vJxyHDY/P0+bm5u0jYomJiagRd6xIksgwP/RWPQLWZZ/d3Ssf2nKPlVV32cNYVqm423W4ptbW5rH7fboumFJkiRbeLe4uFhlcwXXdmolVYbwCuvmEroYQpKaVl+FRl9hOs45wTFK92PY5IH+AmgxaliNcicxCT8CAi+OaigUfARJHgDqb+Fz9oGwUJUGZ72ChE9BYG9LS4sbiUVQdNAvSfMcUxUfaI61bn0Uc7sfDlZuw03Mkuzs2umBxvP6NXteb3aGHmvdTOC/BRgAuNux8NL5oHcAAAAASUVORK5CYII=">
-          <img
-            v-if="ictem.level == 2"
-            style="width: 21px;margin-right: 9px;"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY2RDk5NzBDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY2RDk5NkZDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyNzJmMTRhLTgyMTMtYTY0Zi1iODBlLTUzN2QwNTZiNjYwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiLz4gPC9y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">
-          <img
-            v-if="ictem.level == 3"
-            style="width: 21px;margin-right: 9px;"
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjY2RDk5NkNDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjY2RDk5NkJDQTIzMTFFOUI3RTU5NTlGMDI5MDk5QzQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjcyNzJmMTRhLTgyMTMtYTY0Zi1iODBlLTUzN2QwNTZiNjYwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz648742AAAFfElEQVR42rRVa0xTZxh+zumhF2hL70BbBKktxa5IUQTUTd0i3l0yp8bMOWPY2GaybD+2n8uyH0sWfy0ZS8h0Ubfs31SM8QIyqlGnRoYEodwELNgC5dLS0vb0dvadYyQ6L/9s8vVyvu973ud7nud7S3Ech9f1Yvi3hoaGF05mMhlhOBwOmExGRpqtaXw0NnREoZCn+vr64fV6kZ2d/cK9TU1NoF9VmaZpxONxdHd3welcUW8usn4SY7kvw+EQAoEAGIYRir90/8smeLWSySTYeBQyWTaYLMWPA/0ePJqYOTo8/DCfpjJQKBSkQBbS6TReJC/zMvD5+aCwede7u3etrl73dY5coXS+UYbSUivmg7PN9zpufdHr6b4tkUghFudQ0WhUQKco6tXgc3MzsFhs5sP1DSf0BvM73rFx3O3oQIow1KjV0Gj0q/fsP3xroK/71Jm//jySSiUjcrmcikQizxR4Bpx/ODvLA1vN3373Q49/IqA8e/Yc5kMh5OTkQJmrRGfnPSRTKSiVcmzduv3ggYOfOo8f+6mW6M/KZDKQE0AkEj2vOW+eVCrFZ59/1ToVmFNeutQqmGY0GeFylaOszA65XAGDXo+FSBQnT/wGrSHftXXbe03B4ByysrIoMhZNpv+vc13dtkNavcHe3u6GSpWLSDjMxxCVFaWgKRqWEovAjKYpMhi0XWmBs7zyI7O5eF0sFuXEYvGiuYvgvOM86wrXqvqhoVEhKel0CvyysbEx3OnwkPhNIkQYxmILSCQT4GUYGRnBzOwcX+DD6EJEkPaJLMzT4LlKFZUlkRT5vRNCFnmZatdUQ52rEtYQw0jRNLQ6HWZmpnG/twcsm8DU1CQMeXkOmhaJCOsMAeeek4XMiTNpThqPx4Rk1NbWwLHcIrAcGBwgjFl4PH2kQArWZTaUO8sJOCuQoCiayXCcmDCnn6SFfjop8/MhNpFgA7yJLNnA60dqQK1RE31FaGu/Ar1BJ3ghkYjJkIBNsML3VCpFExnjxEzuGc0TiYQQwSVFxXk2m80kk0mFSP3d1k76hw855PfKlZXYuWMn7KVl0Om0GPU+hNvthkwqgSo3F3b78lUVFZWbQ6Fght+7qDkBJMw57H7/QMuDYa+yID8PKnUuAtMBnDnTjC1b6mC1WojhMqhVavR6etHS2kK0nsKG9euE5z29Hmrvvg9+TbDsUnL81CJzjUaF6po3d4z7p52NjT97fD7f9Nq1a0jGRcTEME6fPo3h4RGYjFoMPRhE87lmcotnUbK0EDU1tdzVa1d9v/9xarB/0GtYubp2n9GY/1hqXp/jx49hmrCUypTFyx2uk8STpXZ7WWGcjQvgfKY1Gi20GgV8/mmydkZITmHhEj5lXJ+nZ1ClVgdv/3PtmwQbvmo0mlBf//FjWXQGU0NVzcb9fp8vXVxseYtvRoMkHX6fF+UrKgXDujo7YLM7MOF/hLz8AhJbJW5cd6OkxEZVVa+xxWIxJOLxowXGguD42Oh1Avu9IEvr5YtuuUK9vsBU/DavIzmPcFvd7ivwE7BOAnzjhhvj46PCJ996vWMP0dvThXAkJCRrcsKPAtOSKp2+YFNn5133U5co2d/ddafRYnUe4XsDMhy58oXYVLcDhUuKodHqSEL0MJuLkHAlCHMj6R8cNmzcTGKqRTqTJn1FDEbEoOPuzfNTk+PXFjW/ePGyy1W1/t+5uSBhwYK/AxxHAs6l+8m8RCqTMnxTSiWT5KowVCwa4+KxGAeKjpP+YuHTwjcrvn2oSTjcbee3792z+4LAfD4Sqxka7LtJjrZAjEqResmZad/l3vv3fiEAgqEQSuLJ4Mil4xYWwlyp3blrmdVxiFwiaXa2jCEmSzMcVUXWXKBe57//fwIMAOMFkafXozmfAAAAAElFTkSuQmCC">
-          {{ ictem.name }} ￥{{ ictem.price }}/天，可节省￥{{ ictem.disPrice }} <span>立即查看></span>
+          style="border-bottom: 1px solid #dfdfdf;"
+          class="flex-aic-jcb detail-list" >
+          <ul class="select-tab flex-aic-jcb">
+            <li
+              :class="{active:active=='activity'}"
+              class="select-tab-li-l mui-control-item"
+              @click="activity()">基础配置</li>
+            <li
+              :class="{ active:active=='lastest'}"
+              class="select-tab-li-l mui-control-item"
+              @click="lastest()">房车图片</li>
+            <li
+              :class="{ active:active=='rank'}"
+              class="select-tab-li-l mui-control-item"
+              @click="rank()" >租车须知</li>
+            <li
+              :class="{ active:active=='model'}"
+              class="select-tab-li-l"
+              @click="modelClick()" >房车参数</li>
+          </ul>
+        </div>
+      </div>
+      <div id="segmentedControlContents">
+        <!--详细内容-->
+        <div
+          id="activityIntro"
+          class="scroll0" >
+          <div class="base-set">
+            基础配置
+          </div>
+          <div
+            class="flex-aic-fww bt-line">
+            <span
+              v-for="item in detail.vehiclePlatCatas"
+              :key="item.id"
+              class="base-set-name">{{ item.name }}</span>
+          </div>
+        </div>
+        <div
+          id="lastestDubbing"
+          class="scroll1" >
+          <div class="base-set">
+            房车图片
+          </div>
+          <div
+            class="bt-line"
+            v-html="detail.modelsDetails"/>
+        </div>
+        <div
+          id="rankLlistDetail"
+          class="scroll3">
+          <div class="base-set" >
+            租车须知
+          </div>
+          <div
+            class="bt-line"
+            v-html="notice"/>
+        </div>
+        <div
+          id="modelsDetails"
+          class="scroll2">
+          <div class="base-set">
+            房车参数
+          </div>
+          <div>
+            <div
+              v-for="iitem in detail.modelParam"
+              :key="iitem.key"
+              class="flex-aic modal-item">
+              <div class="left-item ellipsis color-666">{{ iitem.key }}</div>
+              <div class="right-item ellipsis color-666">{{ iitem.val }}</div>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-    <div
-      class="member-list"
-      style="margin-top: 20px;">房车售价<span style="margin-left: 5px;">{{ detail.buyPrice }}万/辆</span></div>
-    <div
-      class="models-details"
-      v-html="detail.modelsDetails"/>
-    <div v-html="notice"/>
-    <div
-      class="kr-article-article"
-      style="background: #fff;">
       <div
-        v-for="iitem in detail.modelParam"
-        :key="iitem.id"
-        class="flex-aic modal-item" >
-        <div class="left-item ellipsis color-666">{{ iitem.key }}</div>
-        <div class="right-item ellipsis color-666">{{ iitem.val }}</div>
+        class="models-details"
+        v-html="detail.modelsDetails"/>
+      <div v-html="notice"/>
+      <div
+        class="kr-article-article"
+        style="background: #fff;">
+        <div
+          v-for="iitem in detail.modelParam"
+          :key="iitem.key"
+          class="flex-aic modal-item" >
+          <div class="left-item ellipsis color-666">{{ iitem.key }}</div>
+          <div class="right-item ellipsis color-666">{{ iitem.val }}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -105,6 +191,8 @@
         background: 'red',
         color: '#fff',
         fontSize: '70px',
+        active: 'activity',
+        searchBarFixed:false,
       };
     },
     async asyncData({ route }) {
@@ -136,6 +224,9 @@
       notice[0].value = notice[0].value.replace(/<ul/g,"<ul style='width:100% !important;'");
       return {detail: user, hotList: hot, notice: notice[0].value}
     },
+    created() {
+      window.addEventListener('scroll', this.handleScroll);
+    },
     methods: {
       // 点击下一页回调
       prev () {},
@@ -144,6 +235,84 @@
       // 鼠标移入状态点回调
       changeBanner () {},
       bannerClick () {},
+      handleScroll: function () {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+        let path = $nuxt.$route.path;
+        if(path == '/vehicleDetail'){
+          var menuTop = document.querySelector('#nav').offsetTop;
+          console.log(menuTop-45);
+          console.log(scrollTop);
+          //滑动到指定位置菜单吸顶
+          if (scrollTop > menuTop-45) {
+            this.searchBarFixed = true;
+          }
+
+          //滑动到指定位置相应菜单高亮
+          var top1 = document.querySelector('#activityIntro').offsetTop;
+          var top2 = document.querySelector('#lastestDubbing').offsetTop;
+          var top3 = document.querySelector('#rankLlistDetail').offsetTop;
+          var top4 = document.querySelector('#modelsDetails').offsetTop;
+          console.log(top1+"--"+top2+"--"+top3+"--"+top4);
+          if (scrollTop < top1-110) {
+            this.active = 'activity';
+            this.searchBarFixed = false;
+          }
+          if (scrollTop < top2-110) {
+            this.active = 'activity';
+          } else if (scrollTop >= top2-110 && scrollTop < top3-110) {
+            this.active = 'lastest';
+          } else if (scrollTop >= top3-110 && scrollTop < top4-110) {
+            this.active = 'rank';
+          } else if (scrollTop >= top4-110) {
+            this.active = 'model';
+          }
+        }
+      },
+      lastest(){//房车图片
+        this.active = "lastest";
+        let top1 = document.querySelector('#lastestDubbing').offsetTop;
+        let top = document.querySelector('#activityIntro').offsetTop;
+        if(this.searchBarFixed){
+          document.documentElement.scrollTop = top1 - 105;
+        } else {
+          document.documentElement.scrollTop = top-32;
+        }
+        this.searchBarFixed = true;
+      },
+      activity(){
+        //基础配置
+        this.active = "activity";
+        let top = document.querySelector('#nav').offsetTop;
+        var top1 = document.querySelector('#activityIntro').offsetTop;
+        if(this.searchBarFixed){
+          document.documentElement.scrollTop = top1-105;
+        } else {
+          document.documentElement.scrollTop = top-88;
+        }
+        this.searchBarFixed = true;
+      },
+      rank(){
+        //租车须知
+        this.active = "rank";
+        let top1 = document.querySelector('#rankLlistDetail').offsetTop;
+        if(this.searchBarFixed){
+          document.documentElement.scrollTop = top1 - 105;
+        } else {
+          document.documentElement.scrollTop = top1-155;
+        }
+        this.searchBarFixed = true;
+      },
+      modelClick(){
+        //房车参数
+        this.active = "model";
+        let top1 = document.querySelector('#modelsDetails').offsetTop;
+        if(this.searchBarFixed){
+          document.documentElement.scrollTop = top1 - 105;
+        } else {
+          document.documentElement.scrollTop = top1-155;
+        }
+        this.searchBarFixed = true;
+      },
     },
   };
 
@@ -154,6 +323,81 @@
 
   .vehicle-detail-page {
     font-size: px2rem(24px);
+    }
+    .detail-main-container{
+      .vehicle-detail-name{
+        padding: 0 px2rem(20px);
+        font-size: px2rem(34px);
+        font-weight: bold;
+      }
+      .vehicle-detail-config{
+        padding: 0 px2rem(20px);
+        height: px2rem(60px);
+        border-bottom: 1px solid #dfdfdf;
+        .config{
+          margin-right: px2rem(80px);
+        }
+      }
+      .vehicle-lower{
+        padding: 0 px2rem(20px);
+        font-size: px2rem(30px);
+        margin-top: px2rem(58px);
+        margin-bottom: px2rem(30px);
+        span{
+          color: #F25B5B;
+          font-weight: bold;
+          margin-left: px2rem(30px);
+        }
+      }
+      .member-list{
+        padding: 0 px2rem(20px);
+      }
+      .member-list-c img{
+        width: px2rem(34px);
+        height: px2rem(34px);
+        margin-right: px2rem(20px);
+      }
+      .member-list-name{
+        color: #666;
+        font-size:px2rem(26px);
+        margin-bottom: px2rem(24px);
+      }
+      .market-price{
+        font-size: px2rem(30px);
+        margin: px2rem(34px) 0;
+        padding: 0 px2rem(20px);
+      }
+      .detail-list{
+        height: px2rem(100px);
+      }
+      .select-tab{
+        width: 100%;
+        .select-tab-li-l{
+          font-size:px2rem(32px);
+          color: #999;
+          padding: 0 px2rem(20px);
+        }
+        .select-tab-li-l.active{
+          color: #333;
+          font-weight: bold;
+          height: px2rem(100px);
+          line-height: px2rem(100px);
+          border-bottom: 2px solid #1bbb9f;
+        }
+      }
+      .scroll0, .scroll1, .scroll2, .scroll3{
+        padding: 0 px2rem(20px);
+        .base-set{
+          margin: 17px 0;
+          font-size: 15px;
+          font-weight: bold;
+        }
+        .base-set-name{
+          font-size: 12px;
+          color: #666;
+          padding: 0 10px 18px 0;
+        }
+      }
 
     .mint-navbar {
       position: sticky;