房车营地

pages/campsiteDetails/_id.vue

@@ -6,11 +6,11 @@
         <div>面包屑</div>
         <div class="clearfix">
           <div style="float:left;width:50%">
-            <div class="gallery-top-box">
+            <div class="gallery-top-box" style="width:100%">
               <div class="swiper-container gallery-top" ref="mySwiper">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide"  v-for="(item,idx) in campsiteShopCarouselDetailVos" :key="idx">
-                    <img :src="item.imgUrl">
+                    <img :src="item.imgUrl" style="width:100%">
                   </div>
                 </div>
                 <div class="swiper-button-next swiper-button-black"></div>
@@ -19,15 +19,22 @@
               <div class="gallery-thumbs-box">
                 <div class="swiper-container gallery-thumbs">
                   <div class="swiper-wrapper swiper-wrapper-thu">
-                    <div class="swiper-slide"  v-for="(item,index) in campsiteShopCarouselDetailVos" :key="index"  @click="changeImgIndex(index)">
-                      <img :src="item.imgUrl"  :class="preIndex==index?'active':''" alt="">
+                    <div class="swiper-slide"  v-for="(item,index) in campsiteShopCarouselDetailVos" :key="index"  @click="changeImgIndex(index,campsiteShopCarouselDetailVos.length)">
+                      <img :src="item.imgUrl"  :class="preIndex==index?'active':''" alt="" style="width:100%">
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div style="float:left;width:50%">22</div>
+          <div style="float:left;margin-left:20px">
+            <h1>[{{name}}]</h1>
+            <h3>{{address}}</h3>
+            <div style="margin-top:90%">
+              <button class="buttonDetails">预定营地</button>
+              <img :src="logo" style="width:100px;margin-left:50px">
+              </div>
+            </div>
         </div>
       </div>
     </div>
@@ -50,6 +57,7 @@
     },
     data(){
       return{
+        lengthPic:0,
         preIndex: 0,//当前轮播选中图
       }
     },
@@ -60,24 +68,27 @@
     async asyncData({ env, params, error}) {
       const { data } = await axios.get( env.host + '/api/uccn/app/unauth/campsite/shop?id='+params.id);
       let user = data.data;
-      let campsiteShop = user.campsiteShopCarouselDetailVo;
-      console.log(campsiteShop);
+      let campsiteShop = user.campsiteShopCarouselDetailVos;
+      console.log(user);
       
       if (!user) {
         return error({ message: 'User not found', statusCode: 404 })
       }
       return user
     },
-    method:{
-        changeImgIndex(index){
+    methods:{
+        changeImgIndex(index,length){
       this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
+      this.lengthPic = length;
+      console.log(this.lengthPic);
+      
     },
     },
     mounted(){
     let t = this;
     let galleryThumbs = new Swiper('.gallery-thumbs', {
       spaceBetween: 10,
-      slidesPerView: 4,
+      slidesPerView: 5,
       freeMode: true,
       watchSlidesVisibility: true,
       watchSlidesProgress: true,
@@ -88,7 +99,7 @@
       on: {
         slideChangeTransitionEnd: function () {
           t.preIndex = this.activeIndex-1;
-          if(t.preIndex == 4){
+          if(t.preIndex == 5){
             t.preIndex = 0
           }
           console.log(this.activeIndex)
@@ -126,4 +137,36 @@
   padding: 0 200px;
 }
 
+</style>
+
+<style  scoped>
+.swiper-container {
+    height: auto;
+  }
+  .gallery-top img{
+    width: 100%;
+  }
+  .swiper-wrapper-thu{
+    /*max-width: 293px;*/
+    margin: 0 !important;
+  }
+  .swiper-wrapper-thu img{
+    width: 100%;
+    border: 2px solid #fff;
+  }
+  .swiper-wrapper-thu img.active{
+    border: 2px solid #1bbb9f;
+    padding: 5px;
+  }
+  .buttonDetails {
+  width: 156px; /* 宽度 */
+  height: 35px; /* 高度 */
+  border-width: 0px; /* 边框宽度 */
+  background: #1bbb9f; /* 背景颜色 */
+  cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
+  outline: none; /* 不显示轮廓线 */
+  font-family: Microsoft YaHei; /* 设置字体 */
+  color: white; /* 字体颜色 */
+  margin-left: 10px;
+}
 </style>
\ No newline at end of file