add 字体

src/components/boxes/KilnRuntime.vue

@@ -1,12 +1,10 @@
 <template>
 	<!-- 窑炉运行时间 -->
 	<Container usage="NumberOrDate">
-		<SubContainer title="窑炉运行时间" icon="clock">
+		<SubContainer title="窑炉运行时间" icon="clock" padding="17px">
 			<div class="flex flex-col">
-				<div class="time">
-					<div class="time--item" v-for="(item, index) in time" :key="index">
-						{{ item }}
-					</div>
+				<div class="time flex flex-center">
+					<DigitalBox class="time--item" v-for="(item, index) in time" :key="index" :value="item" />
 				</div>
         <div class="text">
           窑炉运行时间
@@ -19,27 +17,39 @@
 <script>
 import Container from "../layout/Container.vue";
 import SubContainer from "../layout/SubContainer.vue";
+import DigitalBox from '../common/DigitalBox.vue'
 
 export default {
 	name: "KilnRuntime",
-	components: { Container, SubContainer },
+	components: { Container, SubContainer, DigitalBox },
 	props: {},
 	data() {
 		return {
 			time: "2202天55时",
 		};
 	},
-	created() {},
-	mounted() {},
-	methods: {},
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.time {
+  // background: #eee;
+  margin: 12px 0;
+}
+
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
 
 .time--item {
-  color: white;
-  /* background: ''; */
+
+}
+
+.time--item:not(:last-child) {
+  margin-right: 8px;
 }
 
 .text {}

src/components/common/DigitalBox.vue

@@ -0,0 +1,48 @@
+<template>
+	<div class="digit-box" :class="value in '0123456789'.split('') ? 'digit' : 'zhHans'">
+		{{ value }}
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DigitalBox",
+	props: {
+		value: {
+			type: String,
+			default: "0",
+		},
+	},
+	data() {
+		return {};
+	},
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+
+.digit-box {
+	// height: h(80px);
+	// width: w(64px);
+	height: h(80px);
+	width: w(56px);
+	color: white;
+	background: url(../../assets/digit.png) no-repeat;
+	background-size: 100% 100%;
+	padding: 2px;
+  text-align: center;
+  user-select: none;
+}
+
+.digit {
+  font-family: '站酷庆科黄油体', sans-serif;
+  font-size: 32px;
+  line-height: 39px;
+}
+
+.zhHans {
+  font-size: 18px;
+  line-height: 48px;
+}
+</style>

src/components/layout/Container.vue

@@ -15,7 +15,7 @@ export default {
 		},
 		padding: {
 			type: String,
-			default: "10px 10px 10px 10px",
+			default: "0",
 		},
 		backgroundColor: {
 			type: String,

src/components/layout/Main.vue

@@ -1,13 +1,21 @@
 <template>
-	<main>
-		main content
-		<AreaOne />
+	<main class="relative">
+		<AreaOne v-if="false" />
 		<!-- <Container :usage="'NumberOrDate'" />
 		<Container :usage="'Table'" />
 		<Container :usage="'Charts'" />
 		<Container :usage="'NumberAndChart'" /> -->
 
-		<KilnRuntime />
+		<div class="absolute left kiln-runtime">
+			<KilnRuntime />
+		</div>
+		<div class="absolute left kiln-pressure">
+			<KilnRuntime />
+		</div>
+		<div class="absolute left fan-runtime">
+			<KilnRuntime />
+		</div>
+		<div class="right absolute"></div>
 	</main>
 </template>
 
@@ -37,4 +45,17 @@ main {
 	flex: 1;
 	// background: #eee2;
 }
+
+
+.kiln-runtime {
+	top: 0;
+}
+
+.kiln-pressure {
+	top: 300px;
+}
+
+.fan-runtime {
+	top: 600px;
+}
 </style>

src/components/layout/SubContainer.vue

@@ -2,7 +2,7 @@
 	<!-- 带标题的 container  -->
 	<div class="sub-container" :style="{ padding }">
 		<div class="title">
-			<span></span>
+			<span class="icon" :class="iconClass[icon]"></span>
 			<span>{{ title }}</span>
 		</div>
 		<div class="content">
@@ -29,18 +29,47 @@ export default {
 		},
 	},
 	data() {
-		return {};
-	},
-	created() {},
-	mounted() {},
-	methods: {},
+		return {
+			iconClass: {
+				clock: 'icon-clock'
+			}
+		};
+	}
 };
 </script>
 
 <style scoped>
-.sub-container {}
+.sub-container {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.icon {
+	height: 16px;
+	width: 16px;
+	margin-right: 8px;
+}
+
+.icon-clock {
+	background: url(../../assets/clock.png);
+	background-size: 100% 100%;
+}
 
 .title {
-  margin-bottom: 12px;
+  /* margin: 12px 0; */
+	margin-bottom: 12px;
+	font-size: 16px;
+	color: #72f2ff;
+	font-family: sans-serif;
+	user-select: none;
+	display: flex;
+	align-items: center;
+}
+
+.content {
+	height: 1px;
+	/* background: #eee; */
+	flex: 1;
 }
 </style>

src/style.css

@@ -1,9 +1,40 @@
+@font-face {
+	font-family: "站酷庆科黄油体";
+	src: url(./assets/fonts/zkqkhy.ttf);
+}
+
+* {
+	box-sizing: border-box;
+}
 
 .relative {
-  position: relative;
+	position: relative;
 }
 
 .absolute {
-  position: absolute;
+	position: absolute;
+}
+
+.left {
+	left: 0;
+}
+
+.right {
+	right: 0;
 }
 
+.bottom {
+	bottom: 0;
+}
+
+.top {
+	top: 0;
+}
+
+.flex {
+	display: flex;
+}
+
+.flex-col {
+	flex-direction: column;
+}

vue.config.js

@@ -1,4 +1,8 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  devServer: {
+    host: '127.0.0.1',
+    port: 8000
+  }
 })