|
@@ -1,35 +1,56 @@
|
|
|
<template>
|
|
|
<div class="ifrcon">
|
|
|
- <div id="pano" class="pano"></div>
|
|
|
- <div v-if="selected" 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 }">
|
|
|
+ <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 }"
|
|
|
+ >
|
|
|
<div>
|
|
|
- <img :src="item.icon"
|
|
|
- alt="" />
|
|
|
- <rollName :offset="20" :active="selected.id == item.id" class="pic-name" :myref="'subw' + item.id"
|
|
|
- :name="item.sceneTitle" />
|
|
|
+ <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"
|
|
|
+ />
|
|
|
</div>
|
|
|
<span class="bar"></span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class="txt_ul clip-scroller" slot="txtList" v-if="!exhibition">
|
|
|
+
|
|
|
+ <div class="txt_ul" slot="txtList">
|
|
|
<ul>
|
|
|
- <li v-for="(item, i) in list" @click="selectExh = item" :key="i" :class="{ active: selectExh.id == item.id }">
|
|
|
- <span>{{ item.title }}</span>
|
|
|
+ <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>
|
|
|
</ul>
|
|
|
</div>
|
|
|
|
|
|
- <div v-if="!isShowM" @click="isShowM = true" class="btn_zhankai" slot="btn_zhankai">
|
|
|
+ <div v-if="!isShow" @click="isShow = true" class="btn_zhankai" slot="btn_zhankai">
|
|
|
<i class="iconfont icon-more"></i>
|
|
|
</div>
|
|
|
- <vAside class="ui_header" slot="aside" />
|
|
|
- <vSelect slot="select" v-if="!exhibition" :type="type"></vSelect>
|
|
|
+ <vAside class="ui_header" slot="aside"/>
|
|
|
+ <vSelect slot="select" :type="type"></vSelect>
|
|
|
</mbui>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -40,9 +61,8 @@ import vAside from "./ui/aside.vue";
|
|
|
import vSelect from "./ui/select.vue";
|
|
|
|
|
|
|
|
|
-
|
|
|
export default {
|
|
|
- props: ['type', 'exhibition'],
|
|
|
+ props:['type'],
|
|
|
components: {
|
|
|
mbui,
|
|
|
vSelect,
|
|
@@ -51,196 +71,72 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
params: "",
|
|
|
- isShowM: true,
|
|
|
- selected: {},
|
|
|
- selectExh: {},
|
|
|
- currentScenes:[],
|
|
|
- list: [],
|
|
|
- isFirst:true,
|
|
|
- loadFinish: false
|
|
|
+ isShow:true,
|
|
|
+ selected: '',
|
|
|
+ selectExh:{},
|
|
|
+ list:[]
|
|
|
};
|
|
|
},
|
|
|
- watch: {
|
|
|
- selectExh: {
|
|
|
- deep: true,
|
|
|
- handler: function (newVal) {
|
|
|
- if (newVal) {
|
|
|
- this.isFirst = true
|
|
|
- window.$.ajax({
|
|
|
- dataType:'json',
|
|
|
- url: `https://4dkk.4dage.com/720yun_fd_manage/${newVal.id}/someData.json?_=0.0672449349999431`, 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");
|
|
|
- window.embedpano({
|
|
|
- // https://4dkk.4dage.com/720yun_fd_manage/fd720_FC5BmPHcV/vtour/tour.xml
|
|
|
- // xml: "%HTMLPATH%/static/template/tour.xml",
|
|
|
- xml: `https://4dkk.4dage.com/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
|
|
|
- swf: `${this.g_CDN}resource/tour.swf`,
|
|
|
- target: "pano",
|
|
|
- html5: "auto",
|
|
|
- mobilescale: 1,
|
|
|
- vars: settings,
|
|
|
- passQueryParameters: true,
|
|
|
- });
|
|
|
-
|
|
|
- // var krpano = document.getElementById("krpanoSWFObject");
|
|
|
- // krpano.call(`loadscene('scene_${this.selectExh.id}__(${newVal.id})')`)
|
|
|
- // setTimeout(() => {
|
|
|
- // if (newVal.view) {
|
|
|
- // console.log(newVal.view);
|
|
|
- // krpano.set("view.vlookat", newVal.view.vlookat || 0);
|
|
|
- // krpano.set("view.hlookat", newVal.view.hlookat || 0);
|
|
|
- // }
|
|
|
- // });
|
|
|
+ watch:{
|
|
|
+ selected:{
|
|
|
+ deep:true,
|
|
|
+ handler:function (newVal) {
|
|
|
+ console.log(newVal);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- handleItem(item) {
|
|
|
- if (this.loadFinish) {
|
|
|
- this.selected = item
|
|
|
- }
|
|
|
+ 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 = () => {
|
|
|
+
|
|
|
+ };
|
|
|
},
|
|
|
- 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.$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);
|
|
|
- })
|
|
|
- });
|
|
|
+ this.$bus.$on('showM',()=>{
|
|
|
+ this.isShowM = true
|
|
|
+ })
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="less" scoped>
|
|
|
.ifrcon {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #fcfcfc;
|
|
|
text-align: center;
|
|
|
-
|
|
|
- .pano {
|
|
|
+ > iframe {
|
|
|
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 {
|
|
|
+ width: 100%;
|
|
|
position: relative;
|
|
|
- display: inline-block;
|
|
|
- min-width: 50%;
|
|
|
- max-width: 100%;
|
|
|
-
|
|
|
- >ul {
|
|
|
+ > ul {
|
|
|
+ overflow-x: auto;
|
|
|
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 {
|
|
|
+ background: linear-gradient(to right,rgba(32,32,32,0),rgba(32,32,32,1),rgba(32,32,32,0));
|
|
|
+ min-width: 50%;
|
|
|
+ > 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;
|
|
@@ -248,23 +144,20 @@ 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);
|
|
@@ -277,25 +170,21 @@ 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;
|
|
@@ -307,8 +196,7 @@ export default {
|
|
|
height: 2px;
|
|
|
background: @color;
|
|
|
}
|
|
|
-
|
|
|
- >div {
|
|
|
+ >div{
|
|
|
color: rgba(256, 256, 256, 1);
|
|
|
}
|
|
|
}
|
|
@@ -322,23 +210,19 @@ export default {
|
|
|
border-radius: 30px;
|
|
|
padding: 6px 15px;
|
|
|
display: inline-block;
|
|
|
- position: relative;
|
|
|
- width: 80%;
|
|
|
-
|
|
|
- >ul {
|
|
|
- width: 100%;
|
|
|
- display: inline-block;
|
|
|
- white-space: nowrap;
|
|
|
-
|
|
|
- >li {
|
|
|
+ > ul {
|
|
|
+ overflow-x: auto;
|
|
|
+ display: flex;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ > li {
|
|
|
border: 1px solid rgba(256, 256, 256, 0.4);
|
|
|
border-radius: 24px;
|
|
|
padding: 6px 9px;
|
|
|
margin: 0 5px;
|
|
|
cursor: pointer;
|
|
|
- display: inline-block;
|
|
|
-
|
|
|
- >span {
|
|
|
+ > span {
|
|
|
font-size: 16px;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
@@ -346,40 +230,30 @@ 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>
|