<template>
  <!-- <div class="xtjc-left-side" :style="{
    transform:`scale(${transformNum})`,
    top:`${transformTop}px`,
    'margin-left': `${transformLeft}px`
  }"> -->
  <div class="xtjc-left-side">
    <!-- 雨情监测 -->
    <weatherTitle
  /></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import weatherTitle from './components/rainCondition.vue';
import { useDebounceFn } from '@vueuse/core';
import eventBus from '/@/utils/eventBus';
let transformNum = ref(0.8)
let transformTop = ref(0)
let transformLeft = ref(-40)
const getWindowSize = (e) => {
  let visualHeight = window.innerHeight
  transformNum.value = visualHeight/1080
  transformTop.value = 90-((1080-visualHeight)*0.53)
  transformLeft.value = (1080-visualHeight)*-0.26
  eventBus.emit('setWindowRight',450-((1080-visualHeight)*0.50))
  // transformNum.value = visualHeight/1080
  // if(visualHeight>911){
  //   transformTop.value = 90
  //   transformLeft.value = 0
  //   transformNum.value = 1
  //   eventBus.emit('setWindowRight',2)
  // }else{
  //   transformTop.value = 0
  //   transformLeft.value = -40
  //   transformNum.value = 0.8
  //   eventBus.emit('setWindowRight',1)
  // }
}
onMounted(() => {
  window.addEventListener('resize', useDebounceFn(function (event) {
    getWindowSize(event)
  }, 300));
  getWindowSize()
})
</script>
<style lang="less" scoped>
.xtjc-left-side {
  // position: fixed;
  position: absolute;
  left: 0px;
  top: 60px;
  z-index: 3;
  width: 430px;
  // height: calc(100% - 135px);
  // overflow-y: auto;
  // overflow-x: hidden;
  margin-left: 0px;
  // transform: scale(0.86);
}

.xtjc-left-side {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    left: -400px;
  }

  100% {
    left: 20px;
  }
}
</style>
