Skip to content

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

修改营地旅游

parent e66dcdde
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 24 deletions
pages/campsite.vue
View file @ 7fd7d8af
...@@ -210,14 +210,14 @@ export default { ...@@ -210,14 +210,14 @@ export default {
} }
.buttonDetails { .buttonDetails {
width: 107px; /* 宽度 */ width: 130px; /* 宽度 */
height: 31px; /* 高度 */ height: 35px; /* 高度 */
border-width: 0px; /* 边框宽度 */ border-width: 0px; /* 边框宽度 */
background: #1bbb9f; /* 背景颜色 */ background: #1bbb9f; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */ cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */ outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */ font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */ color: white; /* 字体颜色 */
margin:45px 0 17px 222px margin: 27px 14px 0px 202px
} }
</style> </style>
pages/campsiteDetails/_id.vue
View file @ 7fd7d8af
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<nuxt-link to="/campsite">房车营地></nuxt-link> <nuxt-link to="/campsite">房车营地></nuxt-link>
<span>{{detail.name}}</span> <span>{{detail.name}}</span>
</div> </div>
<div class="clearfix" style="background-color:#fff;padding:42px 20px 36px 40px;width:1120px;height:536px"> <div class="clearfix" style="background-color:#fff;padding:40px 20px 40px 40px;width:1120px;height:522px">
<div style="float:left;width:544px"> <div style="float:left;width:544px;margin-right:10px">
<div class="gallery-top-box" style="width:100%"> <div class="gallery-top-box" style="width:100%">
<div class="swiper-container gallery-top" ref="mySwiper"> <div class="swiper-container gallery-top" ref="mySwiper">
<div class="swiper-wrapper" > <div class="swiper-wrapper" >
...@@ -21,12 +21,10 @@ ...@@ -21,12 +21,10 @@
<img :src="item.imgUrl" style="width:100%;height:374px" /> <img :src="item.imgUrl" style="width:100%;height:374px" />
</div> </div>
</div> </div>
<!-- <div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div> -->
</div> </div>
<div class="gallery-thumbs-box"> <div class="gallery-thumbs-box" style="width:554px">
<div class="swiper-container gallery-thumbs"> <div class="swiper-container gallery-thumbs" style="width:554px">
<div class="swiper-wrapper swiper-wrapper-thu"> <div class="swiper-wrapper swiper-wrapper-thu" style="width:554px">
<div <div
class="swiper-slide imgWidth" class="swiper-slide imgWidth"
v-for="(item,index) in detail.pictureList" v-for="(item,index) in detail.pictureList"
...@@ -38,7 +36,7 @@ ...@@ -38,7 +36,7 @@
:src="item.imgUrl" :src="item.imgUrl"
:class="preIndex==index?'active':''" :class="preIndex==index?'active':''"
alt alt
style="width:103px;height:64px" style="width:106px;height:64px"
/> />
</div> </div>
</div> </div>
...@@ -46,7 +44,7 @@ ...@@ -46,7 +44,7 @@
</div> </div>
</div> </div>
</div> </div>
<div style="float:left;padding-left:20px;width:507px"> <div style="float:left;padding-left:20px;width:495px">
<h2 style="font-size:20px;font-weight:bold">{{detail.name}}</h2> <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="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"> <div style="" class="clearfix">
......
pages/tour.vue
View file @ 7fd7d8af
...@@ -40,14 +40,16 @@ ...@@ -40,14 +40,16 @@
<ul class="campsiteDetail" v-if="!dataNull"> <ul class="campsiteDetail" v-if="!dataNull">
<li class="clearfix vehicle-item" v-for="(item,index) in dataDetail" :key="index" > <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"><img :src="item.cover" alt style="width:225px;height:172px"/></div>
<div style="float:left;padding-top:10px"> <nuxt-link :to="item.link" class="flex-aic">
<div style="float:left;padding-top:10px;width:850px;color:#333">
<h2 style="font-size: 20px;font-weight:400;margin:0 0 18px 6px">{{item.name}}</h2> <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> <h6 style="font-size: 14px;font-weight:400;margin:0 0 54px 14px">{{item.describe}}</h6>
<nuxt-link :to="item.link" class="flex-aic">
<button class="buttonDetails">旅行详情<img style="position: absolute;" src="../assets/images/r.png"/></button> <button class="buttonDetails">旅行详情<img style="position: absolute;" src="../assets/images/r.png"/></button>
</nuxt-link>
</div> </div>
</nuxt-link>
</li> </li>
</ul> </ul>
</div> </div>
......
pages/tourDetails/_id.vue
View file @ 7fd7d8af
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<nuxt-link to="/tour">房车旅行></nuxt-link> <nuxt-link to="/tour">房车旅行></nuxt-link>
<span>{{detail.name}}</span> <span>{{detail.name}}</span>
</div> </div>
<div class="clearfix" style="background-color:#fff;padding:42px 20px 36px 40px;width:1120px;height:536px"> <div class="clearfix" style="background-color:#fff;padding:40px 20px 40px 40px;width:1120px;height:536px">
<div style="float:left;width:544px"> <!-- <div style="float:left;width:544px;margin-right:10px">
<div class="gallery-top-box" style="width:100%"> <div class="gallery-top-box" style="width:100%">
<div class="swiper-container gallery-top" ref="mySwiper"> <div class="swiper-container gallery-top" ref="mySwiper">
<div class="swiper-wrapper" > <div class="swiper-wrapper" >
...@@ -21,12 +21,10 @@ ...@@ -21,12 +21,10 @@
<img :src="item.cover" style="width:100%;height:388px" /> <img :src="item.cover" style="width:100%;height:388px" />
</div> </div>
</div> </div>
<!-- <div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div> -->
</div> </div>
<div class="gallery-thumbs-box"> <div class="gallery-thumbs-box" >
<div class="swiper-container gallery-thumbs"> <div class="swiper-container gallery-thumbs" >
<div class="swiper-wrapper swiper-wrapper-thu"> <div class="swiper-wrapper swiper-wrapper-thu" >
<div <div
class="swiper-slide" class="swiper-slide"
v-for="(item,index) in detail.pictureList" v-for="(item,index) in detail.pictureList"
...@@ -44,10 +42,45 @@ ...@@ -44,10 +42,45 @@
</div> </div>
</div> </div>
</div> </div>
</div> -->
<div style="float:left;width:544px;margin-right:10px">
<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 detail.pictureList"
:key="idx"
>
<img :src="item.cover" style="width:100%;height:374px" />
</div>
</div>
</div>
<div class="gallery-thumbs-box" style="width:554px">
<div class="swiper-container gallery-thumbs" style="width:554px">
<div class="swiper-wrapper swiper-wrapper-thu" style="width:554px">
<div
class="swiper-slide imgWidth"
v-for="(item,index) in detail.pictureList"
:key="index"
@click="changeImgIndex(index,detail.pictureList.length)"
>
<img
:src="item.cover"
:class="preIndex==index?'active':''"
alt
style="width:106px;height:64px"
/>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div style="float:left;width:507px"> <div style="float:left;width:495px">
<h2 style="font-size:20px;font-weight:bold;padding-left:20px;">{{detail.name}}</h2> <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="margin:21px 20px 91px 19px;padding:21px 0 21px 16px;background:#f6f6f6">
<div style="display: flex"> <div style="display: flex">
<h1 style="flex:2;font-size:14px;font-weight:400;color:#666"> <h1 style="flex:2;font-size:14px;font-weight:400;color:#666">
出发地 出发地
...@@ -129,6 +162,7 @@ ...@@ -129,6 +162,7 @@
import axios from '../../plugins/axios' import axios from '../../plugins/axios'
import menuModal from "../../components/menu"; import menuModal from "../../components/menu";
import footerModal from "../../components/footer"; import footerModal from "../../components/footer";
import Swiper from "swiper"; import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css"; import "swiper/dist/css/swiper.min.css";
// import { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData'; // import { getDetail } from '../../../../demo nuxt/nuxt-bnhcp/ajax/getData';
...@@ -279,6 +313,10 @@ export default { ...@@ -279,6 +313,10 @@ export default {
border: 2px solid #1bbb9f; border: 2px solid #1bbb9f;
padding: 5px; padding: 5px;
} }
.imgWidth{
height:64px;
width:100px!important
}
.buttonDetails { .buttonDetails {
width: 180px; width: 180px;
font-size: 20px; font-size: 20px;
......
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