Commit c4fe9f79 authored by Cai Wei's avatar Cai Wei

chore(*): 去除头部按钮

parent 65884fbf
......@@ -3,66 +3,33 @@
<iframe
ref="iframeRef"
class="iframe-box"
src="https://screen.bmetech.com/steelmakingScreen/#/ecoDashboard"
:src="url"
frameborder="0"
></iframe>
<div class="back-btn" :style="backBtnStyle">
<div class="back" @click="handleBack">
<img src="@/assets/icons/menu-icon.png" alt="" />
<span>管理平台</span>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted, computed, onUnmounted } from "vue";
import { getToken } from "@/utils/auth";
const router = useRouter();
const windowHeight = ref(window.innerHeight);
const windowWidth = ref(window.innerWidth);
const iframeRef = ref(null);
// 设计稿尺寸
const DESIGN_WIDTH = 1920;
const DESIGN_HEIGHT = 1080;
// 计算缩放比例和位置
const backBtnStyle = computed(() => {
// 根据高度计算缩放比例
const scale = windowHeight.value / DESIGN_HEIGHT;
// 计算实际宽度
const actualWidth = DESIGN_WIDTH * scale;
// 计算左侧留白
const leftMargin = (windowWidth.value - actualWidth) / 2;
const iframeRef = ref(null);
// 按钮在设计稿中的位置
const designLeft = 500;
const designTop = 14;
const url = `https://screen.bmetech.com/steelmakingScreen/#/ecoDashboard?token=${getToken("TOKEN")}`
return {
transform: `scale(${scale})`,
transformOrigin: 'left top',
left: `${leftMargin + designLeft * scale}px`,
top: `${designTop * scale}px`,
};
});
// 监听窗口大小变化
const updateWindowSize = () => {
windowHeight.value = window.innerHeight;
windowWidth.value = window.innerWidth;
};
// 处理iframe消息
const handleMessage = (event) => {
console.log(event);
// 确保消息来源是我们的iframe
if (iframeRef.value && event.source === iframeRef.value.contentWindow) {
try {
// 如果消息是字符串,尝试解析JSON
const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
console.log(data)
// 根据消息类型处理
if (data.type === 'navigation' && data.target === 'dashboard') {
handleBack();
......@@ -74,13 +41,11 @@ const handleMessage = (event) => {
};
onMounted(() => {
window.addEventListener("resize", updateWindowSize);
// 添加消息监听器
window.addEventListener('message', handleMessage);
});
onUnmounted(() => {
window.removeEventListener("resize", updateWindowSize);
// 移除消息监听器
window.removeEventListener('message', handleMessage);
});
......@@ -103,40 +68,5 @@ const handleBack = () => {
width: 100%;
height: 100%;
}
.back-btn {
position: fixed;
.back {
width: 140px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
cursor: pointer;
background: rgba(31, 40, 163, 0.5215686275);
border: 1px solid #56a7aa;
border-radius: 10px;
padding: 0 10px;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 0 10px 0 #56a7aa;
}
}
img {
display: block;
width: 32px;
height: 32px;
object-fit: contain;
border-radius: 50%;
}
span {
display: block;
width: 80px;
color: #ffffff;
text-align: center;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment