<template>
|
<!-- 3D秀秀 -->
|
<div style="width: 100%;height: 100%;">
|
<div class="xiuxiu_3d_div" :style="'height:' + state.iframeHeight + 'px'">
|
<iframe v-show="!state.showTips" id="seriesDes_iframe" :src="state.pathUrl"
|
style="width: 100%; height: 100%"></iframe>
|
<div v-show="state.showTips" class="empty_div">{{ $t('ebookPage.noData.TR') }}</div>
|
<div v-show="!state.showTips" :class="state.logoMaskStyle">
|
<img src="/static/img/LogoMask.png" style="width: 100%; height: 100%;object-fit: cover;" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup name="CADModel">
|
import ConstParas from "@/utils/constParas.js";
|
import { reactive, onMounted, watch, nextTick, toRefs } from 'vue';
|
const props = defineProps({
|
dispCtrl: Number
|
})
|
const { dispCtrl } = toRefs(props)
|
let state = reactive({
|
pathUrl: "",
|
iframeHeight: "500",
|
showTips: true,
|
logoMaskStyle: "mask_logo_div_3Dshowshow",
|
m_dispCtrl: null
|
})
|
onMounted(() => {
|
initWindowSize()
|
})
|
watch(dispCtrl, (newVal, oldVal) => {
|
state.m_dispCtrl = newVal
|
changeLogoMaskStyle()
|
})
|
const initWindowSize = () => {
|
calcWindowHiehgt()
|
|
window.addEventListener(
|
"resize",
|
() => {
|
return (() => { calcWindowHiehgt() })();
|
},
|
false
|
);
|
}
|
// 修改logo遮罩样式
|
const changeLogoMaskStyle = () => {
|
if (state.m_dispCtrl == ConstParas.Disp3dMethod.CAD_51JM) {
|
state.logoMaskStyle = 'mask_logo_div_51jianmo'
|
}
|
if (state.m_dispCtrl == ConstParas.Disp3dMethod.CAD_3DShowShow) {
|
state.logoMaskStyle = 'mask_logo_div_3Dshowshow'
|
}
|
}
|
// 初始化frame路径
|
const initIFrameUrl = (url) => {
|
if (!url && url == "") {
|
return;
|
} else {
|
state.showTips = false
|
state.pathUrl = url
|
}
|
}
|
// 计算窗口高度
|
const calcWindowHiehgt = () => {
|
nextTick(function () {
|
let headerHeight = 0;
|
let footerHeight = 0;
|
if (document.querySelector("#app header"))
|
headerHeight = document.querySelector("#app header").clientHeight;
|
if (document.querySelector("#app footer"))
|
footerHeight = document.querySelector("#app footer").clientHeight;
|
state.iframeHeight = document.body.clientHeight - headerHeight - footerHeight - 60; //
|
});
|
}
|
defineExpose({
|
initIFrameUrl
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.xiuxiu_3d_div {
|
position: relative;
|
border: 0.01rem solid #eae8e8;
|
background-color: white;
|
margin-top: -0.01rem;
|
}
|
|
.empty_div {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.mask_logo_div_3Dshowshow {
|
position: absolute;
|
top: 0.02rem;
|
left: 0.03rem;
|
width: 1.65rem;
|
height: 0.6rem;
|
}
|
|
.mask_logo_div_51jianmo {
|
position: absolute;
|
top: 0.1rem;
|
left: 0.1rem;
|
width: 3.14rem;
|
height: 0.7rem;
|
|
&>img {
|
object-fit: scale-down;
|
background-color: #000;
|
}
|
}
|
</style>
|
