From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示
---
src/layout/index.vue | 57 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 39 insertions(+), 18 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index a316cea..f713ab7 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,8 +1,8 @@
<template>
- <div class="home">
+ <div :class="{layout:true, 'narrowScreen':narrowScreen}">
<div id="cesium"></div>
<div class="page-index">
- <Header/>
+ <Header />
<router-view></router-view>
</div>
</div>
@@ -12,29 +12,52 @@
import { onMounted } from 'vue';
import cesiumOperation from '@/utils/cesium-tsa';
import Header from './Header.vue';
-
-const { _init } = cesiumOperation();
+const narrowScreen = ref(false)
+const narrowScreenFun = () => {
+ // 监听窗口变化，计算是不是 窄屏幕
+ narrowScreen.value = window.innerWidth / window.innerHeight < 16 / 9;
+};
onMounted(() => {
- _init('cesium');
+ narrowScreenFun()
+ window.addEventListener('resize', narrowScreenFun);
});
</script>
<style scoped lang="scss">
-.home {
+.layout {
position: relative;
- height: 100%;
width: 100%;
- overflow: hidden;
+ 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 {
- height: 100%;
- width: 100%;
-
:deep() {
.cesium-viewer {
width: 100%;
height: 100%;
+ overflow: hidden;
.cesium-viewer-cesiumWidgetContainer {
width: 100%;
@@ -51,21 +74,19 @@
}
}
}
+
+ .cesium-viewer-bottom {
+ display: none;
+ }
}
}
.page-index {
- left: 0;
- top: 0;
- position: absolute;
- z-index: 999;
- height: 100%;
- width: 100%;
background-image: url('../assets/images/bg-new.png');
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
-
+
> * {
pointer-events: auto;
}
--
Gitblit v1.9.3