optimize plc monitor page layout

This commit is contained in:
龚祖望 2022-11-16 16:07:26 +08:00
parent 3eb4eb978b
commit 4893861565
4 changed files with 17 additions and 6 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 187 KiB

View File

@ -25,7 +25,7 @@ export default {
height:calc(100vh - 50px); height:calc(100vh - 50px);
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; /* overflow: hidden; */
} }
.fixed-header + .app-main { .fixed-header + .app-main {
padding-top: 50px; padding-top: 50px;

View File

@ -77,7 +77,7 @@ export default {
} }
.corp { .corp {
font-size: 14px; font-size: 20px;
font-weight: bold; font-weight: bold;
margin-right: 20px; margin-right: 20px;
font-family: cursive; font-family: cursive;

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="app-container"> <div class="app-container" :style="{'padding-top':paddingTop + 'px'}">
<div class="part1"> <div class="part1">
<div class="top"> <div class="top">
<div class="left"> <div class="left">
@ -507,13 +507,24 @@ export default {
valueName: 'DB_模台当前位置', valueName: 'DB_模台当前位置',
value: -7 value: -7
} }
] ],
paddingTop: 120
} }
}, },
mounted() { mounted() {
this.openSocket() this.openSocket()
this.resize()
window.onresize = () => {
console.log('clientHeight', document.body.clientHeight)
this.resize()
}
}, },
methods: { methods: {
resize() {
const heightMinus = Math.abs(document.body.clientHeight - 920)
console.log('heightMinus', heightMinus)
this.paddingTop = 120 + (heightMinus - 20) / 2
},
openSocket() { openSocket() {
const socketUrl = 'ws://115.238.53.59:18080/websocket/jxsd' const socketUrl = 'ws://115.238.53.59:18080/websocket/jxsd'
const socket = new WebSocket(socketUrl) const socket = new WebSocket(socketUrl)
@ -574,9 +585,9 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
color: #fff; color: #fff;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
padding: 120px 0 30px 30px; padding: 0 0 30px 30px;
display: flex; display: flex;
height: 100%; min-height: calc(100vh - 50px);
.title { .title {
font-size: 20px; font-size: 20px;
font-family: TRENDS; font-family: TRENDS;