<template>
|
<div class="sales-lead">
|
<div class="header-title">{{ headerTitle }}</div>
|
<div class="header-user-info">
|
<div class="avatar"><el-avatar icon="el-icon-user-solid"></el-avatar></div>
|
<el-dropdown @command="handleCommand">
|
<div class="el-dropdown-link">用户名<i class="el-icon-arrow-down el-icon--right"></i></div>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="logout">退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "SalesLead",
|
props: {
|
headerTitle: String
|
},
|
data() {
|
return {}
|
},
|
methods: {
|
handleCommand(command) {
|
console.log(command)
|
if (command === "logout") {
|
this.$router.push({ path: "/login" })
|
}
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.sales-lead {
|
display: flex;
|
height: 50px;
|
box-sizing: border-box;
|
line-height: 50px;
|
background-color: $color-bg;
|
border: 1px solid #ccc;
|
.header-title {
|
padding-left: 16px;
|
font-size: 18px;
|
font-weight: bold;
|
color: #171718;
|
}
|
.header-user-info {
|
margin-left: auto;
|
margin-right: 20px;
|
display: flex;
|
.avatar {
|
margin-top: 4px;
|
margin-right: 10px;
|
}
|
}
|
}
|
</style>
|
