<template>
|
<div class="user-panel max-w-sm min-w-96 h-fit">
|
<el-card class="card">
|
<div class="panel-content flex flex-col items-center">
|
<div class="avatar-container w-40 h-40 rounded-full overflow-hidden">
|
<div class="avatar-content" v-if="userInfo.imagePath">
|
<img :src="userInfo.imagePath" class="avatar-img" alt="">
|
</div>
|
<div class="avatar-content" :style="{backgroundColor: getColor}" v-else>
|
<div class="name text-5xl font-bold text-white">{{ getFirstName }}</div>
|
</div>
|
</div>
|
|
<div class="name-container text-lg font-bold mt-5 mb-2">
|
{{ userInfo.realName }}
|
</div>
|
|
<div class="department-container text-base mb-10">
|
{{ userInfo.userName }}
|
</div>
|
|
<div class="tool-container grid grid-cols-3 gap-10">
|
<div class="tool-item text-center cursor-pointer" v-for="item in toolList" @click="toolClick(item)">
|
<div class="tool-icon mb-1">
|
<img :src="item.iconPath" class="width-img" alt="">
|
</div>
|
<div class="tool-title">
|
{{ item.title }}
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue';
|
import randomColor from '@/utils/randomColor.js';
|
import { useRouter } from 'vue-router';
|
import { storeToRefs } from 'pinia';
|
import { useUserStore } from '@/store/index.js';
|
|
const userStore = useUserStore();
|
const { userInfo } = storeToRefs(userStore);
|
|
|
|
const router = useRouter();
|
|
const toolList = ref([
|
{
|
id: 1,
|
title: '在线培训',
|
iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href,
|
path: '/train'
|
},
|
{
|
id: 2,
|
title: '我的考试',
|
iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
|
path: '/exam-list'
|
},
|
{
|
id: 3,
|
title: '我的成绩',
|
iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
|
path: '/grade-list'
|
},
|
]);
|
|
|
const getColor = computed(() => {
|
return randomColor();
|
});
|
|
const getFirstName = computed(() => {
|
return userInfo.value.realName && userInfo.value.realName[0];
|
});
|
|
const toolClick = (item) => {
|
if (item.path) {
|
router.push(item.path);
|
}
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
|
.card {
|
border-radius: 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>
|
