修改营地旅游样式

pages/campsite.vue

@@ -17,30 +17,36 @@
         class="mb-50">
       </vehicle-banner>
       <div class="wrap">
-        <div class="clearfix total-div" style="background-color: #fff;padding:5px 10px">
+        <div class="bread-menu" style="padding-bottom: 0">
+          <nuxt-link to="/">首页></nuxt-link>
+          <!-- <nuxt-link to="/campsite">房车营地></nuxt-link> -->
+          <span>房车营地</span>
+        </div>
+        <div class="clearfix total-div" style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px">
           共{{totalCount}}个房车营地
+          
+          
           <select
             @change="chooseSelect($event)"
-            style="width:180px;text-align:center;height:30px;float:right"
+            style="width:145px;text-align:center;height:30px;float:right;border:none;outline: none;color:#666;padding-left:30px"
           >
             <option value>营地类型</option>
             <option v-for="item in dataType" :value="item.id" :key="item.id">{{ item.name }}</option>
             <option value>全部</option>
           </select>
         </div>
-        <h3 v-if="dataNull" style="margin:10px 0;margin-bottom:60px;background-color: #fff;padding:20px">暂无信息</h3>
+        <h3 v-if="dataNull" style="margin:20px 0;background-color: #fff;padding:20px">暂无信息</h3>
         <ul class="campsiteDetail clearfix" v-if="!dataNull">
-          <li v-for="(item,idx) in dataDetail" :key="idx" style="background-color: #fff;padding:20px" class="vehicle-item">
+          <li v-for="(item,idx) in dataDetail" :key="idx" class="vehicle-item">
             <img :src="item.logo" alt style="width:100%;height:223px" />
-            <h2 style="font-size: 16px;margin:10px 0">{{ item.name }}</h2>
-            <nuxt-link :to="item.link">
-              <button class="buttonDetails">营地详情</button>
+            <h2 style="font-size:20px;margin-top:22px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{ item.name }}</h2>
+            <nuxt-link :to="item.link" class="">
+              <button class="buttonDetails">营地详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
             </nuxt-link>
+            
           </li>
         </ul>
-        <!-- <div class="right">
-          <nuxt-child :key="$route.params.id" />
-        </div> -->
+        
       </div>
     </div>
     <footer-modal></footer-modal>
@@ -186,29 +192,33 @@ export default {
   padding: 0;
   margin: 0;
   list-style: none;
+ 
 }
 
 .campsiteDetail li {
-  padding: 0;
-  margin: 0;
+  padding: 14px;
+  margin-bottom: 20px;
   list-style: none;
   width: 360px;
+  height: 372px;
   float: left;
+  margin-right:20px;
+   background-color: #fff
 }
-
+.campsiteDetail li:nth-child(3n+0) { margin-right:0px; }
 .toDetail {
   font-size: 16px;
 }
 
 .buttonDetails {
-  width: 156px; /* 宽度 */
-  height: 35px; /* 高度 */
+  width: 107px; /* 宽度 */
+  height: 31px; /* 高度 */
   border-width: 0px; /* 边框宽度 */
   background: #1bbb9f; /* 背景颜色 */
   cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
   outline: none; /* 不显示轮廓线 */
   font-family: Microsoft YaHei; /* 设置字体 */
   color: white; /* 字体颜色 */
-  margin-left: 10px;
+  margin:45px 0 17px 222px
 }
 </style>

pages/campsiteDetails/_id.vue

@@ -8,17 +8,17 @@
           <nuxt-link to="/campsite">房车营地></nuxt-link>
           <span>{{detail.name}}</span>
         </div>
-        <div class="clearfix" style="background-color: #fff;padding:20px">
-          <div style="float:left;width:50%">
+        <div class="clearfix" style="background-color:#fff;padding:42px 20px 36px 40px;width:1120px;height:536px">
+          <div style="float:left;width:540px">
             <div class="gallery-top-box" style="width:100%">
               <div class="swiper-container gallery-top" ref="mySwiper">
-                <div class="swiper-wrapper" style="height:450px">
+                <div class="swiper-wrapper" >
                   <div
                     class="swiper-slide"
                     v-for="(item,idx) in detail.pictureList"
                     :key="idx"
                   >
-                    <img :src="item.imgUrl" style="width:100%" />
+                    <img :src="item.imgUrl" style="width:100%;height:374px" />
                   </div>
                 </div>
                 <!-- <div class="swiper-button-next swiper-button-black"></div>
@@ -37,7 +37,7 @@
                         :src="item.imgUrl"
                         :class="preIndex==index?'active':''"
                         alt
-                        style="width:100%"
+                        style="width:103px;height:64px"
                       />
                     </div>
                   </div>
@@ -45,53 +45,61 @@
               </div>
             </div>
           </div>
