|
|
@@ -2,14 +2,17 @@
|
|
|
<template>
|
|
|
<div class="model-box" :class="{ isMobile }">
|
|
|
<div class="close-btn" @click="onClose"></div>
|
|
|
- <div class="control-bar">
|
|
|
+ <div class="control-bar" :class="{ bottom: isMobile && isFullscreen }" v-if="modelLoaded">
|
|
|
<template v-for="(i, index) in controls">
|
|
|
<div class="item" @click="onClickBar(i)" :style="`background-image:url(${i.url});`"></div>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="model-content">
|
|
|
- <div class="model-view">
|
|
|
- <iframe id="ifr" :src="`/html/model.html?m=${encodeURIComponent(info.fileName)}`" frameborder="0"></iframe>
|
|
|
+ <div class="model-view" :class="{ full: isFullscreen }">
|
|
|
+ <!-- <div class="model-view"> -->
|
|
|
+ <div class="frame-box">
|
|
|
+ <iframe id="ifr" :src="`/html/model.html?m=${encodeURIComponent(info.fileName)}`" frameborder="0"></iframe>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="model-text">
|
|
|
<p class="title">{{ info.name }}</p>
|
|
|
@@ -31,7 +34,7 @@ export default {
|
|
|
return {
|
|
|
isMobile: browser.mobile,
|
|
|
isFullscreen: false,
|
|
|
-
|
|
|
+ modelLoaded: false,
|
|
|
num: 0,
|
|
|
controls: [
|
|
|
{ url: require("@/assets/images/bigger.png"), name: "big" },
|
|
|
@@ -73,29 +76,29 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
onFullScreen() {
|
|
|
- let element = document.documentElement;
|
|
|
- if (this.isFullscreen) {
|
|
|
- if (document.exitFullscreen) {
|
|
|
- document.exitFullscreen();
|
|
|
- } else if (document.webkitCancelFullScreen) {
|
|
|
- document.webkitCancelFullScreen();
|
|
|
- } else if (document.mozCancelFullScreen) {
|
|
|
- document.mozCancelFullScreen();
|
|
|
- } else if (document.msExitFullscreen) {
|
|
|
- document.msExitFullscreen();
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (element.requestFullscreen) {
|
|
|
- element.requestFullscreen();
|
|
|
- } else if (element.webkitRequestFullScreen) {
|
|
|
- element.webkitRequestFullScreen();
|
|
|
- } else if (element.mozRequestFullScreen) {
|
|
|
- element.mozRequestFullScreen();
|
|
|
- } else if (element.msRequestFullscreen) {
|
|
|
- element.msRequestFullscreen();
|
|
|
- }
|
|
|
- }
|
|
|
- // 改变当前全屏状态
|
|
|
+ this.isFullscreen = !this.isFullscreen;
|
|
|
+ // let element = document.documentElement;
|
|
|
+ // if (this.isFullscreen) {
|
|
|
+ // if (document.exitFullscreen) {
|
|
|
+ // document.exitFullscreen();
|
|
|
+ // } else if (document.webkitCancelFullScreen) {
|
|
|
+ // document.webkitCancelFullScreen();
|
|
|
+ // } else if (document.mozCancelFullScreen) {
|
|
|
+ // document.mozCancelFullScreen();
|
|
|
+ // } else if (document.msExitFullscreen) {
|
|
|
+ // document.msExitFullscreen();
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // if (element.requestFullscreen) {
|
|
|
+ // element.requestFullscreen();
|
|
|
+ // } else if (element.webkitRequestFullScreen) {
|
|
|
+ // element.webkitRequestFullScreen();
|
|
|
+ // } else if (element.mozRequestFullScreen) {
|
|
|
+ // element.mozRequestFullScreen();
|
|
|
+ // } else if (element.msRequestFullscreen) {
|
|
|
+ // element.msRequestFullscreen();
|
|
|
+ // }
|
|
|
+ // }
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
@@ -111,6 +114,18 @@ export default {
|
|
|
this.isFullscreen = !this.isFullscreen;
|
|
|
});
|
|
|
});
|
|
|
+
|
|
|
+ window.addEventListener(
|
|
|
+ "message",
|
|
|
+ (e) => {
|
|
|
+ if (e.data) {
|
|
|
+ if (e.data.action == "model_loaded") {
|
|
|
+ this.modelLoaded = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
@@ -136,6 +151,7 @@ export default {
|
|
|
width: 32px;
|
|
|
right: 40px;
|
|
|
bottom: 100px;
|
|
|
+ z-index: 101;
|
|
|
.item {
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
@@ -153,6 +169,7 @@ export default {
|
|
|
top: 60px;
|
|
|
position: absolute;
|
|
|
cursor: pointer;
|
|
|
+ z-index: 99;
|
|
|
}
|
|
|
.model-content {
|
|
|
width: 50%;
|
|
|
@@ -166,9 +183,29 @@ export default {
|
|
|
flex-direction: column;
|
|
|
width: 100%;
|
|
|
height: 70%;
|
|
|
- iframe {
|
|
|
+ .frame-box {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.full {
|
|
|
+ .frame-box {
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ position: fixed;
|
|
|
+ z-index: 100;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ // animation: full_model 0.3s;
|
|
|
+ iframe {
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.model-text {
|
|
|
@@ -183,7 +220,7 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
line-height: 32px;
|
|
|
- text-align: justified;
|
|
|
+ text-align: justify;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -205,6 +242,9 @@ export default {
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
bottom: 30%;
|
|
|
+ &.bottom {
|
|
|
+ bottom: 0.5333rem;
|
|
|
+ }
|
|
|
}
|
|
|
.model-content {
|
|
|
width: 100%;
|
