update Areaone

src/components/isolate-area-1/Area.vue

@@ -1,9 +1,12 @@
 <template>
 	<DragabbleContainer class="isolate-area-1">
-		<SmallBox2></SmallBox2>
-		<SmallBox2></SmallBox2>
-		<SmallBox2></SmallBox2>
-		<SmallBox2></SmallBox2>
+		<SmallBox2
+			v-for="rd in rdata"
+			:key="rd.icon"
+      :icon="rd.icon"
+			:title="rd.title"
+			:value="rd.value"
+		></SmallBox2>
 	</DragabbleContainer>
 </template>
 
@@ -14,17 +17,27 @@ import SmallBox2 from "../common/SmallBox2.vue";
 export default {
 	name: "IsolateArea--1",
 	components: { DragabbleContainer, SmallBox2 },
+	data() {
+		return {
+			rdata: [
+				{ icon: "temp", title: "车间温度", value: "27℃" },
+				{ icon: "fire", title: "当前火向", value: "东火" },
+				{ icon: "clock", title: "换火时间", value: "12:21:39" },
+				{ icon: "sand", title: "剩余时间", value: "6h" },
+			],
+		};
+	},
 };
 </script>
 
 <style scoped lang="scss">
 .isolate-area-1 {
-  display: flex;
+	display: flex;
 
-  > .small-box-2:not(:last-child) {
-    margin: {
-      right: 8px;
-    }
-  }
+	> .small-box-2:not(:last-child) {
+		margin: {
+			right: 8px;
+		}
+	}
 }
 </style>