parent
c3bc40e6cc
commit
d36ee0109a
@ -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>
|
||||
Loading…
Reference in new issue