Skip to content

V
vue-ssr
Commit b7c1ab9d authored by linjw's avatar linjw
Browse files
Options

修改营地旅游样式

parent 352d2ab4
Show whitespace changes
Inline Side-by-side
Showing with 218 additions and 106 deletions
pages/campsite.vue
View file @ b7c1ab9d
......@@ -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
View file @ b7c1ab9d
......@@ -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="float:left;width:40%;margin-left:5%">
<img :src="detail.logo" style="width:100%;vertical-align:top" />
<p>
微信扫码进入
欣新房车助手可预订
</p>
<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: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 class="clearfix" style="margin-top:40px;">
<div style="float:left;width:70%;background-color: #fff;padding:20px">
<h3>营地详情</h3>
</div>
</div>
</div>
</div>
<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
View file @ b7c1ab9d
......@@ -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>
pages/tourDetails/_id.vue
View file @ b7c1ab9d
......@@ -2,23 +2,23 @@
<div>
<menu-modal></menu-modal>
<div class="main-container" style="margin-top: 110px;">
<div class="wrap">
<div class="wrap" >
<div class="bread-menu">
<nuxt-link to="/">首页></nuxt-link>
<nuxt-link to="/tour">房车旅行></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.cover" style="width:100%" />
<img :src="item.cover" style="width:100%;height:388px" />
</div>
</div>
<!-- <div class="swiper-button-next swiper-button-black"></div>
......@@ -37,7 +37,7 @@
:src="item.cover"
:class="preIndex==index?'active':''"
alt
style="width:100%"
style="width:103px;height:64px"
/>
</div>
</div>
......@@ -45,49 +45,76 @@
</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">{{address}}</h3> -->
<div style="margin-top:20%" class="clearfix">
<button class="buttonDetails" @click="visiblePic()" style="float:left">预定营地</button>
<div style="float:left;width:60%" class="clearfix" v-if="visible">
<div style="float:left;width:40%;margin-left:5%">
<img :src="detail.cover" style="width:100%;vertical-align:top" />
<p>
安卓用户扫码下载
滴房车APP可预订
</p>
<div style="float:left;width:507px">
<h2 style="font-size:20px;font-weight:bold;padding-left:20px;">{{detail.name}}</h2>
<div style="margin:21px 20px 91px 19px;padding:21px 0 21px 16px">
<div style="display: flex">
<h1 style="flex:2;font-size:14px;font-weight:400;color:#666">
出发地
</h1>
<h1 style="flex:8;font-size:14px;font-weight:400;color:#666">
{{detail.addressTo.provinceName}} {{detail.addressTo.cityName}} {{detail.addressTo.address}}
</h1>
</div>
<div style="float:left;width:40%;margin-left:5%">
<img :src="detail.cover" style="width:100%;vertical-align:top" />
<p>
微信扫码进入
欣新房车助手可预订
</p>
<div style="display: flex;margin:13px 0 16px 0">
<h1 style="flex:2;font-size:14px;font-weight:400;color:#666">
目的地
</h1>
<h1 style="flex:8;font-size:14px;font-weight:400;color:#666;">
{{detail.addressGo.provinceName}} {{detail.addressGo.cityName}} {{detail.addressGo.address}}
</h1>
</div>
<div style="font-size:14px;font-weight:400;color:#666;">最近出发日期<h5 style="font-size:14px;font-weight:400;display:inline-block;color:#666;margin-left:9px"> {{detail.time.startTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekStart}} {{detail.addressTo.departTime | formatDate('hh:mm')}} ~ {{detail.time.endTime| formatDate('yyyy/MM/dd')}} {{detail.time.weekEnd}}</h5></div>
</div>
<div style="" class="clearfix">
<button class="buttonDetails" @click="visiblePic()" style="float:left;margin:0 30px 0 20px">预定出游</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: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 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.introduce">
</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.cover" 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.cover" 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>
......@@ -131,6 +158,32 @@ export default {
let pic = data.data.bannerDTOS;
user.pictureList = pic;
user.pictureNum = pic.length;
let startAddress = data.data.tourDepartVo;
for(var i = 0;i<startAddress.length;i++){
if(startAddress[i].type == 0){
console.log(startAddress[i]);
user.addressTo = startAddress[i];
}
if(startAddress[i].type == 2){
console.log(startAddress[i]);
user.addressGo = startAddress[i];
}
}
let tourTimeVo = data.data.tourDepartTimeVo
for(var i = 0;i<tourTimeVo.length;i++){
if(tourTimeVo[i].overdue == 0){
console.log(tourTimeVo[i]);
user.time = tourTimeVo[i];
break
}else{
user.time = tourTimeVo[i];
}
}
var weekday=["周日","周一","周二","周三","周四","周五","周六"]
user.time.weekStart = weekday[user.time.startWeek];
user.time.weekEnd = weekday[user.time.endWeek];
// console.log(startAddress);
console.log(pic);
console.log(user);
......@@ -227,8 +280,9 @@ export default {
padding: 5px;
}
.buttonDetails {
width: 150px;
height: 35px; /* 高度 */
width: 180px;
font-size: 20px;
height: 60px; /* 高度 */
border-width: 0px; /* 边框宽度 */
background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
......@@ -237,8 +291,8 @@ export default {
color: white; /* 字体颜色 */
}
.buttonDetail{
width: 150px;
height: 35px; /* 高度 */
width: 116px;
height: 34px; /* 高度 */
border: 1px solid #1bbb9f;
background-color: #fff;
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
......@@ -246,6 +300,10 @@ export default {
font-family: Microsoft YaHei; /* 设置字体 */
color: #1bbb9f; /* 字体颜色 */
}
.buttonDetail:hover{
color: #fff;
background: #1bbb9f;
}
.tabContent {
padding: 0;
margin: 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment