From 267ebd7bb3f03d3c69f27c3a6af7f10024b21032 Mon Sep 17 00:00:00 2001
From: liwei <wei.li@le-it.com.cn>
Date: Mon, 21 Jun 2021 11:22:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=90=9C=E7=B4=A2=E3=80=81?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E5=AE=B9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ContentContainer.vue | 12 +++++++
 src/components/Layout.vue           |  1 +
 src/components/NavMenu.vue          |  1 +
 src/components/SearchTemplate.vue   | 16 +++++++++
 src/views/Home.vue                  | 50 ++++++++++++++++++++++++++++-
 5 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ContentContainer.vue
 create mode 100644 src/components/SearchTemplate.vue

diff --git a/src/components/ContentContainer.vue b/src/components/ContentContainer.vue
new file mode 100644
index 0000000..1b33435
--- /dev/null
+++ b/src/components/ContentContainer.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="content-container"><slot>我是内容容器</slot></div>
+</template>
+
+<script></script>
+
+<style lang="less" scoped>
+.content-container {
+  box-sizing: border-box;
+  padding: 20px;
+}
+</style>
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 80cab64..7fd26f7 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -52,6 +52,7 @@ export default {
   #content-box {
     width: 100%;
     height: 100%;
+    overflow-y: auto;
   }
 }
 </style>
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 929f867..82ed0a2 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -38,6 +38,7 @@ export default {
 <style scoped lang="less">
 .sidebar {
   .el-menu-item {
+    height: 48px;
     font-size: 16px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
diff --git a/src/components/SearchTemplate.vue b/src/components/SearchTemplate.vue
new file mode 100644
index 0000000..278287d
--- /dev/null
+++ b/src/components/SearchTemplate.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="search-template"><slot>我是搜索容器</slot></div>
+</template>
+
+<script></script>
+
+<style lang="less" scoped>
+.search-template {
+  width: 100%;
+  min-height: 48px;
+  box-sizing: border-box;
+  padding: 20px;
+  background: linear-gradient(180deg, #fafcfc 0%, #eeeeee 47%, #e7e7e7 100%);
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6a17326..20bb567 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,11 +1,59 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/img/logo.png" />
+    <SearchTemplate>
+      <div @click="consoleSolt">我是搜索内容</div>
+    </SearchTemplate>
+    <ContentContainer>
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="date" label="日期" width="180">
+        </el-table-column>
+        <el-table-column prop="name" label="姓名" width="180">
+        </el-table-column>
+        <el-table-column prop="address" label="地址"> </el-table-column>
+      </el-table>
+    </ContentContainer>
   </div>
 </template>
 
 <script>
+import SearchTemplate from "../components/SearchTemplate.vue";
+import ContentContainer from "../components/ContentContainer.vue";
 export default {
   name: "Home",
+  components: {
+    SearchTemplate,
+    ContentContainer,
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+    };
+  },
+  methods: {
+    consoleSolt() {
+      console.log("可以正常输出内容");
+    },
+  },
 };
 </script>