fix: 天气显示

罗广辉

2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7

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