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{
text-decoration: none;
}
.more-container a:hover{
right: 25px;
color: #1bbb9f;
box-shadow: 5px 5px 5px #888888;
right: 30px;
/*color: #1bbb9f;*/
/*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{
......
components/bannerActivity.vue
View file @ 56ae584e
......@@ -4,7 +4,7 @@
<ul>
<li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
<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>
</li>
</ul>
......@@ -16,8 +16,8 @@
</div>
</div>
<div class="btn">
<span class="prev" @click="prev">《</span>
<span class="next" @click="next">》</span>
<span class="prev" @click="prev"><img src="../assets/images/l.png"/></span>
<span class="next" @click="next"><img src="../assets/images/r.png"/></span>
</div>
</div>
<!--h1 @click="getArticle">{{msg}}</h1-->
......@@ -150,14 +150,15 @@
height:100%;
}
span{
display:block;
height:40px;
width:20px;
color:#fff;
line-height:40px;
text-align:Center;
/*background:rgba(0,0,0, .7);*/
cursor:pointer;
display: block;
width: 40px;
color: #fff;
padding: 8px 0;
text-align: Center;
cursor: pointer;
background: #000;
margin: 0 10px;
opacity: 0.6;
}
span.prev{
float:left;
......@@ -172,8 +173,8 @@
transform: translateY(-50%);
}
.banner-active{
width: 1200px;
height: 312px;
width: 1030px;
height: 601px;
/*overflow:hidden;*/
}
</style>
pages/index.vue
View file @ 56ae584e
......@@ -4,7 +4,6 @@
<div class="main-container">
<banner
v-if="showBanner"
:list = "bannerList"
:looptime="looptime"
:width="width"
......@@ -37,10 +36,10 @@
<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="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>
<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>
<banner-activity
:list = "activityList"
......@@ -60,11 +59,11 @@
<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="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>
</div>
<div class="flex-aic-jca min-win">
<div class="flex-aic-jca min-win-hc">
<div class="tour-t">
<div>
<div class="tour-t-s"> 01 </div>
......@@ -110,38 +109,72 @@
</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 class="tour-t-l-01">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 518px;height: 348px;"/>
<div class="show-detail">查看详情</div>
<nuxt-link :to="/tourDetails/+ tourList[0].id" v-if="tourList.length>0">
<div class="tour-t-l-00">
<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>
</nuxt-link>
<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;"/>
<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">
<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 style="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;"/>
<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">
<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 class="tour-b-r-03">
<img src="https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg" style="width: 518px;height: 348px;position: absolute; top: 165px;left: 527px;"/>
</nuxt-link>
<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">
<span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="../assets/images/r-9.png"/></span>
</div>
<div class="show-detail">查看详情</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 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="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>
<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 class="min-win">
<ul class="v-type-ul">
......@@ -150,9 +183,9 @@
<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>
</ul>
<div v-if="tabIndex==0">
<div v-if="tabIndex==0" class="banner-vehicle">
<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-slide" v-for="item in vehicleList0" :key="item.id">
<img :src="item.url">
......@@ -163,7 +196,7 @@
</div>
<div class="gallery-thumbs-box">
<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)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div>
......@@ -172,9 +205,9 @@
</div>
</div>
</div>
<div v-if="tabIndex==1">
<div v-if="tabIndex==1" class="banner-vehicle">
<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-slide" v-for="item in vehicleList1" :key="item.id">
<img :src="item.url">
......@@ -185,8 +218,8 @@
</div>
<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 vehicleList1" :key="item.id" @click="changeImgIndex(index)">
<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)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div>
</div>
......@@ -194,9 +227,9 @@
</div>
</div>
</div>
<div v-if="tabIndex==2">
<div v-if="tabIndex==2" class="banner-vehicle">
<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-slide" v-for="item in vehicleList2" :key="item.id">
<img :src="item.url">
......@@ -207,8 +240,8 @@
</div>
<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 vehicleList2" :key="item.id" @click="changeImgIndex(index)">
<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)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div>
</div>
......@@ -216,9 +249,9 @@
</div>
</div>
</div>
<div v-if="tabIndex==3">
<div v-if="tabIndex==3" class="banner-vehicle">
<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-slide" v-for="item in vehicleList3" :key="item.id">
<img :src="item.url">
......@@ -229,8 +262,8 @@
</div>
<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 vehicleList3" :key="item.id" @click="changeImgIndex(index)">
<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)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div>
</div>
......@@ -243,19 +276,19 @@
<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="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>
<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 class="flex-aic-jcb-warp min-win">
<div class="item-c flex-aic" v-for="item in newsList" :key="item.id" >
<nuxt-link :to="'/newsList/'+item.id" class="flex-aic">
<img :src="item.coverImage" class="item-c-img" :alt="item.title"/>
<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">{{item.addTime}}</div>
<div class="time">{{item.addTime}}</div>
</div>
</nuxt-link>
</div>
......@@ -274,12 +307,14 @@ import menuModal from "../components/menu"
import footerModal from "../components/footer"
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import NuxtLink from "../.nuxt/components/nuxt-link";
export default {
transition: 'bounce',
components: {
NuxtLink,
menuModal,
footerModal,
banner,
......@@ -287,7 +322,6 @@ export default {
},
data () {
return {
showBanner: !0,
items: [],
curId: 0,
items1: {},
......@@ -381,7 +415,10 @@ export default {
//首页新闻
let newsData = await axios.get('/api/uccn/article/app/unauth/homePage/1');
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: {
/**
......@@ -479,6 +516,9 @@ export default {
}
</script>
<style>
.banner-vehicle{
height: 600px;
}
.video-container{
width: 100%;
height: 100%;
......@@ -486,8 +526,16 @@ export default {
background:url("../assets/images/1.jpg") no-repeat;
}
.new-tt{
font-size: 14px;
font-size: 20px;
color: #333;
font-weight: 700;
}
.gallery-thumbs{
width: 1120px;
}
.gallery-thumbs-box{
height: 140px;
padding: 10px 0;
}
.video-play{
position: absolute;
......@@ -508,20 +556,21 @@ export default {
position: relative;
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;
}
.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;
}
.tour-b-r-03:hover .show-detail{
.tour-b-r-05:hover .show-detail{
display: block;
top: 165px;
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;
background: #888888;
background: #000;
opacity: 0.6;
width: 518px;
height: 348px;
......@@ -531,6 +580,30 @@ export default {
line-height: 300px;
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{
position: relative;
margin-bottom: 25px;
......@@ -540,9 +613,12 @@ export default {
color: #fff;
}
.v-type{
padding: 10px;
display: inline-block;
cursor: pointer;
width: 110px;
height: 40px;
line-height: 40px;
text-align: center;
}
.v-type-ul{
width: 600px;
......@@ -604,40 +680,76 @@ export default {
}
.item-c-img{
width: 180px;
height: 150px;
height: 135px;
margin-right: 20px;
}
.item-c-r{
width: 350px;
height: 135px;
}
.item-c-r .desc{
margin: 28px 0;
font-size: 14px;
color: #666;
}
.item-c-r .time{
font-size: 13px;
color: #666;
}
.line-title{
background: #1bbb9f;
width: 30px;
height: 5px;
margin: 0 auto;
}
.swiper-container {
width: 1200px;
height: auto;
.swiper-container-top {
width: 1120px;
height: 481px;
}
.gallery-top img{
width: 100%;
height: 481px;
}
.swiper-wrapper-thu{
/*max-width: 293px;*/
margin: 0 !important;
}
.swiper-wrapper-thu img{
width: 100%;
border: 2px solid #fff;
width: 275px;
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;
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>
pages/newsList/_id.vue
View file @ 56ae584e
......@@ -67,7 +67,7 @@
if (!detail) {
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;
return {detail: detail, hotList: hot}
},
......@@ -137,6 +137,7 @@
background: #fff;
margin-bottom:10px;
padding: 20px;
position: relative;
}
.content{
display: flex;
......
pages/tour.vue
View file @ 56ae584e
......@@ -132,7 +132,7 @@
title: '房车旅游'
},
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;
return { bannerList: cc}
},
......
pages/vehicle.vue
View file @ 56ae584e
......@@ -27,7 +27,12 @@
<h2 style="font-size: 18px;margin:10px 0">{{ item.name }}</h2>
<div class="vehicle-desc">{{item.intro}}</div>
<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>
</div>
</div>
......
pages/vehicleList/_id.vue
View file @ 56ae584e
......@@ -40,7 +40,7 @@
{{iitem.name}}
</span>
</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>会员价</div>
<div class="member-list-c">
......@@ -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>
</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 class="buttonDetails" style="margin-top: 20px;position: relative;" @click="showScan()">
<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