<template>
|
<div class="custom-header">
|
<el-row class="content" justify="space-between">
|
<el-text class="text-white text-2xl font-bold">广东省技能人才评价考务管理平台</el-text>
|
<el-dropdown v-if="!userInfo.id" placement="bottom">
|
<el-row align="middle">
|
<Icon icon="fa:user-circle" width="22" height="22" class="mr-2" style="color: #fff" />
|
<el-text class="text-white cursor-p text-lg font-bold">黄婷婷</el-text>
|
<Icon icon="flowbite:caret-down-solid" width="22" height="22" class="ml-2" style="color: #fff" />
|
</el-row>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item>个人中心</el-dropdown-item>
|
<el-dropdown-item>退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<el-button v-else color="#007AFF">
|
<el-text class="text-white cursor-p text-lg font-bold" @click="login">登 录</el-text>
|
</el-button>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { useSessionStore } from '@/stores/session.js'
|
import { useLoginStore } from '@/stores/login.js'
|
import { storeToRefs } from 'pinia';
|
|
export default {
|
setup() {
|
const { loginDialogVisible } = storeToRefs(useLoginStore())
|
const { userInfo } = storeToRefs(useSessionStore())
|
return { loginDialogVisible, userInfo }
|
},
|
data() {
|
return {
|
|
}
|
},
|
methods: {
|
login() {
|
this.loginDialogVisible = true
|
}
|
}
|
}
|
|
</script>
|
<style>
|
.custom-header {
|
width: 100%;
|
align-content: center;
|
background-color: var(--el-color-primary);
|
height: 60px;
|
}
|
.content {
|
width: 100%;
|
max-width: 1280px;
|
margin: 0 auto;
|
padding: 0 40px;
|
}
|
</style>
|
