mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb 2023-10-27 16:17:35 +08:00
parent 6e17cc51d1
commit 1214eb5c7d
7 changed files with 133 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/eq.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 MiB

After

Width:  |  Height:  |  Size: 5.0 MiB

BIN
src/assets/header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 966 KiB

After

Width:  |  Height:  |  Size: 175 KiB

4
src/components/groups/monitor2.vue
View File

@ -24,14 +24,14 @@ export default {
@import "../../assets/styles/functions"; @import "../../assets/styles/functions";
section { section {
background: rgba(47, 203, 255, 0.225); background: rgba(47, 203, 255, 0.75);
width: 100%; width: 100%;
// height: 1178px; // height: 1178px;
height: 1469px; height: 1469px;
position: absolute; position: absolute;
// bottom: 690px; // bottom: 690px;
// top: 2160px; // top: 2160px;
top: 1570px; // top: 1570px;
left: 0; left: 0;
} }

34
src/components/layout/Header.vue
View File

@ -69,29 +69,29 @@ export default {
header { header {
width: 100%; width: 100%;
height: 628px; height: 380px;
background: url(../../assets/header.png) no-repeat; background: url(../../assets/header.png) no-repeat;
display: grid; display: grid;
place-items: center; place-items: center;
>div { >div {
margin-left: 378px; margin-left: 24px;
margin-bottom: 72px; margin-bottom: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
.header--logo { .header--logo {
width: 648px; width: 648px;
height: 337px; height: 280px;
margin-right: 96px; margin-right: 100px;
background: url(../../assets/logo.png) center/contain no-repeat; background: url(../../assets/logo.png) center/contain no-repeat;
} }
h1 { h1 {
font-size: 220px; font-size: 128px;
line-height: 330px; line-height: 330px;
margin: 0; margin: 0;
letter-spacing: 36px; letter-spacing: 24px;
user-select: none; user-select: none;
font-weight: 600; font-weight: 600;
color: $main-color; color: $main-color;
@ -101,25 +101,27 @@ header {
} }
.header--wing { .header--wing {
top: 138px; bottom: -88px;
left: 0; left: 0;
line-height: 130px; line-height: 1;
font-size: 130px; font-size: 72px;
// font-weight: bold;
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; 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;
} }
.company { .company {
left: 240px; left: 300px;
text-align: center; text-align: center;
color: lighten($main-color, 8); // color: lighten($main-color, 8);
color: #5a6d88;
} }
.datetime { .datetime {
left: unset; left: unset;
right: 240px; right: 300px;
color: $main-color; color: #5a6d88;
text-align: center; text-align: center;
color: lighten($main-color, 8); font-size: 72px;
font-size: 140px; line-height: 1;
} }
</style> </style>

75
src/components/layout/Main.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<main class="relative"> <main class="relative">
<!-- 缺陷分析 --> <!-- 缺陷分析 -->
<FaultAnalysis /> <!-- <FaultAnalysis /> -->
<!-- 环境浓度 --> <!-- 环境浓度 -->
<Environ /> <!-- <Environ /> -->
<!-- 监控组 2 --> <!-- 监控组 2 -->
<MonitorGroup2 /> <!-- <MonitorGroup2 /> -->
<!-- 数据组 --> <!-- 数据组 -->
<DataGroup /> <!-- <DataGroup /> -->
<div class="video-crash" v-if="false"></div> <!-- <div class="video-crash" v-if="false"></div> -->
<div class="eq-main absolute"> <div class="eq-main absolute">
<div <div
@ -94,10 +94,10 @@
</div> </div>
</div> </div>
<AreaOne class="area-one" /> <!-- <AreaOne class="area-one" />
<Runtime class="runtime" /> <Runtime class="runtime" />
<InWater /> <InWater />
<OutWater /> <OutWater /> -->
</main> </main>
</template> </template>
@ -106,8 +106,8 @@ import InWater from "../boxes/InWater.vue";
import OutWater from "../boxes/OutWater.vue"; import OutWater from "../boxes/OutWater.vue";
import AreaOne from "../isolate-area-1/Area.vue"; import AreaOne from "../isolate-area-1/Area.vue";
import Runtime from "../isolate-area-1/Runtime.vue"; import Runtime from "../isolate-area-1/Runtime.vue";
import MonitorGroup2 from "../groups/monitor2.vue"; // import MonitorGroup2 from "../groups/monitor2.vue";
import DataGroup from "../groups/data.vue"; // import DataGroup from "../groups/data.vue";
import FaultAnalysis from "../groups/fault.vue"; import FaultAnalysis from "../groups/fault.vue";
import Environ from "../groups/environ.vue"; import Environ from "../groups/environ.vue";
import { mapMutations, mapState } from "vuex"; import { mapMutations, mapState } from "vuex";
@ -118,8 +118,8 @@ export default {
name: "Main", name: "Main",
components: { components: {
Runtime, Runtime,
DataGroup, // DataGroup,
MonitorGroup2, // MonitorGroup2,
Environ, Environ,
FaultAnalysis, FaultAnalysis,
AreaOne, AreaOne,
@ -202,8 +202,8 @@ main {
.arrow { .arrow {
display: inline-block; display: inline-block;
width: 64px; width: 32px;
height: 64px; height: 32px;
border-radius: 100%; border-radius: 100%;
position: absolute; position: absolute;
background: #ff5757; background: #ff5757;
@ -235,22 +235,22 @@ main {
.swd { .swd {
// background-size: 100% 10px; // background-size: 100% 10px;
width: 350px; width: 240px;
height: 202px; height: 90px;
position: absolute; position: absolute;
transform: rotateY(180deg); // transform: rotateY(180deg);
p { p {
margin: 0; margin: 0;
color: #000; color: #000;
margin-top: 16px; margin-top: 8px;
} }
.swd-box { .swd-box {
margin-left: 54px; margin-left: 32px;
margin-top: 44px; margin-top: 10px;
font-size: 30px; font-size: 20px;
letter-spacing: 2px; // letter-spacing: 2px;
color: #000; color: #000;
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC,
Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
@ -258,8 +258,9 @@ main {
.swd-value { .swd-value {
color: #ff2020; color: #ff2020;
margin-top: 12px; margin-top: 0;
font-size: 64px; margin-bottom: 12px;
font-size: 48px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -270,43 +271,41 @@ main {
.onekb, .onekb,
.onesp { .onesp {
background: url(../../assets/tem-bottom.png) top 0 left 0 / 100% no-repeat; background: url(../../assets/tem-bottom.png) 0 0 / 100% no-repeat;
} }
.onekb { .onekb {
top: 760px; top: 520px;
left: 1560px; right: 1000px;
} }
.onesp { .onesp {
top: 860px; top: 590px;
left: 1100px; right: 690px;
} }
.twokb, .twokb,
.twosp { .twosp {
background: url(../../assets/tem-top.png) top 0 left 0 / 100% no-repeat; background: url(../../assets/tem-top.png) right 0 bottom 0 / 100% no-repeat;
} }
.twokb { .twokb {
top: 72px; top: 108px;
left: 1580px; right: 1020px;
} }
.twosp { .twosp {
top: -32px; top: 32px;
left: 1080px; right: 700px;
} }
.eq-main { .eq-main {
width: 9162px; width: 100%;
height: 1178px; height: 800px;
background: url(../../assets/eq.png) no-repeat; background: url(../../assets/eq.png) no-repeat, #0003;
background-size: 100%; background-size: 100%;
top: 256px; top: 256px;
left: 2172px;
position: relative; position: relative;
transform: rotateY(0.5turn);
} }
.eq-main::before { .eq-main::before {

53
src/views/HomeView.vue
View File

@ -8,26 +8,39 @@
<div class="bg-layer"></div> <div class="bg-layer"></div>
<LeftSide /> <LeftSide />
<section class="center"> <section class="center">
<BigHeader /> <div class="center-top">
<Main /> <div class="screen-container top-left"></div>
<MainContent />
<div class="screen-container top-right"></div>
</div>
<div class="center-bottom">
<!-- 监控组 2 -->
<MonitorGroup2 />
<!-- 数据组 -->
<DataGroup />
</div>
</section> </section>
<RightSide /> <RightSide />
</div> </div>
</template> </template>
<script> <script>
import BigHeader from "../components/layout/Header.vue"; // import BigHeader from "../components/layout/Header.vue";
import Main from "../components/layout/Main.vue"; // import Main from "../components/layout/Main.vue";
import LeftSide from "./LeftSide.vue"; import LeftSide from "./LeftSide.vue";
import RightSide from "./RightSide.vue"; import RightSide from "./RightSide.vue";
import MainContent from './MainContent.vue';
import MonitorGroup2 from "@/components/groups/monitor2.vue";
import DataGroup from "@/components/groups/data.vue";
export default { export default {
name: "HomeView", name: "HomeView",
components: { BigHeader, Main, LeftSide, RightSide }, components: { LeftSide, RightSide, MainContent, MonitorGroup2, DataGroup },
props: {}, props: {},
data() { data() {
return { return {
value: 100, value: 10,
}; };
}, },
computed: { computed: {
@ -103,6 +116,20 @@ export default {
height: 4320px; height: 4320px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// position: relative;
}
.center-top {
height: 2168px;
background: #0b58ff33;
display: flex;
}
.center-bottom {
flex: 1;
height: 1px;
background: #ccc1;
position: relative;
} }
.slider { .slider {
@ -134,4 +161,18 @@ export default {
opacity: 1; opacity: 1;
bottom: 64px; bottom: 64px;
} }
.screen-container {
background: #09df2233;
display: inline-block;
width: 3854px;
height: 2168px;
}
// .main-container__content {
// flex: 1;
// background: #38012311;
// }
.top-left {}
</style> </style>

29
src/views/MainContent.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div class="main-content">
<AHeader />
<Main />
</div>
</template>
<script>
import AHeader from "../components/layout/Header.vue";
import Main from "../components/layout/Main.vue";
export default {
name: 'MainContent',
components: { AHeader, Main},
data() {
return {
}
}
}
</script>
<style scoped>
.main-content {
width: 1px;
flex: 1;
background: #f001;
}
</style>