update header & area-one

src/App.vue

@@ -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>

src/assets/styles/variables.scss

@@ -1,14 +1,17 @@
 // variables 
 
-// $design_width: 4480px;
+// $design_width: 4480px
-$design_width: 8960px;
+$design_width: 21120px;
-$design_height: 2160px;
+$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;

src/components/common/SmallBox2.vue

@@ -56,39 +56,37 @@ export default {
 @import "../../assets/styles/functions";
 
 .small-box-2 {
-	padding: adjust(14px);
+	padding: adjust(7px);
-	// 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);
 	user-select: none;
-	// width: adjust(w(465px));
+	width: adjust(w(744px));
-	// height: adjust(h(200px));
+	height: adjust(h(320px));
-	width: adjust(w(528px));
-	height: adjust(h(240px));
 	display: flex;
+	background: url(../../assets/top-middle.png) no-repeat;
+	background-size: 100% 100%;
+	background-position: bottom;
 
 	.icon {
-		width: adjust(h(128px));
+		width: adjust(h(172px));
-		height: adjust(h(128px));
+		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;
+			color: #030609;
-			font-size: adjust(30px);
+			font-size: adjust(22px);
-			line-height: adjust(29px);
+			line-height: adjust(23px);
 		}
 	}
 }

src/components/icons/fireSvg.vue

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

src/components/icons/sandSvg.vue

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

src/components/icons/switchSvg.vue

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

src/components/icons/tempSvg.vue

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

src/components/isolate-area-1/Area.vue

@@ -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>

src/components/layout/Header.vue

@@ -66,33 +66,33 @@ export default {
 @import "../../assets/styles/variables";
 
 header {
-  background: url(../../assets/header.png) center/contain no-repeat;
+  background: url(../../assets/header.png) no-repeat, #f003;
-  background-size: 100%;
+  background-size: 100% 100%;
-  height: adjust(h(280px));
+  // background-size: cover;
-  width: adjust($actual_width);
+  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);
+      width: adjust(128px);
-      height: adjust(56px);
+      height: adjust(h(337px));
       background: url(../../assets/logo.png) center/contain no-repeat;
     }
 
     h1 {
       margin-left: adjust(20px);
-      font-size: adjust(35px);
+      font-size: adjust(40px);
-      // line-height: adjust(100px);
-      // background: #eee;
       user-select: none;
-      letter-spacing: adjust(8px);
+      letter-spacing: adjust(6px);
       font-weight: 600;
-      // color: #6bf2ff;
       color: $main-color;
       font-family: "微软雅黑", sans-serif;
     }

src/components/layout/Main.vue

@@ -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;
 }

src/views/HomeView.vue

@@ -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;