94 lines
1.7 KiB
Vue
94 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="header-btn">
|
||
|
|
<el-popover
|
||
|
|
placement="bottom"
|
||
|
|
trigger="click"
|
||
|
|
width="450"
|
||
|
|
class="popover"
|
||
|
|
v-model="visible"
|
||
|
|
>
|
||
|
|
<div class="changeBox">
|
||
|
|
<div class="center-classify">
|
||
|
|
<span>个人中心</span>
|
||
|
|
<div class="row-line"></div>
|
||
|
|
<div class="classify-item">
|
||
|
|
<div>工作台</div>
|
||
|
|
<div>用户中心</div>
|
||
|
|
<div>消息中心</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 点击内容 -->
|
||
|
|
<div slot="reference" class="click-content">
|
||
|
|
<i class="el-icon-trophy-1"></i>
|
||
|
|
<span>工作台</span>
|
||
|
|
<i class="el-icon-arrow-down"></i>
|
||
|
|
</div>
|
||
|
|
</el-popover>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
visible: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.flexStyle(){
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.changeBox {
|
||
|
|
.center-classify{
|
||
|
|
width: 180px;
|
||
|
|
>span:nth-child(1){
|
||
|
|
font-family: PingFang SC, PingFang SC;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
.row-line{
|
||
|
|
width: 100%;
|
||
|
|
height: 2px;
|
||
|
|
background-color: #E1E1E1;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
.classify-item{
|
||
|
|
margin-top: 10px;
|
||
|
|
div{
|
||
|
|
padding: 6px 0px;
|
||
|
|
text-indent: 0.5em;
|
||
|
|
border-radius: 3px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
div:hover{
|
||
|
|
color: white;
|
||
|
|
background-color: #478CF7;
|
||
|
|
}
|
||
|
|
div:not(:last-child){
|
||
|
|
margin-bottom: 7px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.click-content{
|
||
|
|
cursor: pointer;
|
||
|
|
.flexStyle();
|
||
|
|
>span{
|
||
|
|
margin: 0px 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
.el-popover {
|
||
|
|
box-sizing: content-box !important;
|
||
|
|
}
|
||
|
|
</style>
|