From 67cb463f73ea0236f0897842d5f8e50519caf6d9 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@qq.com>
Date: Tue, 9 May 2023 11:25:27 +0800
Subject: [PATCH] add Boxes

---
 src/components/boxes/ChartBox.vue       |  0
 src/components/boxes/KilnPressure.vue   | 19 ++++++
 src/components/boxes/KilnRuntime.vue    | 19 ++++++
 src/components/boxes/NumberBox.vue      | 41 ------------
 src/components/boxes/NumberChartBox.vue |  0
 src/components/boxes/TableBox.vue       |  0
 src/components/layout/Container.vue     | 85 +++++++++++++++++++------
 src/components/layout/Main.vue          |  9 ++-
 8 files changed, 110 insertions(+), 63 deletions(-)
 delete mode 100644 src/components/boxes/ChartBox.vue
 create mode 100644 src/components/boxes/KilnPressure.vue
 create mode 100644 src/components/boxes/KilnRuntime.vue
 delete mode 100644 src/components/boxes/NumberBox.vue
 delete mode 100644 src/components/boxes/NumberChartBox.vue
 delete mode 100644 src/components/boxes/TableBox.vue

diff --git a/src/components/boxes/ChartBox.vue b/src/components/boxes/ChartBox.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/boxes/KilnPressure.vue b/src/components/boxes/KilnPressure.vue
new file mode 100644
index 0000000..517bf9b
--- /dev/null
+++ b/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>
diff --git a/src/components/boxes/KilnRuntime.vue b/src/components/boxes/KilnRuntime.vue
new file mode 100644
index 0000000..c1a8393
--- /dev/null
+++ b/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>
diff --git a/src/components/boxes/NumberBox.vue b/src/components/boxes/NumberBox.vue
deleted file mode 100644
index fe5f885..0000000
--- a/src/components/boxes/NumberBox.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/boxes/NumberChartBox.vue b/src/components/boxes/NumberChartBox.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/boxes/TableBox.vue b/src/components/boxes/TableBox.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/layout/Container.vue b/src/components/layout/Container.vue
index 7ea0759..cc5108a 100644
--- a/src/components/layout/Container.vue
+++ b/src/components/layout/Container.vue
@@ -1,25 +1,37 @@
 <template>
-  <!-- 带框的 container  -->
-	<div class="outter-container" :style="{ padding, backgroundColor }">
-    <slot />
-  </div>
+	<!-- 带框的 container  -->
+	<div :class="cls[usage]" :style="{ padding, backgroundColor }">
+		<slot />
+	</div>
 </template>
 
 <script>
 export default {
 	name: "Container",
 	props: {
-    padding: {
-      type: String,
-      default: '10px 10px 10px 10px'
-    },
-    backgroundColor: {
-      type: String,
-      default: ''
-    }
-  },
+		usage: {
+			type: String,
+			default: "NumberOrDate", // NumberOrDate | Table | Charts | NumberAndChart
+		},
+		padding: {
+			type: String,
+			default: "10px 10px 10px 10px",
+		},
+		backgroundColor: {
+			type: String,
+			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%;
 }
-</style>
+
+.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>
\ No newline at end of file
diff --git a/src/components/layout/Main.vue b/src/components/layout/Main.vue
index 7d2ee86..f0678ce 100644
--- a/src/components/layout/Main.vue
+++ b/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 {};