update kiln databoard

src/views/databoard/kiln/index.vue

@@ -14,31 +14,53 @@
 			left: -16px;
 			width: calc(100% + 28px);
 			height: calc(100% + 38px);
-			background: #ccc;
+			background: #073f4a;
 			display: flex;
 			flex-direction: column;
 			gap: 16px;
 		">
-		<section class="header" style="height: 80px;">窑炉生产运行驾驶舱</section>
+		<!-- test area  -->
+		<DateBtnGroup />
+		<div
+			class="absolute"
+			style="
+				position: absolute;
+				top: 120px;
+				right: 100px;
+				padding: 12px;
+				background: #0003;
+				border: 1px solid #ccc;
+				display: grid;
+				grid-template-columns: repeat(2, 320px);
+				grid-auto-rows: 60px;
+				gap: 8px;
+			">
+			<ShadowRect v-for="n in 8" :key="n"></ShadowRect>
+		</div>
+
+		<!-- null  -->
+		<section class="header" style="height: 80px">窑炉生产运行驾驶舱</section>
 		<section
 			class="main-body"
 			style="
 				display: grid;
 				gap: 16px;
-                flex: 1;
+				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 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>
+import DateBtnGroup from '../components/DateBtnGroup.vue';
+import ShadowRect from '../components/ShadowRect.vue';
 export default {
 	name: 'KilnDataBoard',
-	components: {},
+	components: { DateBtnGroup, ShadowRect },
 	props: {},
 	data() {
 		return {};
@@ -50,6 +72,5 @@ export default {
 
 <style scoped lang="scss">
 .KilnDataBoard {
-	color: red;
 }
 </style>