fix fullscreen
This commit is contained in:
parent
b6b17d1ef0
commit
259752291c
@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import MainPage from "./MainPage.vue";
|
||||
import Slider from "./components/Slider.vue";
|
||||
// import Slider from "./components/Slider.vue";
|
||||
import useWebsocket from "./utils/useWebsocket";
|
||||
import { useWsStore } from "./store";
|
||||
const store = useWsStore();
|
||||
@ -40,8 +40,10 @@ useWebsocket(store, urlPath.value);
|
||||
|
||||
<style scoped>
|
||||
#app-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
@ -44,19 +44,19 @@ store.$subscribe((mutation, state) => {
|
||||
})
|
||||
|
||||
|
||||
// 检查状态
|
||||
onMounted(() => {
|
||||
const settings = store.settings;
|
||||
if (settings.carousel) {
|
||||
// 开始轮播
|
||||
if (timer.value) clearInterval(timer.value);
|
||||
timer.value = setInterval(() => {
|
||||
handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
||||
}, settings.carouselTime * 1000);
|
||||
}
|
||||
// 设置分辨率
|
||||
handleResolutionChange(settings.resolution.width, settings.resolution.height);
|
||||
})
|
||||
// // 检查状态
|
||||
// onMounted(() => {
|
||||
// const settings = store.settings;
|
||||
// if (settings.carousel) {
|
||||
// // 开始轮播
|
||||
// if (timer.value) clearInterval(timer.value);
|
||||
// timer.value = setInterval(() => {
|
||||
// handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
|
||||
// }, settings.carouselTime * 1000);
|
||||
// }
|
||||
// // 设置分辨率
|
||||
// handleResolutionChange(settings.resolution.width, settings.resolution.height);
|
||||
// })
|
||||
|
||||
|
||||
const pathMap = {
|
||||
@ -78,9 +78,11 @@ const pathMap = {
|
||||
}
|
||||
|
||||
function handleResolutionChange(width, height) {
|
||||
console.log('document.documentElement', document.documentElement)
|
||||
if (mainContainer.value) {
|
||||
// mainContainer.value.style.width = `${width}px`;
|
||||
// mainContainer.value.style.height = `${height}px`;
|
||||
// changeScale(mainContainer.value, width, height)
|
||||
changeScale(mainContainer.value, width, height)
|
||||
}
|
||||
}
|
||||
@ -128,10 +130,6 @@ function resetScale(elm) {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/**
|
||||
background: url('https://img1.baidu.com/it/u=2052683582,2603151390&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800')
|
||||
100% / 100% no-repeat;
|
||||
*/
|
||||
background: url(./assets/bg.png) 100% / cover no-repeat;
|
||||
}
|
||||
|
||||
|
@ -28,8 +28,9 @@ onMounted(() => {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* :fullscreen .datetime {
|
||||
right: 620px;
|
||||
top: 56px;
|
||||
} */
|
||||
:fullscreen .datetime {
|
||||
/* right: 620px;
|
||||
top: 56px; */
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
@ -53,23 +53,23 @@ function changeScale(elm, width, height) {
|
||||
elm.style.transform = style.transform;
|
||||
elm.style.transformOrigin = style.transformOrigin;
|
||||
}
|
||||
onMounted(() => {
|
||||
if (document.fullscreenElement && part3d.value) {
|
||||
changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
|
||||
}
|
||||
})
|
||||
watch(() => settings.fullscreen, val => {
|
||||
if (val) {
|
||||
// 全屏状态下
|
||||
if (part3d.value) {
|
||||
changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
|
||||
}
|
||||
} else {
|
||||
if (part3d.value) {
|
||||
changeScale(part3d.value, 1920, 900)
|
||||
}
|
||||
}
|
||||
}, { immediate: true })
|
||||
// onMounted(() => {
|
||||
// if (document.fullscreenElement && part3d.value) {
|
||||
// changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
|
||||
// }
|
||||
// })
|
||||
// watch(() => settings.fullscreen, val => {
|
||||
// if (val) {
|
||||
// // 全屏状态下
|
||||
// if (part3d.value) {
|
||||
// changeScale(part3d.value, document.documentElement.clientWidth, document.documentElement.clientHeight)
|
||||
// }
|
||||
// } else {
|
||||
// if (part3d.value) {
|
||||
// changeScale(part3d.value, 1920, 900)
|
||||
// }
|
||||
// }
|
||||
// }, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@ -3,3 +3,7 @@
|
||||
margin: 0;
|
||||
font-family: '黑体', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
Loading…
Reference in New Issue
Block a user