<template>
|
<div class="w-screen h-16 bg-blue-500 flex justify-between items-center px-10 box-border">
|
<div class="return-container text-center cursor-pointer" @click="returnBack">
|
<div class="icon mx-auto">
|
<img src="@/assets/icons/return.png" class="width-img" alt="">
|
</div>
|
<div class="label text-white text-sm">返回</div>
|
</div>
|
|
<div class="user-container flex items-center">
|
<div class="avatar-container w-12 h-12 rounded-full overflow-hidden mr-3">
|
<div class="avatar-content" v-if="userInfo.imagePath">
|
<img :src="'/api/files/'+userInfo.imagePath" class="avatar-img" alt="">
|
</div>
|
<div class="avatar-content" :style="{ backgroundColor: getColor }">
|
<div class="name text-xl font-bold text-white">{{ getFirstName }}</div>
|
</div>
|
</div>
|
<div class="user-name text-white">{{ userInfo.realName || '用户' }}</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue';
|
import { useRouter } from 'vue-router';
|
import randomColor from '@/utils/randomColor.js';
|
import { storeToRefs } from 'pinia';
|
import { useUserStore } from '@/store/index.js';
|
|
const router = useRouter();
|
const userStore = useUserStore();
|
const { userInfo } = storeToRefs(userStore);
|
|
const getColor = computed(() => {
|
return randomColor();
|
});
|
|
const getFirstName = computed(() => {
|
return userInfo.value.realName && userInfo.value.realName[0];
|
});
|
|
const returnBack = () => {
|
router.back();
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.return-container {
|
width: 50px;
|
|
.icon {
|
width: 30px;
|
}
|
}
|
|
.avatar-content {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.avatar-img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
</style>
|
