<template>
  <div class="scale-container">
    <div
      class="allBox"
      :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
    >
      <!-- 头部 -->
      <Head title="三级劳务体系⼈员数据"></Head>
      <LeftBorder></LeftBorder>
      <RightBorder></RightBorder>
      <BottomBorder></BottomBorder>
      <!-- 统计 -->
      <Statistic></Statistic>
      <!-- 地图 -->
      <Map></Map>
      <!-- 服务企业情况 -->
      <CompanyProfile style="margin-top: 50px"></CompanyProfile>
      <!-- 解决就业情况 -->
      <SolveEmployment style="margin-top: 40px"></SolveEmployment>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Head from "../../components/largeScreen/headHome.vue";
import Statistic from "./components/statistic.vue";
import Map from "./components/map.vue";
import CompanyProfile from "./components/companyProfile.vue";
import SolveEmployment from "./components/solveEmployment.vue";
import LeftBorder from "../../components/largeScreen/leftBorder.vue";
import RightBorder from "../../components/largeScreen/rightBorder.vue";
import BottomBorder from "../../components/largeScreen/bottomBorder.vue";
// 定义标题名称
const title = "三级劳务体系⼈员数据";
// 缩放比例
const scale = ref(1);

// 计算缩放比例
const calculateScale = () => {
  const windowWidth = window.innerWidth;
  const designWidth = 1920;
  scale.value = windowWidth / designWidth;
};

// 处理窗口大小变化
const handleResize = () => {
  calculateScale();
};

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

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
</script>

<style lang="scss" scoped>
.scale-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.allBox {
  width: 1920px;
  height: 3240px;
  // margin: 0 auto;
  background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
  background-size: 100%;
  position: relative;
  transition: transform 0.3s ease; // 添加过渡效果
}
</style>
<style lang="scss">
#app {
  overflow: auto !important;
}
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
