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

update header & area-one

Browse Source
This commit is contained in:
lb 2023-06-06 16:41:21 +08:00
parent 7057df592a
commit 95809c226d
16 changed files with 3818 additions and 3916 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -1,9 +1,5 @@
<template>
<div id="app">
<!-- <nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav> -->
<router-view />
</div>
</template>

BIN
src/assets/bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
src/assets/header.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 141 KiB

After

Width:  |  Height:  |  Size: 376 KiB

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 52 KiB

11
src/assets/styles/variables.scss
View File

@ -1,14 +1,17 @@
// variables
// $design_width: 4480px;
$design_width: 8960px;
$design_height: 2160px;
// $design_width: 4480px
$design_width: 21120px;
$design_height: 4320px;
$actual_width: 3840px;
$actual_height: 1080px;
// 纵/4 横/5.5
// 字体按照纵向调整
$height: 1080px;
$default_ratio: 0.875;
// colors
$main-color: #6bf2ff;
$main-color: #3565FF;

BIN
src/assets/top-middle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

32
src/components/common/SmallBox2.vue
View File

@ -56,39 +56,37 @@ export default {
@import "../../assets/styles/functions";
.small-box-2 {
padding: adjust(14px);
// border: 1px solid gray;
// box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285);
box-shadow: inset 0 0 30px rgba($color: #fff, $alpha: 0.285);
border-radius: adjust(6px);
padding: adjust(7px);
user-select: none;
// width: adjust(w(465px));
// height: adjust(h(200px));
width: adjust(w(528px));
height: adjust(h(240px));
width: adjust(w(744px));
height: adjust(h(320px));
display: flex;
background: url(../../assets/top-middle.png) no-repeat;
background-size: 100% 100%;
background-position: bottom;
.icon {
width: adjust(h(128px));
height: adjust(h(128px));
width: adjust(h(172px));
height: adjust(h(172px));
}
.info {
flex: 1 auto;
font-family: "微软雅黑", sans-serif;
padding-left: adjust(5px);
h2 {
font-size: adjust(16px);
font-size: adjust(12px);
opacity: 0.7;
// line-height: adjust(12px);
letter-spacing: adjust(1px);
font-weight: 400;
color: hsla(0, 0%, 100%, 0.9);
color: hsla(0, 0%, 0%, 0.9);
}
.value {
color: #fff;
font-size: adjust(30px);
line-height: adjust(29px);
color: #030609;
font-size: adjust(22px);
line-height: adjust(23px);
}
}
}

6
src/components/icons/fireSvg.vue
View File

@ -1,8 +1,8 @@
<template>
<svg
:width="adjust('64px')"
:height="adjust('64px')"
viewBox="0 0 94 96"
:width="adjust('46px')"
:height="adjust('46px')"
viewBox="0 0 96 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"

4
src/components/icons/sandSvg.vue
View File

@ -1,7 +1,7 @@
<template>
<svg
:width="adjust('64px')"
:height="adjust('64px')"
:width="adjust('46px')"
:height="adjust('46px')"
viewBox="0 0 95 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"

4
src/components/icons/switchSvg.vue
View File

@ -1,7 +1,7 @@
<template>
<svg
:width="adjust('64px')"
:height="adjust('64px')"
:width="adjust('46px')"
:height="adjust('46px')"
viewBox="0 0 122 122"
version="1.1"
xmlns="http://www.w3.org/2000/svg"

4
src/components/icons/tempSvg.vue
View File

@ -1,7 +1,7 @@
<template>
<svg
:width="adjust('64px')"
:height="adjust('64px')"
:width="adjust('46px')"
:height="adjust('46px')"
viewBox="0 0 94 96"
version="1.1"
xmlns="http://www.w3.org/2000/svg"

19
src/components/isolate-area-1/Area.vue
View File

@ -56,25 +56,6 @@ export default {
},
computed: {
...mapState(["fireDirection", "lastFireChangeTime", "fireChangeTime"]),
// rdata() {
// let [_, min, sec] = /(\d+)分(\d+)秒/.exec(this.lastFireChangeTime)
// min = +min
// sec = +sec
// let interTime = `${min}分${sec}秒`
// let timer = setInterval(() => {
// if (sec) sec -= 1
// else {
// sec = 59
// min -= 1
// }
// }, 1000);
// return [
// // { icon: "temp", title: "车间温度", value: "27℃" },
// { icon: "fire", title: "当前火向", value: this.fireDirection },
// { icon: "clock", title: "换火时间", value: this.fireChangeTime },
// { icon: "sand", title: "剩余时间", value: interTime },
// ];
// },
},
};
</script>

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

@ -66,33 +66,33 @@ export default {
@import "../../assets/styles/variables";
header {
background: url(../../assets/header.png) center/contain no-repeat;
background-size: 100%;
height: adjust(h(280px));
width: adjust($actual_width);
background: url(../../assets/header.png) no-repeat, #f003;
background-size: 100% 100%;
// background-size: cover;
background-position: bottom;
height: adjust(h(630px));
width: adjust(w(21120px));
display: grid;
place-items: center;
> div {
display: flex;
align-items: center;
margin-bottom: adjust(10px);
margin-bottom: adjust(8px);
margin-left: adjust(64px);
.header--logo {
width: adjust(102px);
height: adjust(56px);
width: adjust(128px);
height: adjust(h(337px));
background: url(../../assets/logo.png) center/contain no-repeat;
}
h1 {
margin-left: adjust(20px);
font-size: adjust(35px);
// line-height: adjust(100px);
// background: #eee;
font-size: adjust(40px);
user-select: none;
letter-spacing: adjust(8px);
letter-spacing: adjust(6px);
font-weight: 600;
// color: #6bf2ff;
color: $main-color;
font-family: "微软雅黑", sans-serif;
}

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

@ -20,7 +20,7 @@
:class="bottomRightArrowRolling === '运行' ? 'ar-running' : ''"
></div>
<div class="swd onekb">
<!-- <div class="swd onekb">
<div class="swd-box">
<p>1#卡脖</p>
<p class="swd-value">{{Number(onekb).toFixed(1)}}℃</p>
@ -43,9 +43,9 @@
<p>2#搅拌</p>
<p class="swd-value">{{Number(twosp).toFixed(1)}}℃</p>
</div>
</div>
</div> -->
<div class="video-bottom" v-show="fireDirection === '北火'" style="">
<!-- <div class="video-bottom" v-show="fireDirection === '北火'" style="">
<video
id="1"
preload="auto"
@ -70,12 +70,12 @@
disablepictureinpicture
src="../../assets/videos/fire-to-bottom.mp4"
></video>
</div>
</div> -->
</div>
<AreaOne class="area-one" />
<div class="absolute left kiln-runtime">
<!-- <div class="absolute left kiln-runtime">
<KilnRuntime />
</div>
<div class="absolute left kiln-pressure">
@ -104,7 +104,7 @@
</div>
<div class="absolute out-water">
<OutWater />
</div>
</div> -->
</main>
</template>
@ -179,7 +179,7 @@ main {
.area-one {
position: absolute;
top: adjust(160px);
top: adjust(170px);
left: adjust(1588px);
}
@ -221,28 +221,6 @@ main {
background: #1bff3a;
}
// .ar-top-left.arrow,
// .ar-top-right.arrow {
// animation: none;
// background: url(../../assets/arrow-disabled.png) 100% 100% / contain no-repeat;
// }
// .ar-bottom-left.arrow,
// .ar-bottom-right.arrow {
// animation: none;
// background: url(../../assets/arrow-r-disabled.png) 100% 100% / contain
// no-repeat;
// }
// .ar-top-left.arrow.ar-running,
// .ar-top-right.arrow.ar-running {
// background: url(../../assets/arrow.png) 100% 100% / contain no-repeat;
// animation: clock-direction 1.15s linear infinite forwards;
// }
// .ar-bottom-left.arrow.ar-running,
// .ar-bottom-right.arrow.ar-running {
// background: url(../../assets/arrow-r.png) 100% 100% / contain no-repeat;
// animation: reverse-clock-direction 1.15s linear infinite forwards;
// }
.ar-top-right {
top: 145px;
left: 65px;
@ -260,23 +238,6 @@ main {
left: 20px;
}
// @keyframes clock-direction {
// 0% {
// transform: rotate(0deg);
// }
// 100% {
// transform: rotate(360deg);
// }
// }
// @keyframes reverse-clock-direction {
// 0% {
// transform: rotate(0deg);
// }
// 100% {
// transform: rotate(-360deg);
// }
// }
.swd {
background-size: 100%;
width: adjust(w(276px));
@ -327,7 +288,7 @@ main {
.eq-main {
width: adjust(w(7150px));
height: adjust(h(960px));
background: url(../../assets/eq.png) no-repeat;
// background: url(../../assets/eq.png) no-repeat;
background-size: 100%;
top: adjust(170px);
left: adjust(380px);
@ -343,7 +304,7 @@ main {
top: adjust(105px);
width: adjust(150px);
height: adjust(150px);
background: url(../../assets/mirror.png) no-repeat;
// background: url(../../assets/mirror.png) no-repeat;
background-size: 100% 100%;
animation: 10s linear 0.3s infinite mirror-to-left-2;
}
@ -357,7 +318,7 @@ main {
// top: adjust(125px);
width: adjust(150px);
height: adjust(150px);
background: url(../../assets/mirror.png) no-repeat;
// background: url(../../assets/mirror.png) no-repeat;
background-size: 100% 100%;
animation: 10s linear 5s infinite mirror-to-left;
}

2
src/views/HomeView.vue
View File

@ -26,8 +26,6 @@ export default {
@import '../assets/styles/functions';
.home-view {
// width: 100vw;
// height: 100vh;
height: adjust($actual_height);
width: adjust($actual_width);
overflow: hidden;

7565
yarn.lock
View File

File diff suppressed because it is too large Load Diff