99 lines
1.9 KiB
Vue
99 lines
1.9 KiB
Vue
<template>
|
|
<div class="user-bar">
|
|
<div class="container">
|
|
<el-popover trigger="click" :width="260">
|
|
<template #reference>
|
|
<div class="user-info">
|
|
<el-badge is-dot :offset="[-7, 29]" class="user-badge">
|
|
<el-avatar shape="circle" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
|
|
</el-badge>
|
|
<div class="user-name">
|
|
<div class="user-title">MarchGlow</div>
|
|
<div class="user-state">在线</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<span>I wish they all could be California girls</span>
|
|
</el-popover>
|
|
|
|
<div class="feature">
|
|
<el-icon color="#fff" :size="26"><Setting /></el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Setting } from '@element-plus/icons-vue'
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.user-bar {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-badge :deep(.el-badge__content) {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
.user-badge :deep(.el-badge__content.is-dot) {
|
|
background-color: #008000;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
gap: 8px;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.user-name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 34px;
|
|
width: 120px;
|
|
}
|
|
|
|
.user-title {
|
|
line-height: 18px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
}
|
|
|
|
.user-state {
|
|
line-height: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.feature {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|