diff --git a/IndexHeader.vue b/IndexHeader.vue
new file mode 100644
index 0000000..4aa55a3
--- /dev/null
+++ b/IndexHeader.vue
@@ -0,0 +1,185 @@
+<template>
+    <!-- <el-header>
+        <el-menu background-color="#00c292" text-color="#FFFFFF" active-text-color="#FFFFFF" mode="horizontal">
+            <div class="fl title">{{this.$project.projectName}}</div>
+            <div class="fr logout" style="display:flex;">
+                <el-menu-item index="3">
+                    <div>{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
+                </el-menu-item>
+                <el-menu-item @click="onLogout" index="2">
+                    <div>退出登录</div>
+                </el-menu-item>
+            </div>
+        </el-menu>
+    </el-header> -->
+    <div class="navbar" :style="{backgroundColor:heads.headBgColor,height:heads.headHeight,boxShadow:heads.headBoxShadow,lineHeight:heads.headHeight}">
+        <div class="title-menu" :style="{justifyContent:heads.headTitleStyle=='1'?'flex-start':'center'}">
+            <el-image v-if="heads.headTitleImg" class="title-img" :style="{width:heads.headTitleImgWidth,height:heads.headTitleImgHeight,boxShadow:heads.headTitleImgBoxShadow,borderRadius:heads.headTitleImgBorderRadius}" :src="heads.headTitleImgUrl" fit="cover"></el-image>
+            <div class="title-name" :style="{color:heads.headFontColor,fontSize:heads.headFontSize}">{{this.$project.projectName}}</div>
+            <!--             <img src="../../../../img/logo.jpg" style="width: 60px;height: 60px;border-radius:60px"> -->
+        </div>
+        <div class="right-menu">
+            <div class="user-info" :style="{color:heads.headUserInfoFontColor,fontSize:heads.headUserInfoFontSize}">{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
+			<div class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onIndexTap">退出到前台</div>
+            <div class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onLogout">退出登录</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                dialogVisible: false,
+                ruleForm: {},
+                user: {},
+                heads: {"headLogoutFontHoverColor":"#fff","headFontSize":"20px","headUserInfoFontColor":"rgba(251, 250, 250, 1)","headBoxShadow":"0 5px 0px #DCDCDC","headTitleImgHeight":"44px","headLogoutFontHoverBgColor":"rgba(251, 250, 250, 1)","headFontColor":"rgba(251, 250, 250, 1)","headTitleImg":false,"headHeight":"60px","headTitleImgBorderRadius":"22px","headTitleImgUrl":"http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg","headBgColor":"#58B351","headTitleImgBoxShadow":"0 1px 6px #444","headLogoutFontColor":"rgba(251, 250, 250, 1)","headUserInfoFontSize":"16px","headTitleImgWidth":"44px","headTitleStyle":"2","headLogoutFontSize":"16px"},
+            };
+        },
+        created() {
+            this.setHeaderStyle()
+        },
+        mounted() {
+            let sessionTable = this.$storage.get("sessionTable")
+            this.$http({
+                url: sessionTable + '/session',
+                method: "get"
+            }).then(({
+                         data
+                     }) => {
+                if (data && data.code === 0) {
+                    this.user = data.data;
+                } else {
+                    let message = this.$message
+                    message.error(data.msg);
+                }
+            });
+        },
+        methods: {
+            onLogout() {
+                let storage = this.$storage
+                let router = this.$router
+                storage.clear()
+                router.replace({
+                    name: "login"
+                });
+            },
+            onIndexTap(){
+                window.location.href = `${this.$base.indexUrl}`
+            },
+            setHeaderStyle() {
+                this.$nextTick(()=>{
+                    document.querySelectorAll('.navbar .right-menu .logout').forEach(el=>{
+                        el.addEventListener("mouseenter", e => {
+                            e.stopPropagation()
+                            el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor
+                            el.style.color = this.heads.headLogoutFontHoverColor
+                        })
+                        el.addEventListener("mouseleave", e => {
+                            e.stopPropagation()
+                            el.style.backgroundColor = "transparent"
+                            el.style.color = this.heads.headLogoutFontColor
+                        })
+                    })
+                })
+            },
+        }
+    };
+</script>
+
+
+<style lang="scss" scoped>
+    .navbar {
+        height: 60px;
+        line-height: 60px;
+        width: 100%;
+        padding: 0 34px;
+        box-sizing: border-box;
+        background-color: #ff00ff;
+        position: relative;
+        z-index: 111;
+
+    .right-menu {
+        position: absolute;
+        right: 34px;
+        top: 0;
+        height: 100%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        z-index: 111;
+
+    .user-info {
+        font-size: 16px;
+        color: red;
+        padding: 0 12px;
+    }
+
+    .logout {
+        font-size: 16px;
+        color: red;
+        padding: 0 12px;
+        cursor: pointer;
+    }
+
+    }
+
+    .title-menu {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+
+    .title-img {
+        width: 44px;
+        height: 44px;
+        border-radius: 22px;
+        box-shadow: 0 1px 6px #444;
+        margin-right: 16px;
+    }
+
+    .title-name {
+        font-size: 24px;
+        color: #fff;
+        font-weight: 700;
+    }
+    }
+    }
+    // .el-header .fr {
+       // 	float: right;
+       // }
+
+    // .el-header .fl {
+       // 	float: left;
+       // }
+
+    // .el-header {
+       // 	width: 100%;
+       // 	color: #333;
+       // 	text-align: center;
+       // 	line-height: 60px;
+       // 	padding: 0;
+       // 	z-index: 99;
+       // }
+
+    // .logo {
+       // 	width: 60px;
+       // 	height: 60px;
+       // 	margin-left: 70px;
+       // }
+
+    // .avator {
+       // 	width: 40px;
+       // 	height: 40px;
+       // 	background: #ffffff;
+       // 	border-radius: 50%;
+       // }
+
+    // .title {
+       // 	color: #ffffff;
+       // 	font-size: 20px;
+       // 	font-weight: bold;
+       // 	margin-left: 20px;
+       // }
+</style>