LoongPanel-Asp/web/components/UserMini.vue

54 lines
904 B
Vue
Executable File

<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
const MainLayoutStore = useMainLayoutStore()
const userInfo = toRef(MainLayoutStore.UserInfo)
</script>
<template>
<div class="User-Mini-Box">
<n-avatar
round
:size="45"
:src="userInfo.avatar"
/>
</div>
</template>
<style lang="scss" scoped>
@import "base";
.User-Mini-Box {
height: min-content;
display: flex;
gap: $gap*2;
align-items: center;
justify-content: left;
padding: $padding;
h3 {
color: $light-text-color;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 175%;
}
p {
color: #8A92A6;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 130%;
//换行
word-break: break-all;
}
.dark-mode & {
h3, p {
color: $dark-text-color;
}
}
}
</style>