|
|
@@ -1,22 +1,26 @@
|
|
|
<template>
|
|
|
<div class="ifrcon">
|
|
|
<!-- 待完善 -->
|
|
|
- <!-- :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`" frameborder="0"></iframe>
|
|
|
+ <!-- :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`" frameborder="0"></iframe>
|
|
|
-->
|
|
|
- <iframe v-if="selectExh.type==='4dkk'" allowfullscreen="true" ref="iframe" :key="selected.id+selectExh.id"
|
|
|
- :src="`https://www.4dkankan.com/spg.html?m=${selected.id}&hideNav`" frameborder="0"></iframe>
|
|
|
+ <iframe
|
|
|
+ v-if="selectExh.type === '4dkk'"
|
|
|
+ allowfullscreen="true"
|
|
|
+ ref="iframe"
|
|
|
+ :key="selected.id + selectExh.id"
|
|
|
+ :src="`https://www.4dkankan.com/spg.html?m=${selected.id}&hideNav`"
|
|
|
+ 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 }">
|
|
|
+ <li v-for="(item, i) in currentScenes" @click="handleItem(item)" :key="i" :class="{ active: selected.id == item.id }">
|
|
|
<div>
|
|
|
<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" />
|
|
|
+ <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>
|
|
|
@@ -44,14 +48,12 @@ import mbui from "./ui";
|
|
|
import vAside from "./ui/aside.vue";
|
|
|
import vSelect from "./ui/select.vue";
|
|
|
|
|
|
-
|
|
|
-
|
|
|
export default {
|
|
|
- props: ['type', 'exhibition','area'],
|
|
|
+ props: ["type", "exhibition", "area"],
|
|
|
components: {
|
|
|
mbui,
|
|
|
vSelect,
|
|
|
- vAside
|
|
|
+ vAside,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -62,7 +64,7 @@ export default {
|
|
|
currentScenes: [],
|
|
|
list: [],
|
|
|
isFirst: true,
|
|
|
- loadFinish: false
|
|
|
+ loadFinish: false,
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -70,47 +72,44 @@ export default {
|
|
|
deep: true,
|
|
|
handler: function (newVal) {
|
|
|
if (newVal) {
|
|
|
- this.isFirst = true
|
|
|
- if (newVal.type === '4dkk') {
|
|
|
-
|
|
|
- this.selectExh = this.list.find(v=>v.id===newVal.id)
|
|
|
- this.selected = this.selectExh.scenes[0]
|
|
|
- this.currentScenes = this.selectExh.scenes.map(item => {
|
|
|
+ this.isFirst = true;
|
|
|
+ if (newVal.type === "4dkk") {
|
|
|
+ this.selectExh = this.list.find((v) => v.id === newVal.id);
|
|
|
+ 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`
|
|
|
- icon: `https://4dkk.4dage.com/scene_view_data/${item.id}/user/thumb-2k.jpg?_=5`
|
|
|
- }
|
|
|
- })
|
|
|
- this.loadFinish = true
|
|
|
- }
|
|
|
- else {
|
|
|
+ icon: `https://4dkk.4dage.com/scene_view_data/${item.id}/user/thumb-2k.jpg?_=5`,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ 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
|
|
|
- }
|
|
|
- })
|
|
|
+ dataType: "json",
|
|
|
+ url: `/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
|
|
|
+ this.loadFilsh = true;
|
|
|
if (this.isFirst) {
|
|
|
- this.isFirst = false
|
|
|
+ this.isFirst = false;
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
- this.loadFinish = true
|
|
|
+ this.loadFinish = true;
|
|
|
}, 4000);
|
|
|
} catch (error) {
|
|
|
error;
|
|
|
@@ -124,16 +123,18 @@ export default {
|
|
|
"view.hlookat": newVal.initVisual ? newVal.initVisual.hlookat : 0,
|
|
|
};
|
|
|
|
|
|
-
|
|
|
window.$("#pano").empty();
|
|
|
window.removepano("#pano");
|
|
|
|
|
|
- if (this.selectExh.type != '4dkk') {
|
|
|
+ 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`,
|
|
|
+ // xml: `https://airshow.4dkankan.com/pano/${this.selectExh.id}/${newVal.sceneCode}/vtour/tour.xml`,
|
|
|
+ // swf: `${this.g_CDN}resource/tour.swf`,
|
|
|
+
|
|
|
+ swf: "https://test.4dkankan.com/panorama/showviewer/lib/krpano/tour.swf",
|
|
|
+ xml: "https://4dkk.4dage.com/720yun_fd_manage/WK1856238346562650112/tour.xml",
|
|
|
target: "pano",
|
|
|
html5: "auto",
|
|
|
mobilescale: 1,
|
|
|
@@ -141,44 +142,44 @@ export default {
|
|
|
passQueryParameters: true,
|
|
|
});
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
handleItem(item) {
|
|
|
if (this.loadFinish) {
|
|
|
- this.selected = item
|
|
|
+ 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
|
|
|
+ url: `${this.g_CDN}pano/data.json`,
|
|
|
+ success: (data) => {
|
|
|
+ this.list = data.list;
|
|
|
if (this.area) {
|
|
|
- this.selectExh = this.list.find(item => item.id == this.area)
|
|
|
+ this.selectExh = this.list.find((item) => item.id == this.area);
|
|
|
} else {
|
|
|
- this.selectExh = this.list[0]
|
|
|
+ this.selectExh = this.list[0];
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getList()
|
|
|
+ this.getList();
|
|
|
this.$nextTick(() => {
|
|
|
- let el1 = window.$(".clip-scroller > ul")
|
|
|
- Array.from(el1).forEach(item => {
|
|
|
+ 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>
|
|
|
@@ -188,7 +189,7 @@ export default {
|
|
|
background: #fcfcfc;
|
|
|
text-align: center;
|
|
|
|
|
|
- >iframe {
|
|
|
+ > iframe {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -214,24 +215,12 @@ export default {
|
|
|
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;
|
|
|
+ -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);
|
|
|
+ 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;
|
|
|
}
|
|
|
@@ -248,13 +237,13 @@ export default {
|
|
|
min-width: 50%;
|
|
|
max-width: 100%;
|
|
|
|
|
|
- >ul {
|
|
|
+ > ul {
|
|
|
display: inline-block;
|
|
|
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 {
|
|
|
+ > li {
|
|
|
cursor: pointer;
|
|
|
list-style: none;
|
|
|
display: inline-block;
|
|
|
@@ -262,7 +251,7 @@ export default {
|
|
|
position: relative;
|
|
|
padding-bottom: 8px;
|
|
|
|
|
|
- >div {
|
|
|
+ > div {
|
|
|
width: 68px;
|
|
|
height: 68px;
|
|
|
overflow: hidden;
|
|
|
@@ -271,7 +260,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
color: rgba(256, 256, 256, 0.4);
|
|
|
|
|
|
- >img {
|
|
|
+ > img {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
@@ -286,7 +275,7 @@ export default {
|
|
|
z-index: 99;
|
|
|
}
|
|
|
|
|
|
- >span {
|
|
|
+ > span {
|
|
|
text-align: center;
|
|
|
display: inline-block;
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
@@ -330,7 +319,7 @@ export default {
|
|
|
background: @color;
|
|
|
}
|
|
|
|
|
|
- >div {
|
|
|
+ > div {
|
|
|
color: rgba(256, 256, 256, 1);
|
|
|
}
|
|
|
}
|
|
|
@@ -347,12 +336,12 @@ export default {
|
|
|
position: relative;
|
|
|
max-width: 864px;
|
|
|
|
|
|
- >ul {
|
|
|
+ > ul {
|
|
|
width: 100%;
|
|
|
display: inline-block;
|
|
|
white-space: nowrap;
|
|
|
|
|
|
- >li {
|
|
|
+ > li {
|
|
|
border: 1px solid rgba(256, 256, 256, 0.4);
|
|
|
border-radius: 24px;
|
|
|
padding: 6px 9px;
|
|
|
@@ -360,7 +349,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
display: inline-block;
|
|
|
|
|
|
- >span {
|
|
|
+ > span {
|
|
|
font-size: 16px;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
@@ -373,7 +362,7 @@ export default {
|
|
|
padding: 6px 12px;
|
|
|
border: 1px solid @color;
|
|
|
|
|
|
- >span {
|
|
|
+ > span {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
@@ -386,17 +375,16 @@ export default {
|
|
|
left: 50%;
|
|
|
bottom: 8px;
|
|
|
transform: translateX(-50%);
|
|
|
- background: rgba(0, 0, 0, .3);
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
border-radius: 50%;
|
|
|
padding: 6px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
- >i {
|
|
|
+ > i {
|
|
|
font-size: 28px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
@@ -404,4 +392,4 @@ export default {
|
|
|
.ps__thumb-x {
|
|
|
width: 0px !important;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
