refactor

src/components/layout/Container.vue

@@ -0,0 +1,35 @@
+<template>
+  <!-- 带框的 container  -->
+	<div class="outter-container" :style="{ padding, backgroundColor }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+	name: "Container",
+	props: {
+    padding: {
+      type: String,
+      default: '10px 10px 10px 10px'
+    },
+    backgroundColor: {
+      type: String,
+      default: ''
+    }
+  },
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped>
+.outter-container {
+  padding: 0;
+  background: #ccc;
+}
+</style>

src/components/layout/DragableContainer.vue

@@ -0,0 +1,21 @@
+<template>
+	<div class="draggable-container">
+    <!-- draggable  -->
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+	name: "DragableContainer",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/layout/Header.vue

@@ -0,0 +1,66 @@
+<template>
+	<header class="header relative">
+		<div>
+			<span style="width: 50px; height: 50px; background: red"></span>
+			<h1>凯盛晶华玻璃院公司800t/d特种玻璃生产线大数据指挥中心</h1>
+		</div>
+		<span class="header--wing absolute company"></span>
+		<span class="header--wing absolute datetime"></span>
+	</header>
+</template>
+
+<script>
+export default {
+	name: "Header",
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/functions";
+@import "../../assets/styles/variables";
+
+header {
+	background: url(../../assets/header.png) center/cover no-repeat;
+	height: h(300px);
+	width: $actual_width;
+	display: grid;
+	place-items: center;
+
+	> div {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20px;
+
+		h1 {
+			margin-left: 20px;
+			font-size: 40px;
+			// line-height: 100px;
+			// background: #eee;
+			user-select: none;
+			letter-spacing: 8px;
+			font-weight: 500;
+			// color: #6bf2ff;
+			color: $main-color;
+			font-family: "微软雅黑", "MS YaHei", "Helvicate", sans-serif;
+		}
+	}
+}
+
+.header--wing {
+	left: 0;
+	bottom: 10px;
+	height: h(78px);
+}
+
+.company {
+	margin-left: w(1180px);
+	width: w(1460px);
+	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;
+}
+</style>

src/components/layout/Main.vue

@@ -0,0 +1,28 @@
+<template>
+	<main>
+    main content
+  </main>
+</template>
+
+<script>
+export default {
+	name: "Main",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import '../../assets/styles/functions';
+
+main {
+	height: 1px;
+	flex: 1;
+	background: #eee2;
+}
+</style>

src/components/layout/SubContainer.vue

@@ -0,0 +1,46 @@
+<template>
+	<!-- 带标题的 container  -->
+	<div class="sub-container" :style="{ padding }">
+		<div class="title">
+			<span></span>
+			<span>{{ title }}</span>
+		</div>
+		<div class="content">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "SubContainer",
+	props: {
+		title: {
+			type: String,
+			default: "Default Title",
+		},
+		icon: {
+			type: String,
+			default: "default",
+		},
+		padding: {
+			type: String,
+			default: "10px",
+		},
+	},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped>
+.sub-container {}
+
+.title {
+  margin-bottom: 12px;
+}
+</style>