refactor

src/components/SmallBox2.vue

@@ -1,23 +0,0 @@
-<template>
-	<div></div>
-</template>
-
-<script>
-export default {
-	name: "SmallBox2",
-	props: {
-    title: {
-      type: String,
-      default: '车间温度', // 车间温度   当前火向    换火时间   剩余时间
-    }
-  },
-	data() {
-		return {};
-	},
-	created() {},
-	mounted() {},
-	methods: {},
-};
-</script>
-
-<style scoped></style>

src/components/common/SmallBox2.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="small-box-2">
+		<div class="icon"></div>
+		<div class="info">
+			<h2 class="title">{{ title }}</h2>
+			<span class="value">{{ value }}</span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "SmallBox2",
+	props: {
+    title: {
+      type: String,
+      default: '车间温度', // 车间温度   当前火向    换火时间   剩余时间
+    },
+    value: {
+      type: String,
+      default: '27℃',
+    }
+  },
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.small-box-2 {
+	padding: 28px;
+	border: 1px solid gray;
+	border-radius: 6px;
+}
+</style>

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

@@ -0,0 +1,17 @@
+<template>
+	<DragabbleContainer class="isolate-area-1">
+    <SmallBox2></SmallBox2>
+  </DragabbleContainer>
+</template>
+
+<script>
+import DragabbleContainer from '../layout/DragableContainer.vue'
+import SmallBox2 from '../common/SmallBox2.vue';
+
+export default {
+	name: "IsolateArea--1",
+  components: { DragabbleContainer, SmallBox2 }
+};
+</script>
+
+<style scoped></style>

src/components/layout/Header.vue

@@ -16,11 +16,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../assets/styles/functions";
-@import "../assets/styles/variables";
+@import "../../assets/styles/functions";
+@import "../../assets/styles/variables";
 
 header {
-	background: url(../assets/header.png) center/cover no-repeat;
+	background: url(../../assets/header.png) center/cover no-repeat;
 	height: h(300px);
 	width: $actual_width;
 	display: grid;
@@ -55,12 +55,12 @@ header {
 .company {
 	margin-left: w(1180px);
 	width: w(1460px);
-	background: url("../assets/company.png") center/cover no-repeat;
+	background: url("../../assets/company.png") center/cover no-repeat;
 }
 
 .datetime {
 	margin-left: w(6300px);
 	width: w(1407px);
-	background: url("../assets/date.png") center/cover no-repeat;
+	background: url("../../assets/date.png") center/cover no-repeat;
 }
 </style>

src/components/layout/Main.vue

@@ -18,10 +18,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../assets/styles/functions';
+@import '../../assets/styles/functions';
 
 main {
 	height: 1px;
 	flex: 1;
+	background: #eee2;
 }
 </style>

src/views/HomeView.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script>
-import BigHeader from '../components/Header.vue'
-import Main from '../components/Main.vue'
+import BigHeader from '../components/layout/Header.vue'
+import Main from '../components/layout/Main.vue'
 
 export default {
 	name: "HomeView",
@@ -33,7 +33,6 @@ export default {
 	overflow: hidden;
 	background: url(../assets/bg.png) center/cover no-repeat ;
 	color: white;
-	background-color: #ccc;
 	display: flex;
 	flex-direction: column;
 }