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

169
src/views/integratedTrainingPlatform/index.vue
View File

@ -1,75 +1,80 @@
<template> <template>
<div class="allBox"> <div class="scale-container">
<!-- 头部 --> <div
<Head title="“产教评”融合培训平台"></Head> class="allBox"
<LeftBorder></LeftBorder> :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
<RightBorder></RightBorder> >
<BottomBorder></BottomBorder> <!-- 头部 -->
<div class="mainBox"> <Head title="“产教评”融合培训平台"></Head>
<div class="title"><span>兴蜀来了培训产品 online</span></div> <LeftBorder></LeftBorder>
<div class="contentBox"> <RightBorder></RightBorder>
<StatisticOne style="margin-top: 50px"></StatisticOne> <BottomBorder></BottomBorder>
<ul class="contentOne"> <div class="mainBox">
<li> <div class="title"><span>兴蜀来了培训产品 online</span></div>
<div class="pubTitle">培训内容TOP10</div> <div class="contentBox">
<ConentOneBoxOne></ConentOneBoxOne> <StatisticOne style="margin-top: 50px"></StatisticOne>
</li> <ul class="contentOne">
<li> <li>
<div class="pubTitle">培训课程计划</div> <div class="pubTitle">培训内容TOP10</div>
<ConentOneBoxTwo></ConentOneBoxTwo> <ConentOneBoxOne></ConentOneBoxOne>
</li> </li>
</ul> <li>
<div class="pubTitle">培训课程计划</div>
<ConentOneBoxTwo></ConentOneBoxTwo>
</li>
</ul>
</div>
</div> </div>
</div> <div class="mainBox">
<div class="mainBox"> <div class="title"><span>培训机构情况</span></div>
<div class="title"><span>培训机构情况</span></div> <div class="contentBox">
<div class="contentBox"> <StatisticTwo :tabsData="pxjgTabData"></StatisticTwo>
<StatisticTwo :tabsData="pxjgTabData"></StatisticTwo> <ul class="contentTwo">
<ul class="contentTwo"> <li>
<li> <div class="pubTitle">培训机构数量变化趋势</div>
<div class="pubTitle">培训机构数量变化趋势</div> <ContentTwoBoxOne></ContentTwoBoxOne>
<ContentTwoBoxOne></ContentTwoBoxOne> </li>
</li> <li>
<li> <div class="pubTitle">培训用户数量统计</div>
<div class="pubTitle">培训用户数量统计</div> <ContentTwoBoxTwo></ContentTwoBoxTwo>
<ContentTwoBoxTwo></ContentTwoBoxTwo> </li>
</li> <li>
<li> <div class="pubTitle">各类培训课程人数统计</div>
<div class="pubTitle">各类培训课程人数统计</div> <ContentTwoBoxThree></ContentTwoBoxThree>
<ContentTwoBoxThree></ContentTwoBoxThree> </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> <div class="mainBox">
<div class="mainBox"> <div class="title"><span>证书发证情况</span></div>
<div class="title"><span>证书发证情况</span></div> <div class="contentBox">
<div class="contentBox"> <StatisticTwo :tabsData="zsfzTabData"></StatisticTwo>
<StatisticTwo :tabsData="zsfzTabData"></StatisticTwo> <ul class="contentThree">
<ul class="contentThree"> <li>
<li> <div class="pubTitle">证书发证变化趋势</div>
<div class="pubTitle">证书发证变化趋势</div> <ContentThreeBoxOne></ContentThreeBoxOne>
<ContentThreeBoxOne></ContentThreeBoxOne> </li>
</li> <li>
<li> <div class="pubTitle">热门证书TOP5</div>
<div class="pubTitle">热门证书TOP5</div> <ContentThreeBoxTwo></ContentThreeBoxTwo>
<ContentThreeBoxTwo></ContentThreeBoxTwo> </li>
</li> <li>
<li> <div class="pubTitle">各地区发证数量统计</div>
<div class="pubTitle">各地区发证数量统计</div> <ContentThreeBoxThree></ContentThreeBoxThree>
<ContentThreeBoxThree></ContentThreeBoxThree> </li>
</li> <li>
<li> <div class="pubTitle">各类证书发证数量占比</div>
<div class="pubTitle">各类证书发证数量占比</div> <ContentThreeBoxFour></ContentThreeBoxFour>
<ContentThreeBoxFour></ContentThreeBoxFour> </li>
</li> </ul>
</ul> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import Head from "../../components/largeScreen/headHome.vue"; import Head from "../../components/largeScreen/headHome.vue";
import LeftBorder from "../../components/largeScreen/leftBorder.vue"; import LeftBorder from "../../components/largeScreen/leftBorder.vue";
import RightBorder from "../../components/largeScreen/rightBorder.vue"; import RightBorder from "../../components/largeScreen/rightBorder.vue";
@ -127,9 +132,38 @@ const zsfzTabData = ref([
unit: "个" unit: "个"
} }
]); ]);
// 缩放比例
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scale-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.pubTitle { .pubTitle {
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
@ -144,7 +178,7 @@ const zsfzTabData = ref([
.allBox { .allBox {
width: 1920px; width: 1920px;
height: 3240px; height: 3240px;
margin: 0 auto;
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat; background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
background-size: 100%; background-size: 100%;
position: relative; position: relative;
@ -220,4 +254,11 @@ const zsfzTabData = ref([
#app { #app {
overflow: auto !important; overflow: auto !important;
} }
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style> </style>

1
src/views/platformBusinessData/index.scss
View File

@ -1,7 +1,6 @@
.allBox { .allBox {
width: 1920px; width: 1920px;
height: 3240px; height: 3240px;
margin: 0 auto;
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat; background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
background-size: 100%; background-size: 100%;
position: relative; position: relative;

98
src/views/platformBusinessData/index.vue
View File

@ -1,32 +1,37 @@
<template> <template>
<div class="allBox"> <div class="scale-container">
<!-- 头部 --> <div
<Head title="兴蜀来了平台业务数据"></Head> class="allBox"
<LeftBorder></LeftBorder> :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
<RightBorder></RightBorder> >
<BottomBorder></BottomBorder> <!-- 头部 -->
<!-- 顶部统计 --> <Head title="兴蜀来了平台业务数据"></Head>
<TopStatistics></TopStatistics> <LeftBorder></LeftBorder>
<!-- 数据统计 --> <RightBorder></RightBorder>
<ul class="bigBox"> <BottomBorder></BottomBorder>
<!-- 全职招聘情况 --> <!-- 顶部统计 -->
<MainBoxOne></MainBoxOne> <TopStatistics></TopStatistics>
<!-- 零工招聘情况 --> <!-- 数据统计 -->
<MainBoxTwo></MainBoxTwo> <ul class="bigBox">
<!-- 实习招聘情况 --> <!-- 全职招聘情况 -->
<MainBoxThree></MainBoxThree> <MainBoxOne></MainBoxOne>
<!-- 创业撮合情况 --> <!-- 零工招聘情况 -->
<MainBoxFour></MainBoxFour> <MainBoxTwo></MainBoxTwo>
<!-- 重点人群 --> <!-- 实习招聘情况 -->
<MainBoxFive></MainBoxFive> <MainBoxThree></MainBoxThree>
<!-- 技能培训 --> <!-- 创业撮合情况 -->
<MainBoxSix></MainBoxSix> <MainBoxFour></MainBoxFour>
</ul> <!-- 重点人群 -->
<MainBoxFive></MainBoxFive>
<!-- 技能培训 -->
<MainBoxSix></MainBoxSix>
</ul>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import Head from "../../components/largeScreen/headHome.vue"; import Head from "../../components/largeScreen/headHome.vue";
import LeftBorder from "../../components/largeScreen/leftBorder.vue"; import LeftBorder from "../../components/largeScreen/leftBorder.vue";
import RightBorder from "../../components/largeScreen/rightBorder.vue"; import RightBorder from "../../components/largeScreen/rightBorder.vue";
@ -41,13 +46,58 @@ import MainBoxSix from "./components/mainBoxSix";
// 定义标题名称 // 定义标题名称
const title = "三级劳务体系⼈员数据"; 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> </script>
<style lang="scss" scoped> <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; // 添加过渡效果
}
@import "./index.scss"; @import "./index.scss";
</style> </style>
<style lang="scss"> <style lang="scss">
#app { #app {
overflow: auto !important; overflow: auto !important;
} }
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style> </style>

15
src/views/recruitment/card/EnterpriseEmploymentThree.vue
View File

@ -14,7 +14,7 @@ const option = {
top: "17%", top: "17%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "10%" bottom: "20%"
}, },
// 设置图例 // 设置图例
legend: { legend: {
@ -33,7 +33,12 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 20, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
},
type: "category", type: "category",
data: ["制造业", "服务业", "建筑业"] data: ["制造业", "服务业", "建筑业"]
}, },
@ -64,7 +69,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色
@ -91,7 +97,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#CBF2FA" color: "#CBF2FA",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

15
src/views/recruitment/card/EnterpriseEmploymentTwo.vue
View File

@ -14,7 +14,7 @@ const option = {
top: "15%", top: "15%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "10%" bottom: "20%"
}, },
// 设置图例 // 设置图例
legend: { legend: {
@ -33,7 +33,12 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 20, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
},
type: "category", type: "category",
data: ["微型企业", "小型企业", "中型企业", "大型企业"] data: ["微型企业", "小型企业", "中型企业", "大型企业"]
}, },
@ -64,7 +69,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色
@ -91,7 +97,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#CBF2FA" color: "#CBF2FA",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

14
src/views/recruitment/card/LaborSystemFour.vue
View File

@ -17,7 +17,7 @@ const option = {
top: "17%", top: "17%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "10%" bottom: "20%"
}, },
tooltip: { tooltip: {
trigger: "axis" trigger: "axis"
@ -28,7 +28,12 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 30, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
},
type: "category", type: "category",
data: [ data: [
"1月", "1月",
@ -67,12 +72,13 @@ const option = {
type: "line", type: "line",
showBackground: true, showBackground: true,
barWidth: 8, barWidth: 8,
data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41], data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
// 设置柱状图的数值 // 设置柱状图的数值
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

7
src/views/recruitment/card/LaborSystemOne.vue
View File

@ -33,7 +33,9 @@ const option = {
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#CBF2FA" color: "#CBF2FA"
} },
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA" // 可以同时设置文字颜色
} }
}, },
yAxis: { yAxis: {
@ -62,7 +64,8 @@ const option = {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

14
src/views/recruitment/card/LaborSystemThree.vue
View File

@ -17,7 +17,7 @@ const option = {
top: "17%", top: "17%",
left: "15%", left: "15%",
right: "5%", right: "5%",
bottom: "10%" bottom: "20%"
}, },
tooltip: { tooltip: {
trigger: "axis" trigger: "axis"
@ -28,7 +28,12 @@ const option = {
color: "#CBF2FA" // 文字颜色 color: "#CBF2FA" // 文字颜色
} }
}, },
axisLabel: {
fontSize: 14, // 设置 x 轴文字大小
color: "#CBF2FA", // 可以同时设置文字颜色
rotate: 30, // 文字倾斜45度
margin: 20 // 增加文字与轴线的距离
},
type: "category", type: "category",
data: [ data: [
"1月", "1月",
@ -67,12 +72,13 @@ const option = {
type: "line", type: "line",
showBackground: true, showBackground: true,
barWidth: 8, barWidth: 8,
data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41], data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
// 设置柱状图的数值 // 设置柱状图的数值
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#30DCFF" color: "#30DCFF",
fontSize: 16
}, },
itemStyle: { itemStyle: {
//渐变色 //渐变色

8
src/views/recruitment/card/LaborSystemTwo.vue
View File

@ -94,8 +94,12 @@ let option = {
return 30; return 30;
}, },
label: { label: {
show: false, show: false, // 改为 true 显示标签
formatter: "{b}" formatter: "{b}", // 显示城市名称
position: "right", // 标签位置在点的上方
color: "#fff", // 标签颜色
fontSize: 16, // 字体大小
fontWeight: "bold" // 字体粗细
}, },
symbol: "image://" + pointImage // 使用本地图片作为标记 symbol: "image://" + pointImage // 使用本地图片作为标记
} }

