|
|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
- <div class="list">
|
|
|
+ <div class="list" :style="{'max-width':isW ? '1396px':'100%'}">
|
|
|
<div class="l-con" :class="showList ? 'active' : ''" v-if="!(showInfo.catalogRoot.length == 1 && scenes.length == 1 && showInfo.catalogs.length == 1)">
|
|
|
<div class="pic-con">
|
|
|
<div class="clip-scroller" ref="sw" v-swiper:mySwiper="swiperOptions" v-if="scenes.length > 0">
|
|
|
<ul class="pic-list swiper-wrapper">
|
|
|
- <li class="swiper-slide" :title="item.sceneTitle" @click="handleVR(item,$event)" v-for="(item, i) in scenes" :key="i">
|
|
|
+ <li class="swiper-slide" :title="item.sceneTitle" @click="handleVR(item,i)" v-for="(item, i) in scenes" :key="i">
|
|
|
<div :class="{ active: selected.sceneCode == item.sceneCode }">
|
|
|
<img :src="item.icon + `?${Math.random()}`" alt="" />
|
|
|
<i class="iconfont iconedit_type_3d" :class="{ iconedit_type_panorama: item.type !== '4dkk' }"></i>
|
|
|
@@ -16,7 +16,7 @@
|
|
|
|
|
|
<div class="clip-scroller" ref="sw1" v-swiper:mySwipera="swiperOptions" v-if="childTab.length > 1">
|
|
|
<ul class="pp-tap swiper-wrapper">
|
|
|
- <li class="swiper-slide" @click="tabtowActive = item" v-for="(item, i) in childTab" :key="i">
|
|
|
+ <li class="swiper-slide" @click="handleTabtow(item,i)" v-for="(item, i) in childTab" :key="i">
|
|
|
<rollName
|
|
|
:offset="30"
|
|
|
:mgin="20"
|
|
|
@@ -31,9 +31,9 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="clip-scroller" ref="sw2" v-swiper:mySwiperb="swiperOptions" v-if="showInfo.catalogRoot.length > 0 && showInfo.catalogs.length > 1">
|
|
|
- <ul class="tap swiper-wrapper">
|
|
|
- <li class="swiper-slide" @click="taboneActive = item" :class="{ active: item.id == taboneActive.id }" v-for="(item, i) in showInfo.catalogRoot" :key="i">
|
|
|
+ <div class="clip-scroller" ref="sw2" v-swiper:mySwiperb="swiperOptions" v-if="showInfo.catalogRoot.length > 0 && showInfo.catalogs.length > 1">
|
|
|
+ <ul class="tap swiper-wrapper" v-if="showInfo.catalogRoot.length > 1">
|
|
|
+ <li class="swiper-slide" @click="handleTabone(item,i)" :class="{ active: item.id == taboneActive.id }" v-for="(item, i) in showInfo.catalogRoot" :key="i">
|
|
|
<rollName
|
|
|
:offset="30"
|
|
|
:mgin="20"
|
|
|
@@ -61,8 +61,9 @@ import { directive } from "vue-awesome-swiper";
|
|
|
import "swiper/css/swiper.css";
|
|
|
|
|
|
|
|
|
-let $scroll = null;
|
|
|
+let isW = window.innerWidth > 1400;
|
|
|
|
|
|
+console.log(window.innerWidth);
|
|
|
export default {
|
|
|
props: ["select"],
|
|
|
components: { rollName },
|
|
|
@@ -78,6 +79,7 @@ export default {
|
|
|
childTab: [],
|
|
|
scenes: [],
|
|
|
showList: true,
|
|
|
+ isW,
|
|
|
loadFirst: true,
|
|
|
menuWidth: 0,
|
|
|
sceneNum: config.sceneNum,
|
|
|
@@ -94,16 +96,13 @@ export default {
|
|
|
swiperOptions() {
|
|
|
return {
|
|
|
slidesPerView: "auto",
|
|
|
+ // initialSlide:0,
|
|
|
// observer:true,
|
|
|
// observeParents: true,
|
|
|
centeredSlides : true,
|
|
|
centerInsufficientSlides: true,
|
|
|
centeredSlidesBounds: true,
|
|
|
- on:{
|
|
|
- click: function(e){
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- },
|
|
|
+ freeMode:true
|
|
|
};
|
|
|
},
|
|
|
},
|
|
|
@@ -114,11 +113,46 @@ export default {
|
|
|
return this.$refs[ref][0].clientWidth;
|
|
|
}
|
|
|
},
|
|
|
- handleVR(item,e=null) {
|
|
|
+
|
|
|
+ fixPosit(ref,i,prenum,nexnum){
|
|
|
+ if (i!==null) {
|
|
|
+ let acidx = this.$refs[ref].swiper.activeIndex
|
|
|
+
|
|
|
+
|
|
|
+ if (i - acidx > nexnum ) {
|
|
|
+ this.$refs[ref].swiper.slideNext()
|
|
|
+ }
|
|
|
+
|
|
|
+ if (acidx - i > prenum ) {
|
|
|
+ this.$refs[ref].swiper.slidePrev()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleTabtow(item,i=null){
|
|
|
+ this.tabtowActive = item
|
|
|
+ this.fixPosit('sw1',i,3,3)
|
|
|
+ },
|
|
|
+
|
|
|
+ handleTabone(item,i=null){
|
|
|
+ this.taboneActive = item
|
|
|
+ let pp = this.isW ? 5 : 4
|
|
|
+ let nn = this.isW ? 5 : 4
|
|
|
+
|
|
|
+
|
|
|
+ this.fixPosit('sw2',i,pp,nn)
|
|
|
+ },
|
|
|
+
|
|
|
+ handleVR(item,i=null) {
|
|
|
history.replaceState(null, null, "".concat(window.location.pathname, "?").concat(`id=${this.showInfo.id}&vr=${item.sceneCode}`));
|
|
|
this.sceneNum = item.sceneCode;
|
|
|
|
|
|
- console.dir(e&& $(e.target));
|
|
|
+ let pp = this.isW ? 7 : 5
|
|
|
+ let nn = this.isW ? 7 : 5
|
|
|
+
|
|
|
+
|
|
|
+ this.fixPosit('sw',i,pp,nn)
|
|
|
+
|
|
|
},
|
|
|
|
|
|
},
|
|
|
@@ -309,7 +343,7 @@ export default {
|
|
|
.pp-tap {
|
|
|
padding: 0 0 16px;
|
|
|
> li {
|
|
|
- width: 150px;
|
|
|
+ max-width: 100px;
|
|
|
}
|
|
|
}
|
|
|
.tap {
|