|
@@ -45,12 +45,12 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <!-- 关闭按钮 -->
|
|
|
|
+ <div class="close" @click="$emit('close')" v-show="!modelShow"></div>
|
|
</div>
|
|
</div>
|
|
- <!-- 关闭按钮 -->
|
|
|
|
- <div class="close" @click="$emit('close')" v-show="!modelShow"></div>
|
|
|
|
<!-- 模型和图片 -->
|
|
<!-- 模型和图片 -->
|
|
<div class="model" v-if="modelShow">
|
|
<div class="model" v-if="modelShow">
|
|
- <div class="ifrCon" ref="ifrCon">
|
|
|
|
|
|
+ <div class="ifrCon" ref="ifrCon" :class="{ifrConFull:fullscreen}">
|
|
<!-- 全屏显示的标题 -->
|
|
<!-- 全屏显示的标题 -->
|
|
<div class="fullTitle" v-if="fullscreen">{{ txtInfo.name }}</div>
|
|
<div class="fullTitle" v-if="fullscreen">{{ txtInfo.name }}</div>
|
|
<img
|
|
<img
|
|
@@ -119,6 +119,8 @@ export default {
|
|
if (val) {
|
|
if (val) {
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
this.$refs.myInput.focus();
|
|
this.$refs.myInput.focus();
|
|
|
|
+ console.log(123456);
|
|
|
|
+ document.activeElement.scrollIntoViewIfNeeded();
|
|
}, 100);
|
|
}, 100);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -133,32 +135,13 @@ export default {
|
|
},
|
|
},
|
|
// 点击模型全屏
|
|
// 点击模型全屏
|
|
screen() {
|
|
screen() {
|
|
- const element = this.$refs.ifrCon; // 获取容器
|
|
|
|
- if (this.fullscreen) {
|
|
|
|
- // 如果已经全屏了就退出全屏
|
|
|
|
|
|
+ // const element = this.$refs.ifrCon; // 获取容器
|
|
|
|
+ // if (this.fullscreen) {
|
|
|
|
+ // // 如果已经全屏了就退出全屏
|
|
|
|
+
|
|
|
|
+ // } else {
|
|
|
|
|
|
- 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) {
|
|
|
|
- // IE11
|
|
|
|
- element.msRequestFullscreen();
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ // }
|
|
|
|
|
|
this.fullscreen = !this.fullscreen;
|
|
this.fullscreen = !this.fullscreen;
|
|
},
|
|
},
|
|
@@ -210,6 +193,13 @@ export default {
|
|
z-index: 10000 !important;
|
|
z-index: 10000 !important;
|
|
}
|
|
}
|
|
.antique {
|
|
.antique {
|
|
|
|
+ position: fixed;
|
|
|
|
+ width: 100vw;
|
|
|
|
+ height: calc(100% - 50px);
|
|
|
|
+ bottom: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ z-index: 9998;
|
|
|
|
+
|
|
.model {
|
|
.model {
|
|
padding: 15px 10px 50px;
|
|
padding: 15px 10px 50px;
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -276,6 +266,15 @@ export default {
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .ifrConFull{
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ max-height: 100vh;
|
|
|
|
+ z-index: 99999;
|
|
|
|
+ width: 100vw;
|
|
|
|
+ height: 100vh;
|
|
|
|
+ }
|
|
.rightTxt::-webkit-scrollbar {
|
|
.rightTxt::-webkit-scrollbar {
|
|
width: 4px;
|
|
width: 4px;
|
|
}
|
|
}
|
|
@@ -307,13 +306,6 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- position: fixed;
|
|
|
|
- width: 100vw;
|
|
|
|
- height: calc(100% - 50px);
|
|
|
|
- bottom: 0;
|
|
|
|
- left: 0;
|
|
|
|
- z-index: 9998;
|
|
|
|
&::before {
|
|
&::before {
|
|
content: "";
|
|
content: "";
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -326,9 +318,12 @@ export default {
|
|
z-index: -1;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.main {
|
|
.main {
|
|
|
|
+ position: relative;
|
|
padding: 15px 10px 0;
|
|
padding: 15px 10px 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: calc(100% - 60px);
|
|
|
|
|
|
+ height: 100%;
|
|
|
|
+ min-height: 518px;
|
|
|
|
+
|
|
.top {
|
|
.top {
|
|
width: 100%;
|
|
width: 100%;
|
|
padding-left: 10px;
|
|
padding-left: 10px;
|
|
@@ -410,7 +405,7 @@ export default {
|
|
.conten {
|
|
.conten {
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
width: 334px;
|
|
width: 334px;
|
|
- height: calc(100% - 45px);
|
|
|
|
|
|
+ height: calc(100% - 105px);
|
|
margin: 15px auto 0;
|
|
margin: 15px auto 0;
|
|
background-color: #fff6d2;
|
|
background-color: #fff6d2;
|
|
padding: 10px 0 10px 10px;
|
|
padding: 10px 0 10px 10px;
|
|
@@ -472,13 +467,14 @@ export default {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
position: absolute;
|
|
left: 50%;
|
|
left: 50%;
|
|
- bottom: 15px;
|
|
|
|
|
|
+ bottom: 12px;
|
|
transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
width: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
height: 30px;
|
|
background: url("../../../assets/img/close.png");
|
|
background: url("../../../assets/img/close.png");
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
+
|
|
@media screen and (max-width: 355px) {
|
|
@media screen and (max-width: 355px) {
|
|
.top {
|
|
.top {
|
|
font-size: 12px !important;
|
|
font-size: 12px !important;
|