fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

 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;
    }