| | |
| | | <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"> |
| | | <img src="@/assets/image/avatar/avatar.png" class="avatar-img" alt=""> |
| | | <div class="avatar-content" v-if="userInfo.imagePath"> |
| | | <img :src="userInfo.imagePath" class="avatar-img" alt=""> |
| | | </div> |
| | | <!-- <div class="avatar-content" :style="{backgroundColor: getColor}"> |
| | | <div class="name text-5xl font-bold text-white">张</div> |
| | | </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"> |
| | | <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> |
| | |
| | | <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 |
| | | 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 |
| | | 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 |
| | | }, |
| | | { |
| | | id: 4, |
| | | title: '我的课程', |
| | | iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href |
| | | 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> |
| | | |