Commit 34935d19 authored by lixy's avatar lixy

车型详情页样式调整

parent e8641d31
assets/images/r-9.png

1.1 KB | W: | H:

assets/images/r-9.png

1.12 KB | W: | H:

assets/images/r-9.png
assets/images/r-9.png
assets/images/r-9.png
assets/images/r-9.png
  • 2-up
  • Swipe
  • Onion skin
<template> <template>
<div class="loading-page" v-if="loading"> <div class="loading-page" v-if="loading">
正在加载,请稍等... <!--正在加载,请稍等...-->
</div> </div>
</template> </template>
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
<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,iindex) in item.uccnCataList" :key="iitem.id"> <span class="flex-aic config" v-for="(iitem,iindex) in item.uccnCataList" :key="iitem.id">
<img v-if="iindex==0" src="../assets/images/license.png"/> <img v-if="iindex==0" src="../assets/images/cw.png"/>
<img v-if="iindex==1" 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"/> <img v-if="iindex==2" src="../assets/images/driver-type.png"/>
{{iitem.name}} {{iitem.name}}
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<nuxt-link to="/vehicle">房车租赁></nuxt-link> <nuxt-link to="/vehicle">房车租赁></nuxt-link>
<span>{{detail.name}}</span> <span>{{detail.name}}</span>
</div> </div>
<div style="display: flex;padding: 20px;background: #fff"> <div style="display: flex;padding: 20px;background: #fff;height: 536px;">
<div style="width:540px;" class="tc"> <div style="width:540px;" class="tc">
<div class="gallery-top-box" style="width:100%"> <div class="gallery-top-box" style="width:100%">
<div class="swiper-container gallery-top" style="width: 100%" ref="mySwiper"> <div class="swiper-container gallery-top" style="width: 100%" ref="mySwiper">
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<div class="r-cc"> <div class="r-cc">
<div class="flex-aic"> <div class="flex-aic">
<span class="flex-aic config" v-for="(iitem,iindex) in detail.uccnCataList" :key="iitem.id"> <span class="flex-aic config" v-for="(iitem,iindex) in detail.uccnCataList" :key="iitem.id">
<img v-if="iindex==0" src="../../assets/images/license.png"/> <img v-if="iindex==0" src="../../assets/images/cw.png"/>
<img v-if="iindex==1" 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"/> <img v-if="iindex==2" src="../../assets/images/driver-type.png"/>
{{iitem.name}} {{iitem.name}}
...@@ -44,12 +44,15 @@ ...@@ -44,12 +44,15 @@
<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">
<div class="flex-aic"><img style="width: 21px;margin-right: 9px;" src="../../assets/images/z.png"/>钻石会员 ¥900/天,可节省¥600 <span>立即查看></span></div> <div class="flex-aic" v-for="ictem in detail.userMemberLevel" :key="ictem.level">
<div class="flex-aic"><img style="width: 21px;margin-right: 9px;" src="../../assets/images/g.png"/>黄金会员 ¥1050/天,可节省¥450 <span>立即查看></span></div> <img style="width: 21px;margin-right: 9px;" v-if="ictem.level == 1" src="../../assets/images/p.png"/>
<div class="flex-aic"><img style="width: 21px;margin-right: 9px;" src="../../assets/images/p.png"/>普通会员 ¥1200/天,可节省¥300 <span>立即查看></span></div> <img style="width: 21px;margin-right: 9px;" v-if="ictem.level == 2" src="../../assets/images/g.png"/>
<img style="width: 21px;margin-right: 9px;" v-if="ictem.level == 3" src="../../assets/images/z.png"/>
{{ictem.name}}{{ictem.price}}/天,可节省¥{{ictem.disPrice}} <span>立即查看></span>
</div>
</div> </div>
</div> </div>
<div class="member-list" style="margin-top: 20px;">房车售价<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}}万/辆</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>
...@@ -57,8 +60,11 @@ ...@@ -57,8 +60,11 @@
<img src="../../assets/images/1566894441.png" style="width: 90px;"/> <img src="../../assets/images/1566894441.png" style="width: 90px;"/>
<div style="color: #FFB74B;font-size: 14px;">滴房车App</div> <div style="color: #FFB74B;font-size: 14px;">滴房车App</div>
</div> </div>
<div v-if="isShowScan" class="scan-notice">
<div>安卓用户微信扫码</div>
<div>可马上下单</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex-jcb"> <div class="flex-jcb">
...@@ -121,7 +127,11 @@ ...@@ -121,7 +127,11 @@
let pic = data.data.picture.split(","); let pic = data.data.picture.split(",");
user.pictureList = pic; user.pictureList = pic;
user.pictureNum = pic.length; user.pictureNum = pic.length;
user.buyPrice = parseFloat((user.buyPrice/10000).toFixed(2)) user.buyPrice = parseFloat((user.buyPrice/10000).toFixed(2));
user.userMemberLevel.map(function(item){
item.price = parseFloat((item.discount/100*user.price).toFixed(2));
item.disPrice = parseFloat((user.price-item.price).toFixed(2))
});
if (!user) { if (!user) {
return error({ message: 'User not found', statusCode: 404 }) return error({ message: 'User not found', statusCode: 404 })
} }
...@@ -162,10 +172,10 @@ ...@@ -162,10 +172,10 @@
let galleryTop = new Swiper('.gallery-top', { let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10, spaceBetween: 10,
loop:true, loop:true,
autoplay: { // autoplay: {
delay: 2500, // delay: 2500,
disableOnInteraction: false, // disableOnInteraction: false,
}, // },
on: { on: {
slideChangeTransitionEnd: function () { slideChangeTransitionEnd: function () {
t.preIndex = this.activeIndex-1; t.preIndex = this.activeIndex-1;
...@@ -208,6 +218,7 @@ ...@@ -208,6 +218,7 @@
padding: 10px; padding: 10px;
box-shadow: 0 0 5px #FFB74B; box-shadow: 0 0 5px #FFB74B;
background: #FFF5E6; background: #FFF5E6;
cursor: auto;
} }
.config{ .config{
margin-right: 20px; margin-right: 20px;
...@@ -257,7 +268,15 @@ ...@@ -257,7 +268,15 @@
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
} }
.scan-notice{
position: absolute;
left: 167px;
color: #666;
font-size: 12px;
width: 100%;
top: 145px;
cursor: auto;
}
.detail-new:hover{ .detail-new:hover{
color: #fff; color: #fff;
background: #1bbb9f; background: #1bbb9f;
...@@ -290,13 +309,15 @@ ...@@ -290,13 +309,15 @@
} }
.gallery-top img{ .gallery-top img{
width: 474px; width: 474px;
height: 325px;
} }
.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: 103px;
height: 64px;
border: 2px solid #fff; border: 2px solid #fff;
} }
.swiper-wrapper-thu img.active{ .swiper-wrapper-thu img.active{
......
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