Skip to content

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

首页-房车租赁

parent 12e7b1c7
Hide whitespace changes
Inline Side-by-side
Showing with 217 additions and 3 deletions
nuxt.config.js
View file @ a8a8bd58
...@@ -13,7 +13,8 @@ module.exports = { ...@@ -13,7 +13,8 @@ module.exports = {
] ]
}, },
css: [ css: [
'~/assets/main.css' '~/assets/main.css',
'swiper/dist/css/swiper.min.css'
], ],
loading: '~/components/loading.vue', loading: '~/components/loading.vue',
......
package.json
View file @ a8a8bd58
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
"express": "^4.16.3", "express": "^4.16.3",
"multer": "^1.3.0", "multer": "^1.3.0",
"muse-ui": "^2.1.0", "muse-ui": "^2.1.0",
"swiper": "^4.0.7",
"nuxt": "^1.0.0" "nuxt": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
......
pages/index.vue
View file @ a8a8bd58
...@@ -72,14 +72,102 @@ ...@@ -72,14 +72,102 @@
</div> </div>
<nuxt-link to="/vehicle"><div>MORE</div></nuxt-link> <nuxt-link to="/vehicle"><div>MORE</div></nuxt-link>
</div> </div>
<div> <div class="min-win">
<ul class="v-type-ul"> <ul class="v-type-ul">
<li class="v-type" :class="tabIndex== 0?'v-type-active':''" @click="changeVehicle(0)">上汽大通</li> <li class="v-type" :class="tabIndex== 0?'v-type-active':''" @click="changeVehicle(0)">上汽大通</li>
<!--<li class="v-type" :class="tabIndex== 0?'v-type-active':''" @click="changeVehicle(0)">上汽大通</li>-->
<li class="v-type" :class="tabIndex== 1?'v-type-active':''" @click="changeVehicle(1)">格林卡诺C2</li> <li class="v-type" :class="tabIndex== 1?'v-type-active':''" @click="changeVehicle(1)">格林卡诺C2</li>
<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>
<!--<lightsSlider></lightsSlider>--> <div v-if="tabIndex==0">
<div class="gallery-top-box">
<div class="swiper-container gallery-top" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in vehicleList0" :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">
<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>
</div>
</div>
</div>
</div>
<div v-if="tabIndex==1">
<div class="gallery-top-box">
<div class="swiper-container gallery-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">
<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">
<div class="gallery-top-box">
<div class="swiper-container gallery-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">
<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">
<div class="gallery-top-box">
<div class="swiper-container gallery-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">
<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> </div>
...@@ -134,6 +222,7 @@ ...@@ -134,6 +222,7 @@
} }
.v-type-ul{ .v-type-ul{
width: 600px; width: 600px;
margin: 0 auto 20px auto;
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
} }
...@@ -167,6 +256,26 @@ ...@@ -167,6 +256,26 @@
height: 5px; height: 5px;
margin: 0 auto; margin: 0 auto;
} }
.swiper-container {
width: 1200px;
height: auto;
}
.gallery-top img{
width: 100%;
}
.swiper-wrapper-thu{
/*max-width: 293px;*/
margin: 0 !important;
}
.swiper-wrapper-thu img{
width: 100%;
border: 2px solid #fff;
}
.swiper-wrapper-thu img.active{
border: 2px solid #1bbb9f;
padding: 5px;
}
</style> </style>
<script> <script>
import axios from 'axios' import axios from 'axios'
...@@ -174,6 +283,8 @@ import banner from "../components/banner" ...@@ -174,6 +283,8 @@ import banner from "../components/banner"
import bannerActivity from "../components/bannerActivity" import bannerActivity from "../components/bannerActivity"
import menuModal from "../components/menu" import menuModal from "../components/menu"
import footerModal from "../components/footer" import footerModal from "../components/footer"
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default { export default {
...@@ -197,6 +308,30 @@ export default { ...@@ -197,6 +308,30 @@ export default {
background: 'red', background: 'red',
color: '#fff', color: '#fff',
fontSize: '70px', fontSize: '70px',
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/e4341e1a3fb70e5e16f07366a762388.jpg', name:'依维柯',sUrl:"https://xxfc.upyuns.com/upload/1/app/e4341e1a3fb70e5e16f07366a762388.jpg"}
],
vehicleList1: [
{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"}
],
vehicleList2: [
{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"}
],
vehicleList3: [
{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"}
],
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:'欣新房车' }], 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: [], items2: [],
industryList: [], industryList: [],
...@@ -205,7 +340,11 @@ export default { ...@@ -205,7 +340,11 @@ export default {
{id: 2,image_url:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg", name:'欣新房车',desc:"房车活动异地取还" } {id: 2,image_url:"https://xxfc.upyuns.com/upload/1/app/c76776783ea54d0c09f9fd2c646404e.jpg", name:'欣新房车',desc:"房车活动异地取还" }
], ],
tabIndex: 0,//当前选中车型 tabIndex: 0,//当前选中车型
preIndex: 0,//当前轮播选中图
} }
},
created(){
}, },
methods: { methods: {
/** /**
...@@ -213,7 +352,46 @@ export default { ...@@ -213,7 +352,46 @@ export default {
*/ */
changeVehicle(index){ changeVehicle(index){
console.log(index); console.log(index);
let t = this;
this.tabIndex = index; 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,
// autoplay: {
// delay: 2500,
// disableOnInteraction: false,
// },
on: {
slideChangeTransitionEnd: function () {
t.preIndex = this.activeIndex-1;
if(t.preIndex == 4){
t.preIndex = 0
}
console.log(this.activeIndex)
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
},
/**
* 缩略图点击切换大图
*/
changeImgIndex(index){
this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
}, },
// 点击下一页回调 // 点击下一页回调
prev () { prev () {
...@@ -227,6 +405,40 @@ export default { ...@@ -227,6 +405,40 @@ export default {
bannerClick () { bannerClick () {
} }
}, },
mounted(){
let t = this;
let galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
let galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
// autoplay: {
// delay: 2500,
// disableOnInteraction: false,
// },
on: {
slideChangeTransitionEnd: function () {
t.preIndex = this.activeIndex-1;
if(t.preIndex == 4){
t.preIndex = 0
}
console.log(this.activeIndex)
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
},
async asyncData() { async asyncData() {
// const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1'); // const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
// let cc = data.data; // let cc = data.data;
......
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