From d33eacc1f85ac3a736b33ba4713a19aae466d711 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 05 八月 2022 16:42:53 +0800
Subject: [PATCH] 1.做适应平板显示的内容大小
---
src/views/xtsy/index.vue | 41 ++++++++++++++++++++++++++++-------------
1 files changed, 28 insertions(+), 13 deletions(-)
diff --git a/src/views/xtsy/index.vue b/src/views/xtsy/index.vue
index 506d056..684729f 100644
--- a/src/views/xtsy/index.vue
+++ b/src/views/xtsy/index.vue
@@ -81,19 +81,23 @@
<div class="center">
<div class="title" style="margin-top: 20px"><i class="el-icon-s-fold" style="margin-right: 5px" />鐢ㄦ埛姒傚喌</div>
<div class="center_content">
- <div class="content">
+ <div class="content" :style="{height: isIpad?'300px':'400px'}">
<div class="content_title">娲昏穬鏃舵</div>
<div>
- <div style="width: 100%;height: 300px;margin: 20px 0 0 10px">
- <div id="line01" style="width: 100%;height:100%" />
- </div>
+ <div
+ id="line01"
+ style="width: 100%;"
+ :style="{height:isIpad?'200px':'300px'}"
+ />
</div>
</div>
- <div class="content">
+ <div class="content" :style="{height: isIpad?'300px':'400px'}">
<div class="content_title">Top鐢ㄦ埛</div>
- <div style="width: 100%;height: 300px;margin: 20px 0 0 10px">
- <div id="bar01" style="width: 100%;height:100%" />
- </div>
+ <div
+ id="bar01"
+ style="width: 100%;"
+ :style="{height:isIpad?'200px':'300px'}"
+ />
</div>
</div>
</div>
@@ -108,23 +112,24 @@
name: 'Index',
data() {
return {
+ isIpad: false,
mainHeight: 0,
tableHeight: 0,
barTopColor01: ['42,197,137', '187,236,218'],
barTopColor02: ['248,216,76', '255,250,238'],
barTopColor03: ['42,197,137', '187,236,218'],
barTopColor04: ['232,103,103', '253,240,240']
-
}
},
created() {
- console.log(document.documentElement.clientHeight, 1)
- console.log(document.documentElement.clientWidth, 2)
+
},
mounted() {
window.addEventListener('resize', this.getHeight)
this.getHeight()
- this.handleEcharts()
+ setTimeout(() => {
+ this.handleEcharts()
+ }, 10)
},
methods: {
// 鑾峰彇椤甸潰楂樺害
@@ -133,6 +138,9 @@
this.mainHeight = window.innerHeight - 120
// this.mainHeight = window.innerHeight - 200
// this.tableHeight = this.mainHeight - 100
+
+ // this.isIpad = this.mainHeight <= 768
+ this.isIpad = window.innerHeight < 769
})
},
handleEcharts() {
@@ -168,6 +176,12 @@
loadEcharts('bar01', bar01(data))
},
async getLine01() {
+ // if (this.isIpad) {
+ // document.getElementById('line01').style.height = '200px'
+ // } else {
+ // document.getElementById('line01').style.height = '300px'
+ // }
+ // console.log(document.getElementById('line01'))
const data2 = [
{ key: '2', value: 0 },
{ key: '4', value: 0.2 },
@@ -258,7 +272,8 @@
.content {
width: 49%;
- height: 400px;
+ //height: 400px;
+
background-color: #fff;
border-radius: 5px;
--
Gitblit v1.9.3