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 | 82 ++++++++++++++++++++++-------------------
1 files changed, 44 insertions(+), 38 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index c7421cd..f713ab7 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,55 +1,63 @@
<template>
- <div class="home">
+ <div :class="{layout:true, 'narrowScreen':narrowScreen}">
<div id="cesium"></div>
<div class="page-index">
- <RouterView></RouterView>
+ <Header />
+ <router-view></router-view>
</div>
</div>
</template>
<script setup>
import { onMounted } from 'vue';
-import CesiumInstance from '@/utils/cesium/cesiumInstance';
-import { RouterView } from 'vue-router';
+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(() => {
- new CesiumInstance('cesium'); // 只初始化一次
+ narrowScreenFun()
+ window.addEventListener('resize', narrowScreenFun);
});
</script>
-<script>
-import index from '@/mixins';
-import { mapGetters } from 'vuex';
-
-export default {
- mixins: [index],
- components: {},
- name: 'index',
- provide() {
- return {
- index: this,
- };
- },
- computed: {},
- props: [],
- methods: {},
-};
-</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%;
@@ -66,22 +74,20 @@
}
}
}
+
+ .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.png');
+ background-image: url('../assets/images/bg-new.png');
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
- color: red;
- >*{
+
+ > * {
pointer-events: auto;
}
}
--
Gitblit v1.9.3