diff --git a/element-vue/src/components/block.vue b/element-vue/src/components/block.vue
new file mode 100644
index 0000000..4c13a0d
--- /dev/null
+++ b/element-vue/src/components/block.vue
@@ -0,0 +1,17 @@
+<template>
+    <el-card shadow="hover" body-style="padding: 50px;">
+        <span>{{name}}</span>
+        <slot></slot>
+    </el-card>
+</template>
+
+<script>
+    export default {
+        name: "block",
+        props:['name']
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/element-vue/src/components/dropDownUser.vue b/element-vue/src/components/dropDownUser.vue
new file mode 100644
index 0000000..df9f517
--- /dev/null
+++ b/element-vue/src/components/dropDownUser.vue
@@ -0,0 +1,52 @@
+<!--页面逻辑-->
+<!---->
+<template>
+    <div >
+    <el-dropdown >
+  <span class="el-dropdown-link">
+    <i class="el-icon-user-solid el-icon--left"></i>{{user}}<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+        <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item @click="alert('我的资料')">我的资料</el-dropdown-item>
+            <el-dropdown-item @click.native="$emit('back')">退出登录</el-dropdown-item>
+        </el-dropdown-menu>
+    </el-dropdown>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "dropDownUser",
+        props:['user'],
+        data(){
+            return{
+
+            }
+        },
+        computed: {
+            inputListeners: function () {
+                var vm = this
+                // `Object.assign` 将所有的对象合并为一个新对象
+                return Object.assign({},
+                    // 我们从父级添加所有的监听器
+                    this.$listeners,
+                    // 然后我们添加自定义监听器，
+                    // 或覆写一些监听器的行为
+                    {
+                        // 这里确保组件配合 `v-model` 的工作
+                        click: function (event) {
+                            vm.$emit('back')
+                        }
+                    }
+                )
+            }
+        // mounted() {
+        //     console.log('这是用户下拉组件')
+        // }
+
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/element-vue/src/components/home.vue b/element-vue/src/components/home.vue
new file mode 100644
index 0000000..e507e5c
--- /dev/null
+++ b/element-vue/src/components/home.vue
@@ -0,0 +1,71 @@
+<template>
+    <div id="module2"  :style="md2Style">
+        <el-container>
+            <!-- 头部组件-->
+            <el-header  style="size: 20px;text-align: right;padding-top: 10px">
+                <drop-down-user :user="user" @back="backLogin"></drop-down-user>
+            </el-header>
+<!--            body部分-->
+           <el-main class="main" >
+                <el-row>
+                    <el-col :span="8" :offset="8">
+                        <el-card shadow="always" style="margin-bottom: 30%" ><h1>Hi{{user}},欢迎您</h1></el-card>
+                    </el-col>
+                </el-row>
+<!--               用一个循环把所有的功能模块加载出来 -->
+                <el-row :gutter="40" justify="center"  type="flex" align="bottom">
+                    <el-col :span="6" v-for="item in names">
+                        <block  :name="item" :style="bodyStyle" ></block>
+                    </el-col>
+                </el-row>
+
+            </el-main>
+        </el-container>
+    </div>
+</template>
+
+<script>
+    import dropDownUser from "~/components/dropDownUser";
+    import block from "~/components/block";
+    import {get} from "~/utils";
+    export default {
+        name: "home",
+        props:[
+            'names',
+            'user'
+        ],
+        data(){
+            return{
+                url:'',
+                md2Style:'background-color: aquamarine;height:',
+                bodyStyle:'background: deepskyblue',
+            }
+        },
+        components:{
+            block,
+            dropDownUser
+        },
+        mounted() {
+
+            this.md2Style+= window.innerHeight
+            this.md2Style+='px'
+            console.log(this.md2Style)
+
+        },
+        methods:{
+            backPersonal:function(){
+                this.$router.push('')
+            },
+            backLogin:function () {
+                this.$router.push('/login')
+            },
+            goPersonal:function () {
+                get('/lb/user/home')
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/element-vue/src/pages/manager/index.vue b/element-vue/src/pages/manager/index.vue
new file mode 100644
index 0000000..18b9d1a
--- /dev/null
+++ b/element-vue/src/pages/manager/index.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <home :names="{name1:'管理实验室',name2:'审核'}" :user="user"></home>
+    </div>
+</template>
+
+<script>
+    import home from "~/components/home";
+    export default {
+        name: "index",
+        data(){
+            return{
+                user:'林大池'
+            }
+        },
+        components:{
+            home
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/element-vue/src/pages/supManager/index.vue b/element-vue/src/pages/supManager/index.vue
new file mode 100644
index 0000000..d15b384
--- /dev/null
+++ b/element-vue/src/pages/supManager/index.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <home :names="{name1:'管理实验室',name2:'管理教师/管理员信息',name3:'新增教师/管理员信息'}" :user="user"></home>
+    </div>
+</template>
+
+<script>
+    import home from "~/components/home";
+    export default {
+        name: "index",
+        data(){
+            return{
+                user:"林大池"
+            }
+        },
+        components:{
+            home
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>