<template>
|
<div :class="{layout:true, 'narrowScreen':narrowScreen}">
|
<div id="cesium"></div>
|
<div class="page-index">
|
<Header />
|
<router-view></router-view>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted } from 'vue';
|
import cesiumOperation from '@/utils/cesium-tsa';
|
import Header from './Header.vue';
|
const narrowScreen = ref(false)
|
const narrowScreenFun = () => {
|
// 监听窗口变化，计算是不是 窄屏幕
|
narrowScreen.value = window.innerWidth / window.innerHeight < 16 / 9;
|
};
|
|
onMounted(() => {
|
narrowScreenFun()
|
window.addEventListener('resize', narrowScreenFun);
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.layout {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
overflow-x: auto;
|
background: #020f25;
|
scrollbar-width: none; /* Firefox 隐藏滚动条 */
|
&::-webkit-scrollbar {
|
display: none; /* Chrome、Safari 隐藏滚动条 */
|
}
|
|
&.narrowScreen{
|
>div{
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
}
|
}
|
|
>div{
|
left: 0;
|
top: 0;
|
position: absolute;
|
height: 1080px;
|
width: 1920px;
|
}
|
|
#cesium {
|
:deep() {
|
.cesium-viewer {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
|
.cesium-viewer-cesiumWidgetContainer {
|
width: 100%;
|
height: 100%;
|
|
.cesium-widget {
|
width: 100%;
|
height: 100%;
|
|
canvas {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
|
.cesium-viewer-bottom {
|
display: none;
|
}
|
}
|
}
|
|
.page-index {
|
background-image: url('../assets/images/bg-new.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
pointer-events: none;
|
|
> * {
|
pointer-events: auto;
|
}
|
}
|
}
|
</style>
|
