From 21933d0857b7539cfaff52a88a3340772160c4e7 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 06 十二月 2024 11:52:06 +0800
Subject: [PATCH] 大屏自适应
---
src/views/screen/components/map3.vue | 18 ++++++++++++------
1 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/src/views/screen/components/map3.vue b/src/views/screen/components/map3.vue
index 5bbb92d..80bb35c 100644
--- a/src/views/screen/components/map3.vue
+++ b/src/views/screen/components/map3.vue
@@ -122,6 +122,12 @@
})
},
methods: {
+ setFontSize(res){
+ const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
+ if (!clientWidth) return;
+ let fontSize = clientWidth / 1920;
+ return res*fontSize;
+ },
initializeMap() {
this.updateMapData()
this.getChinData('鑷础甯�', chinaJson)
@@ -177,7 +183,7 @@
left: '-5%',
top: '20%',
width: '100%', // 鏄庣‘鎸囧畾瀹藉害
- height: '720px', // 鏄庣‘鎸囧畾楂樺害
+ height: '100%', // 鏄庣‘鎸囧畾楂樺害
// boxWidth: 100,
regionHeight: 0.8,
zlevel: 10,
@@ -275,7 +281,7 @@
left: '-5%',
top: '20%',
width: '100%', // 鏄庣‘鎸囧畾瀹藉害
- height: '720px', // 鏄庣‘鎸囧畾楂樺害
+ height: '100%', // 鏄庣‘鎸囧畾楂樺害
zlevel: 5,
// tooltip: {
@@ -428,7 +434,7 @@
position: 'top',
textStyle: {
color: '#c6f4ff',
- fontSize: '16px',
+ fontSize: this.setFontSize(16),
backgroundColor: 'rgba(25,56,97,1)',
borderColor: '#a4ddee',
borderWidth: 0.5,
@@ -442,8 +448,8 @@
},
rich: {
style: {
- fontSize: 16,
- lineHeight: 22
+ fontSize: this.setFontSize(14),
+ lineHeight: this.setFontSize(20),
// 鍏朵粬闇�瑕佺殑鏍峰紡
}
},
@@ -484,6 +490,6 @@
.map-main-container {
width: 100%;
- height: 100%;
+ height: 37vw; // 鍥哄畾楂樺害
}
</style>
--
Gitblit v1.8.0