Skip to content

V
vue-ssr
Commit 352d2ab4 authored by lixy's avatar lixy
Browse files
Options

首页

parent fc018e4b
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 116 deletions
pages/index.vue
View file @ 352d2ab4
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
</div> </div>
<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: 14px;margin: 0 5px;">●</span> 从这里启程</div>
<div class="flex-aic-jcb more-container"> <div class="flex-aic-jcb more-container">
<div style="width: 1070px;text-align: center"> <div style="width: 1070px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</banner-activity> </banner-activity>
</div> </div>
<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: 14px;margin: 0 5px;">●</span> 说走就走的房车之旅</div>
<div class="flex-aic-jcb" style="margin-bottom: 25px;"> <div class="flex-aic-jcb" style="margin-bottom: 25px;">
<div style="width: 1029px;text-align: center"> <div style="width: 1029px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
</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: 14px;margin: 0 5px;">●</span> 多款房车任你选择</div>
<div class="flex-aic-jcb more-container"> <div class="flex-aic-jcb more-container">
<div style="width: 1160px;text-align: center"> <div style="width: 1160px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
<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" class="banner-vehicle"> <div class="banner-vehicle">
<div class="gallery-top-box"> <div class="gallery-top-box">
<div class="swiper-container gallery-top swiper-container-top" ref="mySwiper"> <div class="swiper-container gallery-top swiper-container-top" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
...@@ -205,76 +205,76 @@ ...@@ -205,76 +205,76 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="tabIndex==1" class="banner-vehicle"> <!--<div v-if="tabIndex==1" class="banner-vehicle">-->
<div class="gallery-top-box"> <!--<div class="gallery-top-box">-->
<div class="swiper-container gallery-top swiper-container-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">-->
</div> <!--</div>-->
</div> <!--</div>-->
<div class="swiper-button-next swiper-button-black"></div> <!--<div class="swiper-button-next swiper-button-black"></div>-->
<div class="swiper-button-prev 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 flex-aic-jcb"> <!--<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 vehicleList1" :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>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
<div v-if="tabIndex==2" class="banner-vehicle"> <!--<div v-if="tabIndex==2" class="banner-vehicle">-->
<div class="gallery-top-box"> <!--<div class="gallery-top-box">-->
<div class="swiper-container gallery-top swiper-container-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">-->
</div> <!--</div>-->
</div> <!--</div>-->
<div class="swiper-button-next swiper-button-black"></div> <!--<div class="swiper-button-next swiper-button-black"></div>-->
<div class="swiper-button-prev 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 flex-aic-jcb"> <!--<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 vehicleList2" :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>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
<div v-if="tabIndex==3" class="banner-vehicle"> <!--<div v-if="tabIndex==3" class="banner-vehicle">-->
<div class="gallery-top-box"> <!--<div class="gallery-top-box">-->
<div class="swiper-container gallery-top swiper-container-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">-->
</div> <!--</div>-->
</div> <!--</div>-->
<div class="swiper-button-next swiper-button-black"></div> <!--<div class="swiper-button-next swiper-button-black"></div>-->
<div class="swiper-button-prev 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 flex-aic-jcb"> <!--<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 vehicleList3" :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>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> <!--</div>-->
</div> </div>
</div> </div>
<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: 14px;margin: 0 5px;">●</span> 最新资讯与你分享</div>
<div class="flex-aic-jcb more-container"> <div class="flex-aic-jcb more-container">
<div style="width: 1029px;text-align: center"> <div style="width: 1029px;text-align: center">
<div class="line-title"></div> <div class="line-title"></div>
...@@ -356,19 +356,11 @@ export default { ...@@ -356,19 +356,11 @@ export default {
{id: 3, url:'https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg"}, {id: 3, url:'https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg"},
{id: 4, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"} {id: 4, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"}
], ],
list: [{id: 1,image_url:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg", name:'异地取还' },{id: 2,image_url:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg", name:'欣新房车' }],
items2: [],
industryList: [],
hasIndustry: !1,
list1: [{id: 1,image_url:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg", name:'异地取还',desc:"房车活动" },
{id: 2,image_url:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg", name:'欣新房车',desc:"房车活动异地取还" }
],
tabIndex: 0,//当前选中车型 tabIndex: 0,//当前选中车型
preIndex: 0,//当前轮播选中图 preIndex: 0,//当前轮播选中图
swiperTabG: undefined,//当前选中车型swiper
swiperTabT: undefined,//当前选中车型swiper
} }
},
created(){
}, },
async asyncData({ env }) { async asyncData({ env }) {
function formatDate(date, fmt) { function formatDate(date, fmt) {
...@@ -384,7 +376,7 @@ export default { ...@@ -384,7 +376,7 @@ export default {
} }
for (let k in o) { for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) { if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '' let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
} }
} }
...@@ -401,7 +393,6 @@ export default { ...@@ -401,7 +393,6 @@ export default {
let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000 let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
return formatDate(date, 'yyyy-MM-dd'); return formatDate(date, 'yyyy-MM-dd');
} }
// 首页活动 // 首页活动
const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/home'); const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/home');
let cc = data.data; let cc = data.data;
...@@ -425,28 +416,40 @@ export default { ...@@ -425,28 +416,40 @@ export default {
* 车型切换 * 车型切换
*/ */
changeVehicle(index){ changeVehicle(index){
console.log(index);
let t = this; let t = this;
this.tabIndex = index; this.tabIndex = index;
this.preIndex = 0; if(index == 0){
var galleryThumbs = new Swiper('.gallery-thumbs', { this.vehicleList0 =[
spaceBetween: 10, {id: 1, url:'https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg"},
slidesPerView: 4, {id: 2, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"},
freeMode: true, {id: 3, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"},
watchSlidesVisibility: true, {id: 4, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"}
watchSlidesProgress: true, ];
}); }
var galleryTop = new Swiper('.gallery-top', { if(index == 1){
spaceBetween: 10, this.vehicleList0 = [
loop:true, {id: 1, url:'https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg"},
navigation: { {id: 2, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"},
nextEl: '.swiper-button-next', {id: 3, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"},
prevEl: '.swiper-button-prev', {id: 4, url:'https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg"}
}, ];
thumbs: { }
swiper: galleryThumbs if(index == 2){
} this.vehicleList0 = [
}); {id: 1, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"},
{id: 2, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"},
{id: 3, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"},
{id: 4, url:'https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg"}
];
}
if(index == 3){
this.vehicleList0 = [
{id: 1, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"},
{id: 2, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"},
{id: 3, url:'https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg"},
{id: 4, url:'https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"}
];
}
}, },
/** /**
* 缩略图点击切换大图 * 缩略图点击切换大图
...@@ -468,37 +471,39 @@ export default { ...@@ -468,37 +471,39 @@ export default {
}, },
mounted(){ mounted(){
let t = this; let t = this;
let galleryThumbs = new Swiper('.gallery-thumbs', { t.changeVehicle(0);
this.swiperTabG = new Swiper('.gallery-thumbs', {
spaceBetween: 10, spaceBetween: 10,
slidesPerView: 4, slidesPerView: 4,
freeMode: true, freeMode: true,
watchSlidesVisibility: true, watchSlidesVisibility: true,
watchSlidesProgress: true, watchSlidesProgress: true,
}); });
let galleryTop = new Swiper('.gallery-top', { this.swiperTabT = new Swiper('.gallery-top', {
spaceBetween: 10, spaceBetween: 10,
loop:true, loop:true,
// autoplay: { autoplay: {
// delay: 2500, delay: 2500,
// disableOnInteraction: false, disableOnInteraction: false,
// }, },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: { on: {
slideChangeTransitionEnd: function () { slideChangeTransitionEnd: function () {
t.preIndex = this.activeIndex-1; t.preIndex = this.activeIndex-1;
if(t.preIndex == 4){ if(t.preIndex == 4){
t.preIndex = 0 t.$refs.mySwiper.swiper.slideTo(1, 1000, true);
t.preIndex = 0;
} else if(t.preIndex == -1){ } else if(t.preIndex == -1){
t.preIndex = 3 t.preIndex = 3;
} }
console.log(t.preIndex + "---" +this.activeIndex) console.log(t.preIndex + "---" +this.activeIndex)
}, },
}, },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: { thumbs: {
swiper: galleryThumbs swiper: t.swiperTabG
} }
}); });
} }
......
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