Skip to content

V
vue-ssr
Commit 56ae584e authored by lixy's avatar lixy
Browse files
Options

样式调整

parent ca9dd6de
Show whitespace changes
Inline Side-by-side
Showing with 202 additions and 77 deletions
assets/main.css
View file @ 56ae584e
...@@ -133,9 +133,15 @@ h2{ ...@@ -133,9 +133,15 @@ h2{
text-decoration: none; text-decoration: none;
} }
.more-container a:hover{ .more-container a:hover{
right: 25px; right: 30px;
color: #1bbb9f; /*color: #1bbb9f;*/
box-shadow: 5px 5px 5px #888888; /*box-shadow: 5px 5px 5px #888888;*/
}
.more-container a img{
margin-left: 5px;
position: relative;
top: 2px;
} }
.new-item, .activity-item, .content-new, .vehicle-item{ .new-item, .activity-item, .content-new, .vehicle-item{
......
components/bannerActivity.vue
View file @ 56ae584e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<ul> <ul>
<li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)"> <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
<nuxt-link :to="'/activityList/'+item.id"> <nuxt-link :to="'/activityList/'+item.id">
<img :src= "item.banner" style="width:100%;height: auto" :alt="item.title"/> <img :src= "item.banner" style="width:100%;height: 601px" :alt="item.title"/>
</nuxt-link> </nuxt-link>
</li> </li>
</ul> </ul>
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
</div> </div>
</div> </div>
<div class="btn"> <div class="btn">
<span class="prev" @click="prev">《</span> <span class="prev" @click="prev"><img src="../assets/images/l.png"/></span>
<span class="next" @click="next">》</span> <span class="next" @click="next"><img src="../assets/images/r.png"/></span>
</div> </div>
</div> </div>
<!--h1 @click="getArticle">{{msg}}</h1--> <!--h1 @click="getArticle">{{msg}}</h1-->
...@@ -150,14 +150,15 @@ ...@@ -150,14 +150,15 @@
height:100%; height:100%;
} }
span{ span{
display:block; display: block;
height:40px; width: 40px;
width:20px; color: #fff;
color:#fff; padding: 8px 0;
line-height:40px; text-align: Center;
text-align:Center; cursor: pointer;
/*background:rgba(0,0,0, .7);*/ background: #000;
cursor:pointer; margin: 0 10px;
opacity: 0.6;
} }
span.prev{ span.prev{
float:left; float:left;
...@@ -172,8 +173,8 @@ ...@@ -172,8 +173,8 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
.banner-active{ .banner-active{
width: 1200px; width: 1030px;
height: 312px; height: 601px;
/*overflow:hidden;*/ /*overflow:hidden;*/
} }
</style> </style>
pages/index.vue
View file @ 56ae584e
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<div class="main-container"> <div class="main-container">
<banner <banner
v-if="showBanner"
:list = "bannerList" :list = "bannerList"
:looptime="looptime" :looptime="looptime"
:width="width" :width="width"
...@@ -37,10 +36,10 @@ ...@@ -37,10 +36,10 @@
<div class="flex-fdc-jcc activity-container" style="padding: 30px 0;"> <div class="flex-fdc-jcc activity-container" style="padding: 30px 0;">
<div class="tc title">最新活动 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 从这里启程</div> <div class="tc title">最新活动 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 从这里启程</div>
<div class="flex-aic-jcb more-container"> <div class="flex-aic-jcb more-container">
<div style="width: 1100px;text-align: center"> <div style="width: 1070px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
</div> </div>
<nuxt-link to="/activity"><div>MORE</div></nuxt-link> <nuxt-link to="/activity"><div>MORE<img src="../assets/images/r-9.png"/></div></nuxt-link>
</div> </div>
<banner-activity <banner-activity
:list = "activityList" :list = "activityList"
...@@ -60,11 +59,11 @@ ...@@ -60,11 +59,11 @@
<div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;"> <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
<div class="tc title">精选房车游 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 说走就走的房车之旅</div> <div class="tc title">精选房车游 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 说走就走的房车之旅</div>
<div class="flex-aic-jcb" style="margin-bottom: 25px;"> <div class="flex-aic-jcb" style="margin-bottom: 25px;">
<div style="width: 1100px;text-align: center"> <div style="width: 1029px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
</div> </div>
</div> </div>
<div class="flex-aic-jca min-win"> <div class="flex-aic-jca min-win-hc">
<div class="tour-t"> <div class="tour-t">
<div> <div>
<div class="tour-t-s"> 01 </div> <div class="tour-t-s"> 01 </div>
...@@ -110,38 +109,72 @@ ...@@ -110,38 +109,72 @@
</div> </div>
</div> </div>
</div> </div>
<div style="position: relative;margin-top: 30px;"> <div style="position: relative;margin-top: 30px;" v-if="tourList.length>0" >
<div style="display: flex;"> <div style="display: flex;">
<div class="tour-t-l-01"> <nuxt-link :to="/tourDetails/+ tourList[0].id" v-if="tourList.length>0">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 518px;height: 348px;"/> <div class="tour-t-l-00">
<div class="show-detail">查看详情</div> <img :src="tourList[0].imgUrl" style="width: 518px;height: 348px;"/>
<div class="show-detail">
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="../assets/images/r-9.png"/></span>
</div> </div>
</div>
</nuxt-link>
<div style="margin-left: 9px;width: 518px;justify-content: space-between;display: flex;"> <div style="margin-left: 9px;width: 518px;justify-content: space-between;display: flex;">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 255px;height: 160px;"/> <nuxt-link :to="/tourDetails/+ tourList[1].id" v-if="tourList.length>1">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 255px;height: 160px;"/> <div class="tour-t-r-01">
<img :src="tourList[1].imgUrl" style="width: 255px;height: 160px;"/>
<div class="show-detail">
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="../assets/images/r-9.png"/></span>
</div>
</div>
</nuxt-link>
<nuxt-link :to="/tourDetails/+ tourList[2].id" v-if="tourList.length>2">
<div class="tour-t-r-02">
<img :src="tourList[2].imgUrl" style="width: 255px;height: 160px;"/>
<div class="show-detail">
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="../assets/images/r-9.png"/></span>
</div>
</div>
</nuxt-link>
</div> </div>
</div> </div>
<div style="display: flex;"> <div style="display: flex;">
<div style="width: 518px;justify-content: space-between; display: flex;"> <div style="width: 518px;justify-content: space-between; display: flex;">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 255px;height: 160px;"/> <nuxt-link :to="/tourDetails/+ tourList[3].id" v-if="tourList.length>3">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 255px;height: 160px;"/> <div class="tour-t-l-03">
<img :src="tourList[3].imgUrl" style="width: 255px;height: 160px;"/>
<div class="show-detail">
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="../assets/images/r-9.png"/></span>
</div>
</div> </div>
<div class="tour-b-r-03"> </nuxt-link>
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 518px;height: 348px;position: absolute; top: 165px;left: 527px;"/> <nuxt-link :to="/tourDetails/+ tourList[4].id" v-if="tourList.length>4">
<div class="tour-t-l-04">
<img :src="tourList[4].imgUrl" style="width: 255px;height: 160px;"/>
<div class="show-detail"> <div class="show-detail">
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="../assets/images/r-9.png"/></span>
</div> </div>
<div class="show-detail">查看详情</div>
</div> </div>
</nuxt-link>
</div>
<nuxt-link :to="/tourDetails/+ tourList[0].id" v-if="tourList.length>5">
<div class="tour-b-r-05">
<img :src="tourList[5].imgUrl" style="width: 518px;height: 348px;position: absolute; top: 165px;left: 527px;"/>
<div class="show-detail">
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="../assets/images/r-9.png"/></span>
</div>
</div>
</nuxt-link>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-fdc-jcc vehicle-container" style="padding: 30px 0;"> <div class="flex-fdc-jcc vehicle-container" style="padding: 30px 0;">
<div class="tc title">热门房车 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 多款房车任你选择</div> <div class="tc title">热门房车 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 多款房车任你选择</div>
<div class="flex-aic-jcb more-container"> <div class="flex-aic-jcb more-container">
<div style="width: 1100px;text-align: center"> <div style="width: 1160px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
</div> </div>
<nuxt-link to="/vehicle"><div>MORE</div></nuxt-link> <nuxt-link to="/vehicle"><div>MORE<img src="../assets/images/r-9.png"/></div></nuxt-link>
</div> </div>
<div class="min-win"> <div class="min-win">
<ul class="v-type-ul"> <ul class="v-type-ul">
...@@ -150,9 +183,9 @@ ...@@ -150,9 +183,9 @@
<li class="v-type" :class="tabIndex== 2?'v-type-active':''" @click="changeVehicle(2)">齐星依维柯</li> <li class="v-type" :class="tabIndex== 2?'v-type-active':''" @click="changeVehicle(2)">齐星依维柯</li>
<li class="v-type" :class="tabIndex== 3?'v-type-active':''" @click="changeVehicle(3)">奔驰斯宾特</li> <li class="v-type" :class="tabIndex== 3?'v-type-active':''" @click="changeVehicle(3)">奔驰斯宾特</li>
</ul> </ul>
<div v-if="tabIndex==0"> <div v-if="tabIndex==0" class="banner-vehicle">
<div class="gallery-top-box"> <div class="gallery-top-box">
<div class="swiper-container gallery-top" ref="mySwiper"> <div class="swiper-container gallery-top swiper-container-top" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in vehicleList0" :key="item.id"> <div class="swiper-slide" v-for="item in vehicleList0" :key="item.id">
<img :src="item.url"> <img :src="item.url">
...@@ -163,7 +196,7 @@ ...@@ -163,7 +196,7 @@
</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 flex-aic-jcb">
<div class="swiper-slide" v-for="(item,index) in vehicleList0" :key="item.id" @click="changeImgIndex(index)"> <div class="swiper-slide" v-for="(item,index) in vehicleList0" :key="item.id" @click="changeImgIndex(index)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt=""> <img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div> </div>
...@@ -172,9 +205,9 @@ ...@@ -172,9 +205,9 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="tabIndex==1"> <div v-if="tabIndex==1" class="banner-vehicle">
<div class="gallery-top-box"> <div class="gallery-top-box">
<div class="swiper-container gallery-top" ref="mySwiper"> <div class="swiper-container gallery-top swiper-container-top" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in vehicleList1" :key="item.id"> <div class="swiper-slide" v-for="item in vehicleList1" :key="item.id">
<img :src="item.url"> <img :src="item.url">
...@@ -185,8 +218,8 @@ ...@@ -185,8 +218,8 @@
</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 flex-aic-jcb">
<div class="swiper-slide" v-for="(item,index) in vehicleList1" :key="item.id" @click="changeImgIndex(index)"> <div class="swiper-slide" v-for="(item,index) in vehicleList0" :key="item.id" @click="changeImgIndex(index)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt=""> <img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div> </div>
</div> </div>
...@@ -194,9 +227,9 @@ ...@@ -194,9 +227,9 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="tabIndex==2"> <div v-if="tabIndex==2" class="banner-vehicle">
<div class="gallery-top-box"> <div class="gallery-top-box">
<div class="swiper-container gallery-top" ref="mySwiper"> <div class="swiper-container gallery-top swiper-container-top" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in vehicleList2" :key="item.id"> <div class="swiper-slide" v-for="item in vehicleList2" :key="item.id">
<img :src="item.url"> <img :src="item.url">
...@@ -207,8 +240,8 @@ ...@@ -207,8 +240,8 @@
</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 flex-aic-jcb">
<div class="swiper-slide" v-for="(item,index) in vehicleList2" :key="item.id" @click="changeImgIndex(index)"> <div class="swiper-slide" v-for="(item,index) in vehicleList0" :key="item.id" @click="changeImgIndex(index)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt=""> <img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div> </div>
</div> </div>
...@@ -216,9 +249,9 @@ ...@@ -216,9 +249,9 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="tabIndex==3"> <div v-if="tabIndex==3" class="banner-vehicle">
<div class="gallery-top-box"> <div class="gallery-top-box">
<div class="swiper-container gallery-top" ref="mySwiper"> <div class="swiper-container gallery-top swiper-container-top" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in vehicleList3" :key="item.id"> <div class="swiper-slide" v-for="item in vehicleList3" :key="item.id">
<img :src="item.url"> <img :src="item.url">
...@@ -229,8 +262,8 @@ ...@@ -229,8 +262,8 @@
</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 flex-aic-jcb">
<div class="swiper-slide" v-for="(item,index) in vehicleList3" :key="item.id" @click="changeImgIndex(index)"> <div class="swiper-slide" v-for="(item,index) in vehicleList0" :key="item.id" @click="changeImgIndex(index)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt=""> <img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div> </div>
</div> </div>
...@@ -243,19 +276,19 @@ ...@@ -243,19 +276,19 @@
<div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;"> <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
<div class="tc title">新闻动态 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 最新资讯与你分享</div> <div class="tc title">新闻动态 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 最新资讯与你分享</div>
<div class="flex-aic-jcb more-container"> <div class="flex-aic-jcb more-container">
<div style="width: 1100px;text-align: center"> <div style="width: 1029px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
</div> </div>
<nuxt-link to="/news"><div>MORE</div></nuxt-link> <nuxt-link to="/news"><div>MORE<img src="../assets/images/r-9.png"/></div></nuxt-link>
</div> </div>
<div class="flex-aic-jcb-warp min-win"> <div class="flex-aic-jcb-warp min-win">
<div class="item-c flex-aic" v-for="item in newsList" :key="item.id" > <div class="item-c flex-aic" v-for="item in newsList" :key="item.id" >
<nuxt-link :to="'/newsList/'+item.id" class="flex-aic"> <nuxt-link :to="'/newsList/'+item.id" class="flex-aic">
<img :src="item.coverImage" class="item-c-img" :alt="item.title"/> <img :src="item.coverImage" class="item-c-img" :alt="item.title"/>
<div class="item-c-r"> <div class="item-c-r">
<div class="ellipsis2 new-tt">{{item.title}}</div> <div class="ellipsis new-tt">{{item.title}}</div>
<div class="desc ellipsis2">{{item.epitome}}</div> <div class="desc ellipsis2">{{item.epitome}}</div>
<div class="desc">{{item.addTime}}</div> <div class="time">{{item.addTime}}</div>
</div> </div>
</nuxt-link> </nuxt-link>
</div> </div>
...@@ -274,12 +307,14 @@ import menuModal from "../components/menu" ...@@ -274,12 +307,14 @@ 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 NuxtLink from "../.nuxt/components/nuxt-link";
export default { export default {
transition: 'bounce', transition: 'bounce',
components: { components: {
NuxtLink,
menuModal, menuModal,
footerModal, footerModal,
banner, banner,
...@@ -287,7 +322,6 @@ export default { ...@@ -287,7 +322,6 @@ export default {
}, },
data () { data () {
return { return {
showBanner: !0,
items: [], items: [],
curId: 0, curId: 0,
items1: {}, items1: {},
...@@ -381,7 +415,10 @@ export default { ...@@ -381,7 +415,10 @@ export default {
//首页新闻 //首页新闻
let newsData = await axios.get('/api/uccn/article/app/unauth/homePage/1'); let newsData = await axios.get('/api/uccn/article/app/unauth/homePage/1');
let news = newsData.data.data; let news = newsData.data.data;
return { activityList: cc, bannerList: banner, newsList: news} // 首页推荐旅游
let tourData = await axios.get('/api/uccn/app/unauth/tour/shopList?page=1&limit=6');
let tour = tourData.data.data;
return { activityList: cc, bannerList: banner, newsList: news, tourList: tour}
}, },
methods: { methods: {
/** /**
...@@ -479,6 +516,9 @@ export default { ...@@ -479,6 +516,9 @@ export default {
} }
</script> </script>
<style> <style>
.banner-vehicle{
height: 600px;
}
.video-container{ .video-container{
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -486,8 +526,16 @@ export default { ...@@ -486,8 +526,16 @@ export default {
background:url("../assets/images/1.jpg") no-repeat; background:url("../assets/images/1.jpg") no-repeat;
} }
.new-tt{ .new-tt{
font-size: 14px; font-size: 20px;
color: #333; color: #333;
font-weight: 700;
}
.gallery-thumbs{
width: 1120px;
}
.gallery-thumbs-box{
height: 140px;
padding: 10px 0;
} }
.video-play{ .video-play{
position: absolute; position: absolute;
...@@ -508,20 +556,21 @@ export default { ...@@ -508,20 +556,21 @@ export default {
position: relative; position: relative;
background:url("../assets/images/3.jpg") no-repeat; background:url("../assets/images/3.jpg") no-repeat;
} }
.tour-t-l-01, .tour-b-r-03{ .tour-t-l-00, .tour-b-r-01, .tour-t-r-02, .tour-b-l-03, .tour-t-l-04, .tour-b-r-05{
cursor: pointer; cursor: pointer;
} }
.tour-t-l-01:hover .show-detail{ .tour-t-l-00:hover .show-detail, .tour-t-r-01:hover .show-detail, .tour-t-r-02:hover .show-detail,
.tour-t-l-03:hover .show-detail, .tour-t-l-04:hover .show-detail{
display: block; display: block;
} }
.tour-b-r-03:hover .show-detail{ .tour-b-r-05:hover .show-detail{
display: block; display: block;
top: 165px; top: 165px;
right: 0px; right: 0px;
} }
.tour-t-l-01 .show-detail, .tour-b-r-03 .show-detail{ .tour-t-l-00 .show-detail, .tour-b-r-05 .show-detail{
display: none; display: none;
background: #888888; background: #000;
opacity: 0.6; opacity: 0.6;
width: 518px; width: 518px;
height: 348px; height: 348px;
...@@ -531,6 +580,30 @@ export default { ...@@ -531,6 +580,30 @@ export default {
line-height: 300px; line-height: 300px;
color: #000; color: #000;
} }
.tour-t-r-01 .show-detail,.tour-t-r-02 .show-detail{
display: none;
background: #000;
opacity: 0.6;
width: 255px;
height: 160px;
position: absolute;
top: 0;
text-align: center;
line-height: 160px;
color: #000;
}
.tour-t-l-03 .show-detail,.tour-t-l-04 .show-detail{
display: none;
background: #000;
opacity: 0.6;
width: 255px;
height: 160px;
position: absolute;
top: 353px;
text-align: center;
line-height: 160px;
color: #000;
}
.more-container{ .more-container{
position: relative; position: relative;
margin-bottom: 25px; margin-bottom: 25px;
...@@ -540,9 +613,12 @@ export default { ...@@ -540,9 +613,12 @@ export default {
color: #fff; color: #fff;
} }
.v-type{ .v-type{
padding: 10px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
width: 110px;
height: 40px;
line-height: 40px;
text-align: center;
} }
.v-type-ul{ .v-type-ul{
width: 600px; width: 600px;
...@@ -604,40 +680,76 @@ export default { ...@@ -604,40 +680,76 @@ export default {
} }
.item-c-img{ .item-c-img{
width: 180px; width: 180px;
height: 150px; height: 135px;
margin-right: 20px; margin-right: 20px;
} }
.item-c-r{ .item-c-r{
width: 350px; width: 350px;
height: 135px;
} }
.item-c-r .desc{ .item-c-r .desc{
margin: 28px 0;
font-size: 14px; font-size: 14px;
color: #666; color: #666;
} }
.item-c-r .time{
font-size: 13px;
color: #666;
}
.line-title{ .line-title{
background: #1bbb9f; background: #1bbb9f;
width: 30px; width: 30px;
height: 5px; height: 5px;
margin: 0 auto; margin: 0 auto;
} }
.swiper-container { .swiper-container-top {
width: 1200px; width: 1120px;
height: auto; height: 481px;
} }
.gallery-top img{ .gallery-top img{
width: 100%; width: 100%;
height: 481px;
} }
.swiper-wrapper-thu{ .swiper-wrapper-thu{
/*max-width: 293px;*/ /*max-width: 293px;*/
margin: 0 !important; margin: 0 !important;
} }
.swiper-wrapper-thu img{ .swiper-wrapper-thu img{
width: 100%; width: 275px;
border: 2px solid #fff; height: 120px;
/*border: 2px solid #fff;*/
} }
.swiper-wrapper-thu img.active{ .swiper-wrapper-thu img.active, .swiper-wrapper-thu img:hover{
border: 2px solid #1bbb9f; border: 2px solid #1bbb9f;
padding: 5px; padding: 5px;
width: 271px;
height: 116px;
}
.swiper-slide{
/*margin-right: 0 !important;*/
}
.min-win-hc{
width: 1120px;
}
.tour-detail{
border: 1px solid rgb(255, 255, 255);
padding: 10px;
color: #fff;
font-size: 14px;
}
.show-detail span{
border: 1px solid rgb(255, 255, 255);
padding: 10px 40px 10px 20px;
color: #fff;
font-size: 14px;
position: relative;
}
.show-detail img{
position: absolute;
top: 10px;
margin-left: 5px;
} }
</style> </style>
pages/newsList/_id.vue
View file @ 56ae584e
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
if (!detail) { if (!detail) {
return error({ message: 'detail not found', statusCode: 404 }) return error({ message: 'detail not found', statusCode: 404 })
} }
let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three/1'); let tempBannerData = await axios.get('/api/uccn/article/app/unauth/three?type=1&number=3&id='+params.id);
let hot = tempBannerData.data.data; let hot = tempBannerData.data.data;
return {detail: detail, hotList: hot} return {detail: detail, hotList: hot}
}, },
...@@ -137,6 +137,7 @@ ...@@ -137,6 +137,7 @@
background: #fff; background: #fff;
margin-bottom:10px; margin-bottom:10px;
padding: 20px; padding: 20px;
position: relative;
} }
.content{ .content{
display: flex; display: flex;
......
pages/tour.vue
View file @ 56ae584e
...@@ -132,7 +132,7 @@ ...@@ -132,7 +132,7 @@
title: '房车旅游' title: '房车旅游'
}, },
async asyncData() { async asyncData() {
const { data } = await axios.get('https://dev.dfangche.com/api/app/banner/app/unauth/findBannerlist?type=1&platform=1'); const { data } = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=1&platform=1');
let cc = data.data; let cc = data.data;
return { bannerList: cc} return { bannerList: cc}
}, },
......
pages/vehicle.vue
View file @ 56ae584e
...@@ -27,7 +27,12 @@ ...@@ -27,7 +27,12 @@
<h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2> <h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2>
<div class="vehicle-desc">{{item.intro}}</div> <div class="vehicle-desc">{{item.intro}}</div>
<div class="flex-aic"> <div class="flex-aic">
<span class="flex-aic config" v-for="iitem in item.uccnCataList" :key="iitem.id"><img src="../assets/images/license.png"/>{{iitem.name}}</span> <span class="flex-aic config" v-for="iitem in item.uccnCataList" :key="iitem.id">
<img v-if="iindex==0" src="../assets/images/license.png"/>
<img v-if="iindex==1" src="../assets/images/license.png"/>
<img v-if="iindex==2" src="../assets/images/driver-type.png"/>
{{iitem.name}}
</span>
<nuxt-link :to="item.link"><span class="more-set">+更多配置</span></nuxt-link> <nuxt-link :to="item.link"><span class="more-set">+更多配置</span></nuxt-link>
</div> </div>
</div> </div>
......
pages/vehicleList/_id.vue
View file @ 56ae584e
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
{{iitem.name}} {{iitem.name}}
</span> </span>
</div> </div>
<div class="member-list member-list-c" style="margin: 40px 0 20px 0;">可用租赁 <span>详情可咨询客服></span></div> <div class="member-list member-list-c" style="margin: 40px 0 20px 0;">可用租赁 详情可咨询客服</div>
<div style="display: flex;" class="member-list"> <div style="display: flex;" class="member-list">
<div>会员价</div> <div>会员价</div>
<div class="member-list-c"> <div class="member-list-c">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
<div class="flex-aic"><img style="width: 21px;margin-right: 9px;" src="../../assets/images/p.png"/>普通会员 ￥1200/天，可节省￥300 <span>立即查看></span></div> <div class="flex-aic"><img style="width: 21px;margin-right: 9px;" src="../../assets/images/p.png"/>普通会员 ￥1200/天，可节省￥300 <span>立即查看></span></div>
</div> </div>
</div> </div>
<div class="member-list">房车售价<span style="margin-left: 5px;">{{detail.buyPrice/10000}}万/辆</span></div> <div class="member-list" style="margin-top: 20px;">房车售价<span style="margin-left: 5px;">{{detail.buyPrice/10000}}万/辆</span></div>
</div> </div>
<div class="buttonDetails" style="margin-top: 20px;position: relative;" @click="showScan()"> <div class="buttonDetails" style="margin-top: 20px;position: relative;" @click="showScan()">
<span class="ft-20">预定用车</span> <span class="ft-20">预定用车</span>
......
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