DEV_ZZ/rsxm-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改大屏和三个屏幕的分辨率

Browse Source
This commit is contained in:
王捷
2025-10-21 17:53:57 +08:00
parent 52535df2fb
commit 0f96d81ac0
12 changed files with 429 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/views/threeLaborService/index.vue
View File

@ -1,22 +1,28 @@
<template>
<div class="allBox">
<!-- 头部 -->
<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 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";
@ -27,20 +33,58 @@ 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;
// 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>