add 字体

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>