8
src/views/recruitment/components/costomCaed.vue
View File

@ -49,10 +49,10 @@ const state = reactive({
"公共服务站点 40", "公共服务站点 40",
// "培训机构 130", // "培训机构 130",
// "咨询机构 220", // "咨询机构 220",
"劳务公司 13", "培训机构 5"
"招聘与猎头机构 5", // "招聘与猎头机构 5",
"⼈⼒资源服务外包机构（HRO）3", // "⼈⼒资源服务外包机构（HRO）3",
"职业中介与公共就业服务机构 8" // "职业中介与公共就业服务机构 8"
], ],
activeIndex: 0 activeIndex: 0
}); });

159
src/views/recruitment/layout/centerModel.vue
View File

@ -14,18 +14,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content" v-show="isactive == -1"> <div class="content" v-show="isactive != 0 && isactive != 5">
<div class="num">74.24万</div> <div class="num">81.1万</div>
<div class="label">人口总数</div> <div class="label">人口总数</div>
</div> </div>
<transition name="fade"> <!-- <transition name="fade"> -->
<div class="hjrkDialogBox" v-show="isactive != -1"> <div class="hjrkDialogBox" v-show="isactive == 0">
<div class="titleBox"> <div class="titleBox">
<div class="title">{{ dialogTitle }}</div> <div class="title">户籍人口</div>
<div class="close" @click="isactive = -1"></div> <div class="close" @click="isactive = -1"></div>
</div> </div>
<ul class="tabsBox"> <ul class="tabsBox">
<!-- <li <!-- <li
v-for="(item, index) in tabsDate.tabs" v-for="(item, index) in tabsDate.tabs"
:key="index" :key="index"
:class="tabsActive == index ? 'active' : ''" :class="tabsActive == index ? 'active' : ''"
@ -33,25 +33,47 @@
> >
{{ item }} {{ item }}
</li> --> </li> -->
<li <li
v-for="(item, index) in tabsDate.tabs" v-for="(item, index) in tabsDate.tabs"
:key="index" :key="index"
:class="tabsActive == index ? 'active' : ''" :class="tabsActive == index ? 'active' : ''"
@click="tabsActive = 0" @click="tabsActive = 0"
> >
{{ item }} {{ item }}
</li> </li>
</ul> </ul>
<div class="barBox" ref="enterpriseTwoRef"></div> <div class="barBox" ref="enterpriseTwoRef"></div>
</div>
<!-- </transition> -->
<div class="hjrkDialogBox" v-show="isactive == 5">
<div class="titleBox">
<div class="title">高终端人才</div>
<div class="close" @click="isactive = -1"></div>
</div> </div>
</transition> <ul class="statisticOne">
<li v-for="(item, index) in statisticData" :key="index">
<img :src="item.imgURL" :alt="item.title" />
<div class="infoBox">
<div class="title">
<span>{{ item.title }}</span>
</div>
<div class="count">
<span class="numb">{{ item.count }}</span
>（{{ item.unit }}）
</div>
</div>
</li>
</ul>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import tongjiPxrs from "@/assets/images/largeScreen/tongji-pxrs.png";
import tongjiPxkc from "@/assets/images/largeScreen/tongji-pxkc.png";
import tongjiPxjg from "@/assets/images/largeScreen/tongji-pxjg.png";
const isactive = ref(-1); const isactive = ref(-1);
const tabsActive = ref(0); const tabsActive = ref(0);
const dialogTitle = ref("户籍人口"); const dialogTitle = ref("户籍人口");
@ -88,12 +110,47 @@ const modelContentList = ref([
num: "0.54万", num: "0.54万",
label: "新增就业群体" label: "新增就业群体"
}, },
{
num: "2.2万",
label: "高中端人才"
},
{ {
num: "0.76万", num: "0.76万",
label: "领金人员" label: "领金人员"
} }
]); ]);
const statisticData = ref([
{
imgURL: tongjiPxjg,
title: "国家级领军人才",
count: "18",
unit: "人"
},
{
imgURL: tongjiPxjg,
title: "地方级领军型人才",
count: "45",
unit: "人"
},
{
imgURL: tongjiPxjg,
title: "博士",
count: "133",
unit: "人"
},
{
imgURL: tongjiPxjg,
title: "硕士",
count: "1012",
unit: "人"
},
{
imgURL: tongjiPxjg,
title: "本科",
count: "20792",
unit: "人"
}
]);
const tabsDate = reactive({ const tabsDate = reactive({
tabs: [ tabs: [
"学历", "学历",
@ -137,7 +194,7 @@ const option = {
}, },
type: "category", type: "category",
data: ["国家级领军人才", "地方级领军型人才", "博士", "硕士", "本科"] data: ["大专及以上", "高中(含中专)", "初中", "小学"]
}, },
yAxis: { yAxis: {
//网格线 //网格线
@ -161,7 +218,7 @@ const option = {
type: "bar", type: "bar",
showBackground: true, showBackground: true,
barWidth: 20, barWidth: 20,
data: [18, 45, 133, 1012, 20792], data: [71013, 105716, 266225, 210356],
// 设置柱状图的数值 // 设置柱状图的数值
label: { label: {
show: true, show: true,
@ -342,4 +399,56 @@ onMounted(() => {
} }
} }
} }
ul.statisticOne {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding-top: 3vw;
li {
// width: 450px;
height: 190px;
margin: 0 10px;
// 第一排的前2个元素（第一排显示2个）
&:nth-child(-n + 2) {
width: 20vw; // 减去margin值
}
// // 第二排的第3-5个元素（第二排显示3个）
// &:nth-child(n + 3):nth-child(-n + 5) {
// width: calc(33.33% - 20px); // 减去margin值
// }
img {
display: block;
width: 7vw;
height: 7vw;
float: left;
}
.infoBox {
float: left;
padding: 0 0 0 10px;
.title {
height: 40px;
line-height: 40px;
margin-top: 36px;
span {
background: -webkit-linear-gradient(#ffffff, #75e8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.3vw;
font-weight: 400;
}
}
.count {
font-size: 24px;
padding: 18px 0 0 0;
span.numb {
font-size: 2.1vw;
display: inline-block;
padding: 0 5px 0 0;
}
}
}
}
}
</style> </style>

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

@ -1,22 +1,28 @@
<template> <template>
<div class="allBox"> <div class="scale-container">
<!-- 头部 --> <div
<Head title="三级劳务体系⼈员数据"></Head> class="allBox"
<LeftBorder></LeftBorder> :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
<RightBorder></RightBorder> >
<BottomBorder></BottomBorder> <!-- 头部 -->
<!-- 统计 --> <Head title="三级劳务体系⼈员数据"></Head>
<Statistic></Statistic> <LeftBorder></LeftBorder>
<!-- 地图 --> <RightBorder></RightBorder>
<Map></Map> <BottomBorder></BottomBorder>
<!-- 服务企业情况 --> <!-- 统计 -->
<CompanyProfile style="margin-top: 50px"></CompanyProfile> <Statistic></Statistic>
<!-- 解决就业情况 --> <!-- 地图 -->
<SolveEmployment style="margin-top: 40px"></SolveEmployment> <Map></Map>
<!-- 服务企业情况 -->
<CompanyProfile style="margin-top: 50px"></CompanyProfile>
<!-- 解决就业情况 -->
<SolveEmployment style="margin-top: 40px"></SolveEmployment>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Head from "../../components/largeScreen/headHome.vue"; import Head from "../../components/largeScreen/headHome.vue";
import Statistic from "./components/statistic.vue"; import Statistic from "./components/statistic.vue";
import Map from "./components/map.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"; import BottomBorder from "../../components/largeScreen/bottomBorder.vue";
// 定义标题名称 // 定义标题名称
const title = "三级劳务体系⼈员数据"; 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scale-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.allBox { .allBox {
width: 1920px; width: 1920px;
height: 3240px; height: 3240px;
margin: 0 auto; // margin: 0 auto;
background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat; background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
background-size: 100%; background-size: 100%;
position: relative; position: relative;
transition: transform 0.3s ease; // 添加过渡效果
} }
</style> </style>
<style lang="scss"> <style lang="scss">
#app { #app {
overflow: auto !important; overflow: auto !important;
} }
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style> </style>