From f729af36c657b925df8c9909175c469d40dbfe0b Mon Sep 17 00:00:00 2001 From: lb Date: Wed, 12 Jul 2023 14:18:23 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 4 +- src/components/groups/monitor2.vue | 2 +- src/components/layout/Main.vue | 231 ++++++++++++++--------------- src/main.js | 6 + src/views/HomeView.vue | 2 +- src/views/LeftSide.vue | 2 +- src/views/RightSide.vue | 2 +- 7 files changed, 122 insertions(+), 127 deletions(-) diff --git a/src/App.vue b/src/App.vue index 6c86689..7648822 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,6 +6,4 @@ - + diff --git a/src/components/groups/monitor2.vue b/src/components/groups/monitor2.vue index f97da64..3aa8819 100644 --- a/src/components/groups/monitor2.vue +++ b/src/components/groups/monitor2.vue @@ -24,7 +24,7 @@ export default { @import "../../assets/styles/functions"; section { - background: rgba(47, 203, 255, 0.225); + // background: rgba(47, 203, 255, 0.225); width: 100%; // height: 1178px; height: 1469px; diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue index e29854e..78c3b90 100644 --- a/src/components/layout/Main.vue +++ b/src/components/layout/Main.vue @@ -14,11 +14,23 @@
- + - @@ -69,10 +106,10 @@ import InWater from "../boxes/InWater.vue"; import OutWater from "../boxes/OutWater.vue"; import AreaOne from "../isolate-area-1/Area.vue"; import Runtime from "../isolate-area-1/Runtime.vue"; -import MonitorGroup2 from '../groups/monitor2.vue' -import DataGroup from '../groups/data.vue' -import FaultAnalysis from '../groups/fault.vue' -import Environ from '../groups/environ.vue' +import MonitorGroup2 from "../groups/monitor2.vue"; +import DataGroup from "../groups/data.vue"; +import FaultAnalysis from "../groups/fault.vue"; +import Environ from "../groups/environ.vue"; import { mapMutations, mapState } from "vuex"; import WsClient from "../../utils/wsClass"; @@ -103,7 +140,7 @@ export default { "onekb", "twokb", "onesp", - "twosp" + "twosp", ]), mounted() { const wsc = new WsClient(this); @@ -139,8 +176,8 @@ main { } .video-crash { - height: adjust(h(424px)); - width: adjust(w(800px)); + height: 640px; + background: #fcc2; // background: url(../../assets/tv.png) no-repeat; background-size: 100%; display: inline-block; @@ -151,25 +188,25 @@ main { .video-bottom { position: absolute; - bottom: adjust(207px); - left: adjust(29px); - transform: scale(0.95); + bottom: 400px; + left: 268px; + transform: scale(1.25, 1.15); } .video-top { position: absolute; - top: adjust(35px); - left: adjust(38px); - transform: scale(0.95, 0.9); + top: 250px; + left: 320px; + transform: scale(1.25); } .arrow { - width: adjust(12px); - height: adjust(12px); display: inline-block; + width: 64px; + height: 64px; + border-radius: 100%; position: absolute; background: #ff5757; - border-radius: adjust(10px); } .arrow.ar-running { @@ -177,53 +214,56 @@ main { } .ar-top-right { - top: 66px; - left: 38px; + top: 190px; + left: 110px; } .ar-top-left { - top: 88px; - left: 515px; + top: 200px; + left: 1480px; } .ar-bottom-left { - top: 232px; - left: 500px; + top: 700px; + left: 1430px; } .ar-bottom-right { - top: 258px; - left: 14px; + top: 720px; + left: 40px; } .swd { // background-size: 100% 10px; - width: adjust(w(376px)); - height: adjust(h(218px)); + width: 350px; + height: 202px; position: absolute; transform: rotateY(180deg); p { margin: 0; - color: #0008; - margin-top: adjust(8px); + color: #000; + margin-top: 16px; } .swd-box { - margin-left: adjust(8px); - font-size: adjust(8px); - font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, "微软雅黑", Arial, Helvetica, sans-serif; + margin-left: 54px; + margin-top: 44px; + font-size: 30px; + letter-spacing: 2px; + color: #000; + font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, + Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, + "微软雅黑", Arial, Helvetica, sans-serif; .swd-value { color: #ff2020; - margin-top: adjust(3px); - font-size: adjust(14px); + margin-top: 12px; + font-size: 64px; overflow: hidden; - /*超出部分隐藏*/ white-space: nowrap; - /*禁止换行*/ text-overflow: ellipsis; - /*省略号*/ + font-weight: 700; } } } @@ -234,13 +274,13 @@ main { } .onekb { - top: adjust(158px); - left: adjust(180px) + top: 760px; + left: 1560px; } .onesp { - top: adjust(135px); - left: adjust(275px) + top: 860px; + left: 1100px; } .twokb, @@ -249,22 +289,22 @@ main { } .twokb { - top: adjust(-10px); - left: adjust(188px) + top: 72px; + left: 1580px; } .twosp { - top: adjust(6px); - left: adjust(275px) + top: -32px; + left: 1080px; } .eq-main { - width: adjust(w(8800px)); - height: adjust(h(1400px)); + width: 9162px; + height: 1178px; background: url(../../assets/eq.png) no-repeat; background-size: 100%; - top: adjust(h(220px)); - left: adjust(w(6600px)); + top: 256px; + left: 2172px; position: relative; transform: rotateY(0.5turn); } @@ -273,9 +313,9 @@ main { content: ""; position: absolute; opacity: 0; - top: adjust(55px); - width: adjust(75px); - height: adjust(75px); + top: 56px; + width: 72px; + height: 72px; background: url(../../assets/mirror.png) no-repeat; background-size: 100% 100%; // animation: 10s linear 0.3s infinite mirror-to-left-2; @@ -285,9 +325,9 @@ main { content: ""; position: absolute; opacity: 0; - top: adjust(55px); - width: adjust(75px); - height: adjust(75px); + top: 56px; + width: 72px; + height: 72px; background: url(../../assets/mirror.png) no-repeat; background-size: 100% 100%; // animation: 10s linear 5s infinite mirror-to-left; @@ -295,7 +335,7 @@ main { @keyframes mirror-to-left { 0% { - right: adjust(700px); + right: 700px; opacity: 1; } @@ -304,13 +344,13 @@ main { } 100% { - right: adjust(30px); + right: 32px; } } @keyframes mirror-to-left-2 { 0% { - right: adjust(700px); + right: 700px; opacity: 1; } @@ -319,56 +359,7 @@ main { } 100% { - right: adjust(30px); + right: 32px; } } - -.kiln-runtime { - top: adjust(h(200px)); - // left: adjust(w(60px)); - left: adjust(w(8110px)); -} - -.kiln-pressure { - top: adjust(h(610px)); - // left: adjust(w(60px)); - left: adjust(w(8110px)); -} - -.fan-runtime { - top: adjust(h(1020px)); - // left: adjust(w(60px)); - left: adjust(w(8110px)); -} - -.oil-flow { - top: adjust(h(1588px)); - // left: adjust(w(60px)); - // left: adjust(w(460px)); - left: adjust(w(880px)); -} - -.gas-flow { - top: adjust(h(1588px)); - // left: adjust(w(1660px)); - left: adjust(w(2500px)); -} - -.top-temp { - top: adjust(h(1588px)); - // left: adjust(w(3260px)); - left: adjust(w(4110px)); -} - -.bottom-temp { - top: adjust(h(1588px)); - // left: adjust(w(4860px)); - left: adjust(w(5720px)); -} - -.ou-temp { - top: adjust(h(1588px)); - left: adjust(w(7330px)); - // left: adjust(w(6460px)); -} diff --git a/src/main.js b/src/main.js index a01e6e7..a1a4810 100644 --- a/src/main.js +++ b/src/main.js @@ -11,6 +11,12 @@ Vue.config.productionTip = false Vue.directive('title', title) +document.body.addEventListener('keydown', e => { + if (e.shiftKey && e.key === 'L') { + console.log('e', e.key) + } +}) + new Vue({ router, store, diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 8e04eef..a0838c3 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -49,7 +49,7 @@ export default { // height: 300px; // width: 600px; overflow: hidden; - // background: url(../assets/bg.png) center/cover no-repeat, #e0e3f6; + background: url(../assets/bg.png) center/cover no-repeat, #e0e3f6; color: white; display: flex; } diff --git a/src/views/LeftSide.vue b/src/views/LeftSide.vue index cbfdbb8..c0fdf73 100644 --- a/src/views/LeftSide.vue +++ b/src/views/LeftSide.vue @@ -19,7 +19,7 @@ export default { // import .left-side { - background: rgba(243, 54, 145, 0.166); + // background: rgba(243, 54, 145, 0.166); height: 4320px; width: 3840px; } diff --git a/src/views/RightSide.vue b/src/views/RightSide.vue index c2a39fe..8209998 100644 --- a/src/views/RightSide.vue +++ b/src/views/RightSide.vue @@ -19,7 +19,7 @@ export default { // import .right-side { - background: rgba(30, 133, 244, 0.292); + // background: rgba(30, 133, 244, 0.292); height: 4320px; width: 3840px; }