update 窑炉压力

src/components/boxes/KilnPressure.vue

@@ -1,19 +1,96 @@
 <template>
 	<!-- 窑炉压力 -->
-	<div></div>
+	<Container usage="NumberOrDate">
+		<SubContainer title="窑炉压力" icon="docs" padding="17px">
+			<div class="pressure flex flex-col flex-start">
+				<div class="time flex flex-center">
+					<DigitalBox
+						class="time--item"
+						v-for="(item, index) in [9, 9, 9]"
+						:key="index"
+						:value="item"
+						:wider="true"
+					/>
+					<span class="unit">Kpa</span>
+				</div>
+				<div class="text">窑炉压力值</div>
+			</div>
+		</SubContainer>
+	</Container>
 </template>
 
 <script>
+import Container from "../layout/Container.vue";
+import SubContainer from "../layout/SubContainer.vue";
+import DigitalBox from "../common/DigitalBox.vue";
+
 export default {
 	name: "KilnPressure",
 	props: {},
+	components: { Container, SubContainer, DigitalBox },
 	data() {
 		return {};
 	},
-	created() {},
-	mounted() {},
-	methods: {},
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.pressure {
+	background: url(../../assets/speed.png) no-repeat;
+	background-size: auto 85%;
+	background-position: bottom 60% right -8%;
+}
+
+.time {
+	// background: #eee;
+	margin: 12px 0;
+}
+
+.time--item:not(:last-child) {
+	margin-right: 4px;
+}
+
+.unit {
+	font-family: sans-serif;
+	font-size: 20px;
+	letter-spacing: 1px;
+	align-self: flex-end;
+}
+
+.flex-start {
+	align-items: flex-start;
+}
+
+.text {
+	padding: 12px 0;
+	text-align: center;
+	font-size: 23px;
+	letter-spacing: 1px;
+	position: relative;
+	z-index: 10;
+	user-select: none;
+}
+
+.text::after {
+	content: "";
+	display: block;
+	position: absolute;
+	z-index: 0;
+	left: 0;
+	bottom: 10px;
+	height: 4px;
+	width: 100%;
+	/* 渐变色 */
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#6fe2ffc0,
+		#52cbef80,
+		#52cbef30,
+		#52cbef00,
+		transparent
+	);
+}
+</style>

src/components/boxes/KilnRuntime.vue

@@ -57,18 +57,28 @@ export default {
 	font-size: 23px;
 	letter-spacing: 4px;
   position: relative;
-  user-select: none;
+	z-index: 10;
+	user-select: none;
 }
 
 .text::after {
 	content: "";
 	display: block;
   position: absolute;
-  left: 10%;
+	z-index: 0;
-  bottom: 16px;
+	left: 12%;
-  height: 3px;
+	bottom: 10px;
-  width: 80%;
+	height: 4px;
+	width: 76%;
 	/* 渐变色 */
-	background: linear-gradient(to left, #8ae7f800, #6fe2fff0, #52cbef00);
+	background: radial-gradient(
+		ellipse at center,
+		#6fe2ff,
+		#6fe2ffc0,
+		#52cbef80,
+		#52cbef30,
+		#52cbef00,
+		transparent
+	);
 }
 </style>

src/components/common/DigitalBox.vue

@@ -1,5 +1,11 @@
 <template>
-	<div class="digit-box" :class="value in '0123456789'.split('') ? 'digit' : 'zhHans'">
+	<div
+		class="digit-box"
+		:class="[
+			value in '0123456789'.split('') ? 'digit' : 'zhHans',
+			wider ? 'another-hw' : '',
+		]"
+	>
 		{{ value }}
 	</div>
 </template>
@@ -12,6 +18,10 @@ export default {
 			type: String,
 			default: "0",
 		},
+		wider: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {};
@@ -31,18 +41,28 @@ export default {
 	background: url(../../assets/digit.png) no-repeat;
 	background-size: 100% 100%;
 	padding: 2px;
-  text-align: center;
+	text-align: center;
-  user-select: none;
+	user-select: none;
 }
 
 .digit {
-  font-family: '站酷庆科黄油体', sans-serif;
+	font-family: "站酷庆科黄油体", sans-serif;
-  font-size: 32px;
+	font-size: 32px;
-  line-height: 39px;
+	line-height: 39px;
 }
 
 .zhHans {
-  font-size: 18px;
+	font-size: 18px;
-  line-height: 48px;
+	line-height: 48px;
+}
+
+.another-hw {
+	height: h(72px);
+	width: w(62px);
+}
+
+.another-hw.digit {
+	font-size: 32px;
+	line-height: 32px;
 }
 </style>

src/components/layout/Main.vue

@@ -1,5 +1,5 @@
 <template>
-	<main class="relative">
+	<main class="">
 		<AreaOne v-if="false" />
 		<!-- <Container :usage="'NumberOrDate'" />
 		<Container :usage="'Table'" />
@@ -10,7 +10,7 @@
 			<KilnRuntime />
 		</div>
 		<div class="absolute left kiln-pressure">
-			<KilnRuntime />
+			<KilnPressure />
 		</div>
 		<div class="absolute left fan-runtime">
 			<KilnRuntime />
@@ -21,19 +21,17 @@
 
 <script>
 import KilnRuntime from "../boxes/KilnRuntime.vue";
+import KilnPressure from "../boxes/KilnPressure.vue";
 import AreaOne from "../isolate-area-1/Area.vue";
 // import Container from './Container.vue'
 
 export default {
 	name: "Main",
-	components: { AreaOne, KilnRuntime },
+	components: { AreaOne, KilnRuntime, KilnPressure },
 	props: {},
 	data() {
 		return {};
-	},
+	}
-	created() {},
-	mounted() {},
-	methods: {},
 };
 </script>
 
@@ -48,14 +46,17 @@ main {
 
 
 .kiln-runtime {
-	top: 0;
+	top: h(200px);
+	left: w(60px);
 }
 
 .kiln-pressure {
-	top: 300px;
+	top: h(618px);
+	left: w(60px);
 }
 
 .fan-runtime {
-	top: 600px;
+	top: h(1036px);
+	left: w(60px);
 }
 </style>

src/components/layout/SubContainer.vue

@@ -31,7 +31,8 @@ export default {
 	data() {
 		return {
 			iconClass: {
-				clock: 'icon-clock'
+				clock: 'icon-clock',
+				docs: 'icon-docs'
 			}
 		};
 	}
@@ -56,6 +57,11 @@ export default {
 	background-size: 100% 100%;
 }
 
+.icon-docs {
+	background: url(../../assets/docs.png);
+	background-size: 100% 100%;
+}
+
 .title {
   /* margin: 12px 0; */
 	margin-bottom: 12px;