From 3aecb970ea84d44d6ba477b0e87720263aaa81b6 Mon Sep 17 00:00:00 2001
From: qiangyanwen <508737091@qq.com>
Date: Mon, 6 Jun 2022 13:34:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/monit_web/src/components/Header.vue  | 16 ++++++++++
 web/monit_web/src/components/Sidebar.vue | 13 ++++++++
 web/monit_web/src/view/home/Home.vue     | 39 ++++++++++++++++++++++--
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 web/monit_web/src/components/Header.vue
 create mode 100644 web/monit_web/src/components/Sidebar.vue

diff --git a/web/monit_web/src/components/Header.vue b/web/monit_web/src/components/Header.vue
new file mode 100644
index 0000000..df44373
--- /dev/null
+++ b/web/monit_web/src/components/Header.vue
@@ -0,0 +1,16 @@
+<template>
+  <el-header>Header</el-header>
+</template>
+
+<script>
+export default {
+  name: "Header"
+}
+</script>
+
+<style scoped>
+.el-header{
+  background-color: #282C34;
+}
+
+</style>
\ No newline at end of file
diff --git a/web/monit_web/src/components/Sidebar.vue b/web/monit_web/src/components/Sidebar.vue
new file mode 100644
index 0000000..ed55ab9
--- /dev/null
+++ b/web/monit_web/src/components/Sidebar.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Sidebar.vue"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/monit_web/src/view/home/Home.vue b/web/monit_web/src/view/home/Home.vue
index db38cb7..e32b570 100644
--- a/web/monit_web/src/view/home/Home.vue
+++ b/web/monit_web/src/view/home/Home.vue
@@ -1,7 +1,20 @@
 <template>
-<div>
-    我是home组件
-</div>
+   <div class="common-layout">
+    <el-container>
+      <el-header>
+        <div class="icon">
+          图标
+        </div>
+      </el-header>
+      <el-container>
+        <el-aside width="200px">Aside</el-aside>
+        <el-container>
+          <el-main>Main</el-main>
+          <el-footer>Footer</el-footer>
+        </el-container>
+      </el-container>
+    </el-container>
+  </div>
 </template>
 
 <script>
@@ -14,5 +27,25 @@ export default {
 </script>
 
 <style scoped>
+.el-header{
+  background-color: #67C23A;
+  height: 75px;
+}
+.el-aside{
+  width: 10%;
+  height: 1000px;
+  background-color: #324157;
+}
+.icon{
+  margin-top: 5px;
+  margin-left: 0px;
+  background-color: #dddddd;
+  height: 50px;
+  width: 50px;
+  line-height: 45px;
+  text-align: center;
+  border-radius: 5px;
+  border:1px solid #42b983;
+}
 
 </style>
\ No newline at end of file