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 @@
</div>
<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 style="width: 1070px;text-align: center">
<div class="line-title"></div>
......@@ -57,7 +57,7 @@
</banner-activity>
</div>
<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 style="width: 1029px;text-align: center">
<div class="line-title"></div>
......@@ -169,7 +169,7 @@
</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="tc title">热门房车 <span style="font-size: 14px;margin: 0 5px;">●</span> 多款房车任你选择</div>
<div class="flex-aic-jcb more-container">
<div style="width: 1160px;text-align: center">
<div class="line-title"></div>
......@@ -183,7 +183,7 @@
<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" class="banner-vehicle">
<div class="banner-vehicle">
<div class="gallery-top-box">
<div class="swiper-container gallery-top swiper-container-top" ref="mySwiper">
<div class="swiper-wrapper">
......@@ -205,76 +205,76 @@
</div>
</div>
</div>
<div v-if="tabIndex==1" class="banner-vehicle">
<div class="gallery-top-box">
<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">
</div>
</div>
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
</div>
<div class="gallery-thumbs-box">
<div class="swiper-container gallery-thumbs">
<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)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="tabIndex==2" class="banner-vehicle">
<div class="gallery-top-box">
<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">
</div>
</div>
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
</div>
<div class="gallery-thumbs-box">
<div class="swiper-container gallery-thumbs">
<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)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="tabIndex==3" class="banner-vehicle">
<div class="gallery-top-box">
<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">
</div>
</div>
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
</div>
<div class="gallery-thumbs-box">
<div class="swiper-container gallery-thumbs">
<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)">
<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!--<div v-if="tabIndex==1" class="banner-vehicle">-->
<!--<div class="gallery-top-box">-->
<!--<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">-->
<!--</div>-->
<!--</div>-->
<!--<div class="swiper-button-next swiper-button-black"></div>-->
<!--<div class="swiper-button-prev swiper-button-black"></div>-->
<!--</div>-->
<!--<div class="gallery-thumbs-box">-->
<!--<div class="swiper-container gallery-thumbs">-->
<!--<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)">-->
<!--<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div v-if="tabIndex==2" class="banner-vehicle">-->
<!--<div class="gallery-top-box">-->
<!--<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">-->
<!--</div>-->
<!--</div>-->
<!--<div class="swiper-button-next swiper-button-black"></div>-->
<!--<div class="swiper-button-prev swiper-button-black"></div>-->
<!--</div>-->
<!--<div class="gallery-thumbs-box">-->
<!--<div class="swiper-container gallery-thumbs">-->
<!--<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)">-->
<!--<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--<div v-if="tabIndex==3" class="banner-vehicle">-->
<!--<div class="gallery-top-box">-->
<!--<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">-->
<!--</div>-->
<!--</div>-->
<!--<div class="swiper-button-next swiper-button-black"></div>-->
<!--<div class="swiper-button-prev swiper-button-black"></div>-->
<!--</div>-->
<!--<div class="gallery-thumbs-box">-->
<!--<div class="swiper-container gallery-thumbs">-->
<!--<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)">-->
<!--<img :src="item.sUrl" :class="preIndex==index?'active':''" alt="">-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
</div>
<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 style="width: 1029px;text-align: center">
<div class="line-title"></div>
......@@ -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: 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,//当前选中车型
preIndex: 0,//当前轮播选中图
swiperTabG: undefined,//当前选中车型swiper
swiperTabT: undefined,//当前选中车型swiper
}
},
created(){
},
async asyncData({ env }) {
function formatDate(date, fmt) {
......@@ -384,7 +376,7 @@ export default {
}
for (let k in o) {
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))
}
}
......@@ -401,7 +393,6 @@ export default {
let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
return formatDate(date, 'yyyy-MM-dd');
}
// 首页活动
const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/home');
let cc = data.data;
......@@ -425,28 +416,40 @@ export default {
* 车型切换
*/
changeVehicle(index){
console.log(index);
let t = this;
this.tabIndex = index;
this.preIndex = 0;
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
if(index == 0){
this.vehicleList0 =[
{id: 1, url:'https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.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/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"}
];
}
if(index == 1){
this.vehicleList0 = [
{id: 1, url:'https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.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 == 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 {
},
mounted(){
let t = this;
let galleryThumbs = new Swiper('.gallery-thumbs', {
t.changeVehicle(0);
this.swiperTabG = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
let galleryTop = new Swiper('.gallery-top', {
this.swiperTabT = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
// autoplay: {
// delay: 2500,
// disableOnInteraction: false,
// },
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
slideChangeTransitionEnd: function () {
t.preIndex = this.activeIndex-1;
if(t.preIndex == 4){
t.preIndex = 0
t.$refs.mySwiper.swiper.slideTo(1, 1000, true);
t.preIndex = 0;
} else if(t.preIndex == -1){
t.preIndex = 3
t.preIndex = 3;
}
console.log(t.preIndex + "---" +this.activeIndex)
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
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