|
|
@@ -1,56 +1,37 @@
|
|
|
<template>
|
|
|
<div class="ifrcon">
|
|
|
- <iframe
|
|
|
- allowfullscreen="true"
|
|
|
- ref="iframe"
|
|
|
- :key="selected.id"
|
|
|
- :src="`https://www.4dkankan.com/spc.html?m=${selected.id}`"
|
|
|
- frameborder="0"
|
|
|
- @click="handleifrclk"
|
|
|
- @load="onIframLoad"
|
|
|
- ></iframe>
|
|
|
- <mbui :type="type" :isShow="isShow" @close="isShow =false">
|
|
|
- <div class="img_ul" slot="imgList">
|
|
|
- <ul v-if="selectExh.scenes">
|
|
|
- <li
|
|
|
- v-for="(item, i) in selectExh.scenes"
|
|
|
- @click="selected = item"
|
|
|
- :key="i"
|
|
|
- :class="{ active: selected.id == item.id }"
|
|
|
- >
|
|
|
+ <iframe v-if="selectExh.type === '4dkk'" allowfullscreen="true" ref="iframe" :key="selected.id"
|
|
|
+ :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`" frameborder="0"></iframe>
|
|
|
+ <div v-else id="pano" class="pano"></div>
|
|
|
+
|
|
|
+ <div v-if="selected && selectExh.type != '4dkk'" class="title">{{ selected.sceneTitle }}</div>
|
|
|
+ <mbui :type="type" :class="{ uicon: exhibition }" :isShow="isShowM" @close="isShowM = false">
|
|
|
+ <div class="img_ul clip-scroller" slot="imgList">
|
|
|
+ <ul>
|
|
|
+ <li v-for="(item, i) in currentScenes" @click="handleItem(item)" :key="i"
|
|
|
+ :class="{ active: selected.id == item.id }">
|
|
|
<div>
|
|
|
- <img :src="`https://4dkk.4dage.com/images/images${item.id}/floor_0.png?t=1667802021476?v=0&rnd=0.5813201205835572&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70`" v-errorimg="`${fdkk_CDN}/hangzhan/images/images${item.id}/result.png`" alt="" />
|
|
|
- <rollName
|
|
|
- :offset="20"
|
|
|
- :active="selected.id == item.id"
|
|
|
- class="pic-name"
|
|
|
- :myref="'subw' + item.id"
|
|
|
- :name="item.title"
|
|
|
- />
|
|
|
+ <img :src="item.icon" alt="" />
|
|
|
+ <rollName :offset="20" :active="selected.id == item.id" class="pic-name" :myref="'subw' + item.id"
|
|
|
+ :name="item.sceneTitle || item.title" />
|
|
|
</div>
|
|
|
<span class="bar"></span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="txt_ul" slot="txtList">
|
|
|
+ <div class="txt_ul clip-scroller" slot="txtList" v-if="!exhibition">
|
|
|
<ul>
|
|
|
- <li
|
|
|
- v-for="(item, i) in list"
|
|
|
- @click="selectExh = item"
|
|
|
- :key="i"
|
|
|
- :class="{ active: selectExh.id == item.id }"
|
|
|
- >
|
|
|
- <span>{{ selectExh.id == item.id ? item.title : item.short }}</span>
|
|
|
+ <li v-for="(item, i) in list" @click="selectExh = item" :key="i" :class="{ active: selectExh.id == item.id }">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="!isShow" @click="isShow = true" class="btn_zhankai" slot="btn_zhankai">
|
|
|
+ <div v-if="!isShowM" @click="isShowM = true" class="btn_zhankai" slot="btn_zhankai">
|
|
|
<i class="iconfont icon-more"></i>
|
|
|
</div>
|
|
|
- <vAside class="ui_header" slot="aside"/>
|
|
|
- <vSelect slot="select" :type="type"></vSelect>
|
|
|
+ <vAside class="ui_header" slot="aside" />
|
|
|
+ <vSelect slot="select" v-if="!exhibition" :type="type"></vSelect>
|
|
|
</mbui>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -61,8 +42,9 @@ import vAside from "./ui/aside.vue";
|
|
|
import vSelect from "./ui/select.vue";
|
|
|
|
|
|
|
|
|
+
|
|
|
export default {
|
|
|
- props:['type'],
|
|
|
+ props: ['type', 'exhibition'],
|
|
|
components: {
|
|
|
mbui,
|
|
|
vSelect,
|
|
|
@@ -71,72 +53,210 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
params: "",
|
|
|
- isShow:true,
|
|
|
- selected: '',
|
|
|
- selectExh:{},
|
|
|
- list:[]
|
|
|
+ isShowM: true,
|
|
|
+ selected: {},
|
|
|
+ selectExh: {},
|
|
|
+ currentScenes: [],
|
|
|
+ list: [],
|
|
|
+ isFirst: true,
|
|
|
+ loadFinish: false
|
|
|
};
|
|
|
},
|
|
|
- watch:{
|
|
|
- selected:{
|
|
|
- deep:true,
|
|
|
- handler:function (newVal) {
|
|
|
- console.log(newVal);
|
|
|
+ watch: {
|
|
|
+ selectExh: {
|
|
|
+ deep: true,
|
|
|
+ handler: function (newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.isFirst = true
|
|
|
+ if (newVal.type === '4dkk') {
|
|
|
+ this.selectExh = this.list[0]
|
|
|
+ this.selected = this.selectExh.scenes[0]
|
|
|
+ this.currentScenes = this.selectExh.scenes.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ icon: `https://4dkk.4dage.com/images/images${item.id}/floor_0.png?t=1667802021476?v=0&rnd=0.5813201205835572&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.loadFinish = true
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ window.$.ajax({
|
|
|
+ dataType: 'json',
|
|
|
+ url: `https://airshow.4dkankan.com/pano/${newVal.id}/someData.json?_=${Math.random()}`, success: (data) => {
|
|
|
+ this.selected = data.scenes[0]
|
|
|
+ this.currentScenes = data.scenes
|
|
|
+ this.loadFinish = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selected: {
|
|
|
+ deep: true,
|
|
|
+ handler: function (newVal) {
|
|
|
+
|
|
|
+ window.vrViewFn = () => {
|
|
|
+ try {
|
|
|
+ this.loadFilsh = true
|
|
|
+ if (this.isFirst) {
|
|
|
+ this.isFirst = false
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.loadFinish = true
|
|
|
+ }, 4000);
|
|
|
+ } catch (error) {
|
|
|
+ error;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ var settings = {
|
|
|
+ "events[skin_events].onloadcomplete": "js(window.vrViewFn());",
|
|
|
+ "skin_settings.littleplanetintro": this.isFirst,
|
|
|
+ "view.vlookat": newVal.initVisual ? newVal.initVisual.vlookat : 0,
|
|
|
+ "view.hlookat": newVal.initVisual ? newVal.initVisual.hlookat : 0,
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ window.$("#pano").empty();
|
|
|
+ window.removepano("#pano");
|
|
|
+
|
|
|
+ if (this.selectExh.type != '4dkk') {
|
|
|
+ window.embedpano({
|
|
|
+ // https://4dkk.4dage.com/720yun_fd_manage/fd720_FC5BmPHcV/vtour/tour.xml
|
|
|
+ // xml: "%HTMLPATH%/static/template/tour.xml",
|
|
|
+ xml: `https://airshow.4dkankan.com/pano/${this.selectExh.id}/${newVal.sceneCode}/vtour/tour.xml`,
|
|
|
+ swf: `${this.g_CDN}resource/tour.swf`,
|
|
|
+ target: "pano",
|
|
|
+ html5: "auto",
|
|
|
+ mobilescale: 1,
|
|
|
+ vars: settings,
|
|
|
+ passQueryParameters: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- handleifrclk(){
|
|
|
- console.log(1111);
|
|
|
- },
|
|
|
- getList(){
|
|
|
- window.$.ajax({url:`${this.g_CDN}fdkk/data2.json`,success:(data)=>{
|
|
|
- this.list=data.list
|
|
|
- this.selectExh = this.list[0]
|
|
|
- this.selected = this.selectExh.scenes[0]
|
|
|
- }})
|
|
|
- },
|
|
|
- onIframLoad() {
|
|
|
- window.onmessage = () => {
|
|
|
-
|
|
|
- };
|
|
|
+ handleItem(item) {
|
|
|
+ if (this.loadFinish) {
|
|
|
+ this.selected = item
|
|
|
+ }
|
|
|
},
|
|
|
+ getList() {
|
|
|
+ // window.$.ajax({url:`code/pano/data.json`,success:(data)=>{
|
|
|
+ window.$.ajax({
|
|
|
+ url: `${this.g_CDN}pano/data.json`, success: (data) => {
|
|
|
+ this.list = data.list
|
|
|
+ if (this.exhibition) {
|
|
|
+ this.selectExh = this.list.find(item => item.id == this.exhibition)
|
|
|
+ } else {
|
|
|
+ this.selectExh = this.list[0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
- mounted(){
|
|
|
+ mounted() {
|
|
|
this.getList()
|
|
|
- this.$bus.$on('showM',()=>{
|
|
|
- this.isShowM = true
|
|
|
- })
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let el1 = window.$(".clip-scroller > ul")
|
|
|
+ Array.from(el1).forEach(item => {
|
|
|
+ let frame1 = new window.PerfectScrollbar(item, {
|
|
|
+ useBothWheelAxes: true,
|
|
|
+ suppressScrollY: true,
|
|
|
+ wheelSpeed: 0.8,
|
|
|
+ });
|
|
|
+ window.$(item).data("scrollbar", frame1);
|
|
|
+ })
|
|
|
+ });
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="less" scoped>
|
|
|
.ifrcon {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #fcfcfc;
|
|
|
text-align: center;
|
|
|
- > iframe {
|
|
|
+
|
|
|
+ >iframe {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
- .img_ul {
|
|
|
+
|
|
|
+ .pano {
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ --height: 40px;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ margin: 0;
|
|
|
+ height: var(--height);
|
|
|
+ line-height: var(--height);
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 15px;
|
|
|
+ display: inline-block;
|
|
|
+ text-shadow: 1px 0 2px rgb(0 0 0 / 16%);
|
|
|
+ left: 50%;
|
|
|
+ -webkit-transform: translateX(-50%) translateY(0);
|
|
|
+ transform: translateX(-50%) translateY(0);
|
|
|
+ -webkit-transition: background 0.3s ease, min-width 0.3s ease,
|
|
|
+ border-radius 0.3s ease;
|
|
|
+ transition: background 0.3s ease, min-width 0.3s ease,
|
|
|
+ border-radius 0.3s ease;
|
|
|
+ width: 40%;
|
|
|
+ top: 20px;
|
|
|
+ background: -webkit-gradient(linear,
|
|
|
+ left top,
|
|
|
+ right top,
|
|
|
+ from(transparent),
|
|
|
+ color-stop(29%, rgba(0, 0, 0, 0.2)),
|
|
|
+ color-stop(69%, rgba(0, 0, 0, 0.2)),
|
|
|
+ to(transparent));
|
|
|
+ background: linear-gradient(90deg,
|
|
|
+ transparent,
|
|
|
+ rgba(0, 0, 0, 0.2) 29%,
|
|
|
+ rgba(0, 0, 0, 0.2) 69%,
|
|
|
+ transparent);
|
|
|
+ margin-top: 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uicon {
|
|
|
+ & /deep/ .btm-menu {
|
|
|
+ height: 250px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img_ul {
|
|
|
position: relative;
|
|
|
- > ul {
|
|
|
- overflow-x: auto;
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 50%;
|
|
|
+ max-width: 100%;
|
|
|
+
|
|
|
+ >ul {
|
|
|
display: inline-block;
|
|
|
- background: linear-gradient(to right,rgba(32,32,32,0),rgba(32,32,32,1),rgba(32,32,32,0));
|
|
|
- min-width: 50%;
|
|
|
- > li {
|
|
|
+ white-space: nowrap;
|
|
|
+ background: linear-gradient(to right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0));
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ >li {
|
|
|
cursor: pointer;
|
|
|
list-style: none;
|
|
|
display: inline-block;
|
|
|
margin: 8px 10px;
|
|
|
position: relative;
|
|
|
padding-bottom: 8px;
|
|
|
- > div {
|
|
|
+
|
|
|
+ >div {
|
|
|
width: 68px;
|
|
|
height: 68px;
|
|
|
overflow: hidden;
|
|
|
@@ -144,20 +264,23 @@ export default {
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
color: rgba(256, 256, 256, 0.4);
|
|
|
- > img {
|
|
|
+
|
|
|
+ >img {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
height: 100%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
+
|
|
|
.iconfont {
|
|
|
position: absolute;
|
|
|
left: 4px;
|
|
|
top: 4px;
|
|
|
z-index: 99;
|
|
|
}
|
|
|
- > span {
|
|
|
+
|
|
|
+ >span {
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
@@ -170,21 +293,25 @@ export default {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.bar {
|
|
|
display: none;
|
|
|
}
|
|
|
+
|
|
|
.pic-name {
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
text-align: center;
|
|
|
+
|
|
|
/deep/ span {
|
|
|
word-break: keep-all;
|
|
|
white-space: nowrap;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&.active {
|
|
|
.bar {
|
|
|
display: inline-block;
|
|
|
@@ -196,7 +323,8 @@ export default {
|
|
|
height: 2px;
|
|
|
background: @color;
|
|
|
}
|
|
|
- >div{
|
|
|
+
|
|
|
+ >div {
|
|
|
color: rgba(256, 256, 256, 1);
|
|
|
}
|
|
|
}
|
|
|
@@ -209,20 +337,24 @@ export default {
|
|
|
border: 2px solid @color;
|
|
|
border-radius: 30px;
|
|
|
padding: 6px 15px;
|
|
|
- display: inline-block;
|
|
|
- > ul {
|
|
|
- overflow-x: auto;
|
|
|
- display: flex;
|
|
|
- &::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- > li {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ max-width: 864px;
|
|
|
+
|
|
|
+ >ul {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ >li {
|
|
|
border: 1px solid rgba(256, 256, 256, 0.4);
|
|
|
border-radius: 24px;
|
|
|
padding: 6px 9px;
|
|
|
margin: 0 5px;
|
|
|
cursor: pointer;
|
|
|
- > span {
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+ >span {
|
|
|
font-size: 16px;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
@@ -230,30 +362,40 @@ export default {
|
|
|
word-break: keep-all;
|
|
|
color: rgba(256, 256, 256, 0.4);
|
|
|
}
|
|
|
+
|
|
|
&.active {
|
|
|
padding: 6px 12px;
|
|
|
border: 1px solid @color;
|
|
|
- > span {
|
|
|
+
|
|
|
+ >span {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .btn_zhankai{
|
|
|
+
|
|
|
+ .btn_zhankai {
|
|
|
position: fixed;
|
|
|
left: 50%;
|
|
|
bottom: 8px;
|
|
|
transform: translateX(-50%);
|
|
|
- background: rgba(0,0,0,.3);
|
|
|
+ background: rgba(0, 0, 0, .3);
|
|
|
border-radius: 50%;
|
|
|
padding: 6px;
|
|
|
cursor: pointer;
|
|
|
- >i{
|
|
|
+
|
|
|
+ >i {
|
|
|
font-size: 28px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.ps__thumb-x {
|
|
|
+ width: 0px !important;
|
|
|
+}
|
|
|
+</style>
|
tremble