80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
<template>
|
|
<aside class="user-panel">
|
|
<div class="user-avatar">
|
|
<div class="avatar-wrapper">
|
|
<img src="/avatar.svg" alt="User Avatar" @error="handleAvatarError" />
|
|
<div class="mic-icon">
|
|
<el-icon><Microphone /></el-icon>
|
|
</div>
|
|
</div>
|
|
<span class="user-name">{{ userName }}</span>
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { Microphone } from '@element-plus/icons-vue'
|
|
|
|
const userName = ref('李志鹏')
|
|
|
|
const handleAvatarError = (e) => {
|
|
e.target.src = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iI2ZmZTRjNCIvPjxjaXJjbGUgY3g9IjUwIiBjeT0iNDAiIHI9IjIwIiBmaWxsPSIjZmZkMWExIi8+PGVsbGlwc2UgY3g9IjUwIiBjeT0iODAiIHJ4PSIyNSIgcnk9IjE1IiBmaWxsPSIjZmY2YjZiIi8+PC9zdmc+'
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.user-panel {
|
|
width: 100px;
|
|
background: #f9fafb;
|
|
border-left: 1px solid #e5e7eb;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px 10px;
|
|
}
|
|
|
|
.user-avatar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
.avatar-wrapper {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 2px solid #e5e7eb;
|
|
}
|
|
|
|
.mic-icon {
|
|
position: absolute;
|
|
bottom: -4px;
|
|
right: -4px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: #10b981;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
border: 2px solid #fff;
|
|
}
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 12px;
|
|
color: #374151;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
</style>
|