2025-10-16 09:16:42 +08:00
|
|
|
<template>
|
2025-10-21 17:53:57 +08:00
|
|
|
<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>
|
2025-10-16 09:16:42 +08:00
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
2025-10-21 17:53:57 +08:00
|
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
2025-10-16 09:16:42 +08:00
|
|
|
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 = "三级劳务体系⼈员数据";
|
2025-10-21 17:53:57 +08:00
|
|
|
// 缩放比例
|
|
|
|
|
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);
|
|
|
|
|
});
|
2025-10-16 09:16:42 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2025-10-21 17:53:57 +08:00
|
|
|
.scale-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2025-10-21 19:41:21 +08:00
|
|
|
// overflow: hidden;
|
2025-10-21 17:53:57 +08:00
|
|
|
}
|
|
|
|
|
|
2025-10-16 09:16:42 +08:00
|
|
|
.allBox {
|
|
|
|
|
width: 1920px;
|
|
|
|
|
height: 3240px;
|
2025-10-21 17:53:57 +08:00
|
|
|
// margin: 0 auto;
|
2025-10-16 09:16:42 +08:00
|
|
|
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
position: relative;
|
2025-10-21 17:53:57 +08:00
|
|
|
transition: transform 0.3s ease; // 添加过渡效果
|
2025-10-16 09:16:42 +08:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
#app {
|
|
|
|
|
overflow: auto !important;
|
|
|
|
|
}
|
2025-10-21 17:53:57 +08:00
|
|
|
body,
|
|
|
|
|
html {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2025-10-16 09:16:42 +08:00
|
|
|
</style>
|
