src/views/databoard/kiln/index.vue

@@ -0,0 +1,55 @@
+<!-- 
+    filename: KilnDataBoard.vue
+    author: liubin
+    date: 2023-12-04 16:51:00
+    description: 
+-->
+
+<template>
+	<div
+		class="KilnDataBoard"
+		style="
+			position: absolute;
+			top: -8px;
+			left: -16px;
+			width: calc(100% + 28px);
+			height: calc(100% + 38px);
+			background: #ccc;
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		">
+		<section class="header" style="height: 80px;">窑炉生产运行驾驶舱</section>
+		<section
+			class="main-body"
+			style="
+				display: grid;
+				gap: 16px;
+                flex: 1;
+				grid-template-columns: repeat(3, minmax(100px, 1fr));
+			">
+            <div class="main-left" style="background: #f001"></div> 
+            <div class="main-middle" style="background: #0f01;"></div>   
+            <div class="main-right" style="background: #00f1;"></div>
+        </section>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'KilnDataBoard',
+	components: {},
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.KilnDataBoard {
+	color: red;
+}
+</style>