-          <div style="float:left;padding-left:50px;width:50%">
-            <h2>{{detail.name}}</h2>
-            <h3 style="font-weight: 400;margin-left:20px;font-size:16px;margin-top:10px">{{detail.address}}</h3>
-            <div style="margin-top:20%" class="clearfix">
-              <button class="buttonDetails" @click="visiblePic()" style="float:left;width:30%">预定营地</button>
-              <div style="float:left;width:60%" class="clearfix" v-if="visible">
-                <div style="float:left;width:40%;margin-left:5%">
-                  <img :src="detail.logo" style="width:100%;vertical-align:top" />
-                  <p>
-                    安卓用户扫码下载
-                    滴房车APP可预订
-                  </p>
+          <div style="float:left;padding-left:20px;width:507px">
+            <h2 style="font-size:20px;font-weight:bold">{{detail.name}}</h2>
+            <div style="font-weight: 400;font-size:16px;margin:30px 0 210px 0"><img style="vertical-align:middle" src="../../assets/images/local.png" alt="欣新房车，让生活更美好"/>{{detail.address}}</div>
+            <div style="" class="clearfix">
+              <button class="buttonDetails" @click="visiblePic()" style="float:left;margin-right:30px">预定营地</button>
+              <div style="float:left" class="clearfix" v-if="visible">
+                <div style="float:left;width:114px;margin-right:30px;text-align:center">
+                  <div style="background:#FFF5E6;border:2px solid #FFB74B">
+                  <img src="../../assets/images/dfcapp.png" style="width: 90px;margin:12px 10px 8px 10px;"/>
+                  <div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">滴房车App</div>
+                  </div>
+                  <div style="margin-top:8px">
+                    <div style="font-size:12px">安卓用户微信扫码</div>
+                    <div style="font-size:12px">可马上下单</div>
+                    <!-- <h6 style="font-size:12px;font-weight:400">安卓用户微信扫码可马上下单</h6> -->
+                  </div>
                 </div>
-                <div style="float:left;width:40%;margin-left:5%">
-                  <img :src="detail.logo" style="width:100%;vertical-align:top" />
-                  <p>
-                    微信扫码进入
-                    欣新房车助手可预订
-                  </p>
+                
+                <div style="float:left;width:114px;text-align:center">
+                  <div style="background:#FFF5E6;border:2px solid #FFB74B">
+                  <img src="../../assets/images/xxfczs.jpg" style="width: 90px;margin:12px 10px 8px 10px;"/>
+                  <div style="color: #FFB74B;font-size: 14px;margin-bottom:11px">欣新助手小程序</div>
+                  </div>
+                  <div style="margin-top:8px;">
+                    <div style="font-size:12px">微信扫码进入</div>
+                    <div style="font-size:12px">欣新房车助手可预订</div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-
-        <div class="clearfix" style="margin-top:40px;">
-          <div style="float:left;width:70%;background-color: #fff;padding:20px">
-            <h3>营地详情</h3>
+        <div class="clearfix" style="margin-top:40px">
+          <div style="float:left;width:800px;background-color:#fff;padding:31px 50px;">
+            <h3 style="font-size:16px;font-weight:bold;margin-bottom:20px">营地详情</h3>
           <div  v-html="detail.content">
           </div>
-          <h3 style="margin-top:30px">配套设施收费</h3>
+          <h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold">配套设施收费</h3>  
           <div v-html="detail.configure">
           </div>
-          <h3 style="margin-top:30px">预定须知</h3>
+          <h3 style="margin:31px 0 20px 0;font-size:16px;font-weight:bold">预定须知</h3>
           <div v-html="notice[0].value">
           </div>
           </div>
-          <div style="float:left;width:27%;margin-left:3%;background-color:#fff;text-align:center">
-              <h3 style="height:40px;font-weight:400;line-height:40px;border-bottom:1px solid #ccc">热门旅行</h3>
-              <div v-for="(item,index) in hotList" :key="index" style="width:100%;padding:20px 50px">
-              <img :src="item.imgUrl" alt="" style="width:100%">
-              <h5 style="overflow: hidden;text-overflow:ellipsis;width:100%;margin:10px 0">{{item.name}}</h5>
-              <nuxt-link :to="item.link"><button class="buttonDetail" style="margin-bottom:20px">营地详情</button></nuxt-link>
-
+          <div style="float:left;width:300px;margin-left:20px;background-color:#fff;text-align:center">
+              <h3 style="height:53px;font-weight:400;line-height:53px;border-bottom:1px solid #EEEEEE;font-size:16px">热门营地</h3>
+              <div v-for="(item,index) in hotList" :key="index" style="width:100%;padding:25px 60px 0 60px">
+              <img :src="item.imgUrl" alt="" style="width:180px;height:135px">
+              <h5 style="overflow: hidden;text-overflow:ellipsis;margin:21px 0 30px 0;font-weight:400;font-size:16px;white-space: nowrap;">{{item.name}}</h5>
+               <nuxt-link :to="item.link"><button class="buttonDetail" style="font-size:14px;margin-bottom:57px" >营地详情</button></nuxt-link>
+              
               </div>
           </div>
         </div>
