<template>
  <div class="content" >
    <Header />
    <Gradientoverlay />
    <!-- <div class="main">
      <Leftmoudle />
      <Middlemoudle />
      <Rightmoudle />
    </div> -->
  </div>
  <!-- <PixelStreaming ss="ws://192.168.0.120:85"/>   -->
</template>
 


<script setup>

import Header from './header.vue'
import Gradientoverlay from './gradient-overlay.vue'
import Leftmoudle from './leftmodul.vue'
import Rightmoudle from './rightmodul.vue'
import Middlemoudle from './middlemodul.vue'
import Cesium from './Cesium.vue'
import PixelStreaming from './UEpix.vue'
// import autofit from 'autofit.js';



// // 初始化自动适配（Vue3组合式API写法）
// const initAutoFit = () => {
//   autofit.init({
//     designWidth: 1920,
//     designHeight: 1080,
//     el: '.content',
//     resize: true,
//     unit: 'px',
//     debug: false,
//     maxWidth: 1920,
//     maxHeight: 1080,
//     minFontSize: 12,
//     fontScale: true  // 启用字体缩放
//   });
// };

// // 生命周期钩子
// onMounted(() => {
//   initAutoFit();
//   window.addEventListener('resize', handleResize);
// });

// onBeforeUnmount(() => {
//   window.removeEventListener('resize', handleResize);
// });

// // 防抖处理resize事件
// const handleResize = () => {
//   if (typeof autofit === 'undefined') {
//     console.error('autofit is not defined');
//     return;
//   }
//   // 确保autofit对象有resize方法
//   if (typeof autofit.resize === 'function') {
//     autofit.resize();
//   } else {
//     console.error('autofit.resize is not a function');
//   }
// };

</script>

<style scoped></style>