54 lines
1008 B
Vue
54 lines
1008 B
Vue
|
<script lang="ts" setup>
|
||
|
|
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
|
||
|
|
|
||
|
|
const MainLayoutStore = useMainLayoutStore()
|
||
|
|
const userInfo = toRef(MainLayoutStore.UserInfo)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="User-Mini-Box">
|
||
|
|
<NuxtImg :src="userInfo.avatar" alt="Avatar" height="45" width="45"/>
|
||
|
|
<div>
|
||
|
|
<h3>{{ userInfo.nickName }}</h3>
|
||
|
|
<p>{{ userInfo.desc ?? "荒芜之地 ~ ~" }}</p>
|
||
|
|
</div>
|
||
|
|
</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>
|