+       
       </div>
     </div>
     <footer-modal></footer-modal>
@@ -226,7 +234,9 @@ export default {
   padding: 5px;
 }
 .buttonDetails {
-  height: 35px; /* 高度 */
+  width: 180px;
+  font-size: 20px;
+  height: 60px; /* 高度 */
   border-width: 0px; /* 边框宽度 */
   background: #1bbb9f; /* 背景颜色 */
   cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
@@ -244,6 +254,10 @@ export default {
   font-family: Microsoft YaHei; /* 设置字体 */
   color: #1bbb9f; /* 字体颜色 */
 }
+.buttonDetail:hover{
+    color: #fff;
+    background: #1bbb9f;
+  }
 </style>
 
 

pages/tour.vue

@@ -19,27 +19,34 @@
         </vehicle-banner>
       </div>
       <div class="wrap">
-        <div class="clearfix total-div" style="background-color: #fff;padding:5px 10px">
+        <div class="bread-menu" style="padding-bottom: 0">
+          <nuxt-link to="/">首页></nuxt-link>
+          <!-- <nuxt-link to="/campsite">房车营地></nuxt-link> -->
+          <span>房车旅行</span>
+        </div>
+        <div class="clearfix total-div" style="background-color: #fff;padding:13px 0 19px 14px;color:#666;height:50px">
           共{{totalCount}}个旅行路线
+          <!-- <div class="selectDiv"> -->
           <select
             @change="chooseSelect($event)"
-            style="width:180px;text-align:center;height:30px;float:right"
+            style="width:145px;text-align:center;height:30px;float:right;border:none;outline: none;color:#666;padding-left:30px"
           >
             <option value>旅行类型</option>
-            <option v-for="item in dataType" :value="item.id" :key="item.id">{{ item.name }}</option>
+            <option v-for="item in dataType" :value="item.id" :key="item.id" style="outline: none;">{{ item.name }}</option>
             <option value>全部</option>
           </select>
+          <!-- </div> -->
         </div>
         <h3 v-if="dataNull" style="margin:20px 0;background-color: #fff;padding:20px">暂无信息</h3>
         <ul class="campsiteDetail" v-if="!dataNull">
-          <li class="clearfix vehicle-item" v-for="(item,index) in dataDetail" :key="index" style="margin:20px 0;background-color: #fff;padding:20px">
-            <div style="float:left;width:30%"><img :src="item.cover" alt style="width:100%;height:193px"/></div>
-            <div style="float:left;width:70%;padding-left:30px">
-              <h2 style="font-size: 18px">{{item.name}}</h2>
-              <h6 style="font-size: 16px;font-weight:400;margin:35px 8px">{{item.describe}}</h6>
+          <li class="clearfix vehicle-item" v-for="(item,index) in dataDetail" :key="index" >
+            <div style="float:left"><img :src="item.cover" alt style="width:225px;height:172px"/></div>
+            <div style="float:left;padding-top:10px">
+              <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>
 
-              <nuxt-link :to="item.link">
-               <button class="buttonDetails">旅游详情</button>
+              <nuxt-link :to="item.link" class="flex-aic">
+              <button class="buttonDetails">租车详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
             </nuxt-link>
             </div>
           </li>
@@ -150,6 +157,26 @@
 .clearfix {
   *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
 }
+.selectDiv{
+  float: right;
+  width: 145px;
+  height: 35px;
+  border-radius: 5px;
+  margin: 8px 0;
+  box-shadow: 0 0 5px #ccc;
+}
+.selectDiv select{
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  padding-left: 30px;
+  /* appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none; */
+  
+}
 
 .campsiteDetail {
   padding: 0;
@@ -158,10 +185,12 @@
 }
 
 .campsiteDetail li {
-  padding: 20px;
-  margin: 50px 0;
+  padding: 14px;
+  margin-bottom: 20px;
   list-style: none;
-  height: 233px;
+  height: 200px;
+  width: 1121px;
+  background-color: #fff;
 }
 
 .buttonDetails {
@@ -173,7 +202,8 @@
   outline: none; /* 不显示轮廓线 */
   font-family: Microsoft YaHei; /* 设置字体 */
   color: white; /* 字体颜色 */
-  margin-left: 10px;
-  margin-top: 15px;
+  margin-left:14px;
 }
+
+
 </style>