add Boxes

src/components/boxes/KilnPressure.vue

@@ -0,0 +1,19 @@
+<template>
+	<!-- 窑炉压力 -->
+	<div></div>
+</template>
+
+<script>
+export default {
+	name: "KilnPressure",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/boxes/KilnRuntime.vue

@@ -0,0 +1,19 @@
+<template>
+	<!-- 窑炉运行时间 -->
+	<div></div>
+</template>
+
+<script>
+export default {
+	name: "KilnRuntime",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/boxes/NumberBox.vue

@@ -1,41 +0,0 @@
-<template>
-	<div :class="cls[usage]">number or date</div>
-</template>
-
-<script>
-export default {
-	name: "NumberBox",
-	props: {
-    usage: {
-      type: String,
-      default: 'NumberOrDate', // NumberOrDate | Table | Charts | NumberAndChart 
-    },
-  },
-	data() {
-		return {
-      cls: {
-        // 'NumberOrDate': {},
-        'NumberOrDate': 'number-or-date',
-        'Table': {},
-        'Charts': {},
-        'NumberAndChart': {},
-      }
-    };
-	},
-	created() {},
-	mounted() {},
-	methods: {},
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../assets/styles/functions";
-@import "../../assets/styles/variables";
-
-
-.number-or-date {
-  width: w(753px);
-  height: h(375px);
-  background: url(../../assets/box-number.png);
-}
-</style>

src/components/layout/Container.vue

@@ -1,6 +1,6 @@
 <template>
 	<!-- 带框的 container  -->
-	<div class="outter-container" :style="{ padding, backgroundColor }">
+	<div :class="cls[usage]" :style="{ padding, backgroundColor }">
 		<slot />
 	</div>
 </template>
@@ -9,17 +9,29 @@
 export default {
 	name: "Container",
 	props: {
+		usage: {
+			type: String,
+			default: "NumberOrDate", // NumberOrDate | Table | Charts | NumberAndChart
+		},
 		padding: {
 			type: String,
-      default: '10px 10px 10px 10px'
+			default: "10px 10px 10px 10px",
 		},
 		backgroundColor: {
 			type: String,
-      default: ''
-    }
+			default: "",
+		},
 	},
 	data() {
-		return {};
+		return {
+			cls: {
+				// 'NumberOrDate': {},
+				NumberOrDate: "number-or-date",
+				Table: 'tables',
+				Charts: 'charts',
+				NumberAndChart: 'number-and-chart',
+			},
+		};
 	},
 	created() {},
 	mounted() {},
@@ -27,9 +39,44 @@ export default {
 };
 </script>
 
-<style scoped>
-.outter-container {
-  padding: 0;
-  background: #ccc;
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+@import "../../assets/styles/variables";
+
+.number-or-date {
+  display: inline-block;
+  width: w(753px);
+  height: h(375px);
+  background: url(../../assets/box-number.png);
+  background-position: 0 0; /** top left */
+  background-size: 100% 100%;
 }
+
+.tables {
+  display: inline-block;
+  width: w(753px);
+  height: h(556px);
+  background: url(../../assets/box-number.png);
+  background-position: 0 0; /** top left */
+  background-size: 100% 100%;
+}
+
+.charts {
+  display: inline-block;
+  width: w(1580px);
+  height: h(520px);
+  background: url(../../assets/box-chart.png);
+  background-position: 0 0; /** top left */
+  background-size: 100% 100%;
+}
+
+.number-and-chart {
+  display: inline-block;
+  width: w(753px);
+  height: h(931px);
+  background: url(../../assets/box-right.png);
+  background-position: 0 0; /** top left */
+  background-size: 100% 100%;
+}
+
 </style>

src/components/layout/Main.vue

@@ -2,17 +2,20 @@
 	<main>
     main content
 		<AreaOne />
-		<NumberBox :usage="NumberOrDate" />
+		<Container :usage="'NumberOrDate'" />
+		<Container :usage="'Table'" />
+		<Container :usage="'Charts'" />
+		<Container :usage="'NumberAndChart'" />
   </main>
 </template>
 
 <script>
 import AreaOne from '../isolate-area-1/Area.vue'
-import NumberBox from '../boxes/NumberBox.vue'
+import Container from './Container.vue'
 
 export default {
 	name: "Main",
-	components: { AreaOne, NumberBox },
+	components: { AreaOne, Container },
 	props: {},
 	data() {
 		return {};