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/lineChart.vue | 14 +++++--
src/views/screen/components/subheading.vue | 9 ++++
src/views/screen/components/map3.vue | 18 ++++++---
src/views/screen/index.vue | 34 ++++++++--------
4 files changed, 47 insertions(+), 28 deletions(-)
diff --git a/src/views/screen/components/lineChart.vue b/src/views/screen/components/lineChart.vue
index f748faa..c112c09 100644
--- a/src/views/screen/components/lineChart.vue
+++ b/src/views/screen/components/lineChart.vue
@@ -23,6 +23,12 @@
},
methods: {
+ setFontSize(res){
+ const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
+ if (!clientWidth) return;
+ let fontSize = clientWidth / 1920;
+ return res*fontSize;
+ },
initDrawLine() {
const that = this
let option = {
@@ -38,7 +44,7 @@
return str
},
textStyle: {
- fontSize: 16
+ fontSize: this.setFontSize(16)
}
},
@@ -49,7 +55,7 @@
data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'],
textStyle: {
color: '#A0AEC0',
- fontSize: 14
+ fontSize: this.setFontSize(14)
}
},
@@ -68,7 +74,7 @@
},
axisLabel: {
color: '#A0AEC0',
- fontSize: 14,
+ fontSize: this.setFontSize(14),
margin: 20,
rotate: 30
},
@@ -89,7 +95,7 @@
},
axisLabel: {
color: '#A0AEC0',
- fontSize: 14,
+ fontSize: this.setFontSize(14),
margin: 5
}
},
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>
diff --git a/src/views/screen/components/subheading.vue b/src/views/screen/components/subheading.vue
index 9935174..aeae700 100644
--- a/src/views/screen/components/subheading.vue
+++ b/src/views/screen/components/subheading.vue
@@ -27,6 +27,13 @@
},
methods: {
+ setFontSize(res){
+ const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
+ if (!clientWidth) return;
+ let fontSize = clientWidth / 1920;
+ return res*fontSize;
+ },
+
initChart (val1, val2, color) {
const annularDom = this.$refs.echarts
const myAnnular = this.$echarts.init(annularDom)
@@ -64,7 +71,7 @@
show: true, // 鍗曠嫭鏄剧ず璇ユ暟鎹」
formatter: val1 + '',
color: color,
- fontSize: 14
+ fontSize: this.setFontSize(14)
}
},
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index b868aab..e612b3d 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="container" style="font-size: 14px" ref="contaner">
+ <div class="container" style="font-size: 0.75vw" ref="contaner">
<header>
<i @click="returnPath" class="el-icon-s-home" style="color: #00b4ff;position: absolute;font-size: 24px;left: 98%;top: 15%"></i>
<img src="@/assets/images/header-bg.png"/>
@@ -71,10 +71,10 @@
/>
<ul>
<li v-for="(item, index) in facilityData.video" :key="index">
- <div style="font-size: 14px" class="value">
+ <div style="font-size: 0.75vw" class="value">
<animate-number from="0" :to="item.value" :key="item.value"></animate-number>
</div>
- <div style="font-size: 14px" class="title">{{ item.title }}</div>
+ <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
</li>
</ul>
</div>
@@ -86,8 +86,8 @@
<ul>
<li v-for="(item, index) in facilityData.car" :key="index">
<!-- <div class="value">{{ item.value ? item.value : "-" }}</div>-->
- <div style="font-size: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
- <div style="font-size: 14px" class="title">{{ item.title }}</div>
+ <div style="font-size: 0.75vw" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
+ <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
</li>
</ul>
</div>
@@ -102,8 +102,8 @@
:key="index"
>
<!-- <div class="value">{{ item.value ? item.value : "-" }}</div>-->
- <div style="font-size: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
- <div style="font-size: 14px" class="title">{{ item.title }}</div>
+ <div style="font-size: 0.75vw" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
+ <div style="font-size: 0.75vw" class="title">{{ item.title }}</div>
</li>
</ul>
</div>
@@ -1082,7 +1082,7 @@
li {
width: 25%;
text-align: center;
- font-size: 14px;
+ font-size: 0.75vw;
color: #00e6f4;
flex-shrink: 0;
flex-grow: 0;
@@ -1325,7 +1325,7 @@
background-image: url("../../assets/images/item-car-bg.png");
background-size: 100% 100%;
color: #dcf8ff;
- font-size: 12px;
+ //font-size: 12px;
line-height: 26px;
padding: 0 15px;
font-size: 0.625vw;
@@ -1442,21 +1442,21 @@
}
.rotating-image {
- width: 950px;
- height: 950px;
+ width: 50vw;
+ height: 50vw;
position: absolute;
- top: calc(50% - 450px);
- left: calc(50% - 450px);
+ top: calc(50% - 24vw);
+ left: calc(50% - 24vw);
transform: skewX(-5deg) skewY(-10deg);
animation: rotateImage 36s linear infinite;
}
.rotating-image-in {
- width: 900px;
- height: 900px;
+ width: 47.5vw;
+ height: 47.5vw;
position: absolute;
- top: calc(50% - 425px);
- left: calc(50% - 425px);
+ top: calc(50% - 22.5vw);
+ left: calc(50% - 22.5vw);
animation: rotateCounterClockwise 48s linear infinite;
}
--
Gitblit v1.8.0