|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 280 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="navigation-bar">
|
||||
<div class="model-name">
|
||||
<svg-icon icon-class="park-logo" class="park-logo" />
|
||||
<div class="name-text">徐汇园林智慧系统</div>
|
||||
</div>
|
||||
<div class="user-data div-flex-center">
|
||||
<div class="user-model div-flex-center">
|
||||
<img :src="userStore.avatar" class="user-avatar" />
|
||||
<span>{{ userStore.name }}</span>
|
||||
</div>
|
||||
<div class="Logout" @click="logout()">
|
||||
退出
|
||||
<svg-icon icon-class="Logout" style="font-size: 18px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import useUserStore from "@/store/modules/user";
|
||||
const userStore = useUserStore();
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
const logout = () => {
|
||||
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
userStore.logOut().then(() => {
|
||||
location.href = "/index";
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navigation-bar {
|
||||
height: 70px;
|
||||
background: linear-gradient(90deg, #537cf7 0%, #566cff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 52px;
|
||||
}
|
||||
|
||||
.model-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 17px;
|
||||
.park-logo {
|
||||
font-size: 60px;
|
||||
}
|
||||
.name-text {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.user-data {
|
||||
gap: 16px;
|
||||
}
|
||||
.user-model {
|
||||
gap: 10px;
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
.user-avatar {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid white;
|
||||
}
|
||||
}
|
||||
|
||||
.Logout {
|
||||
cursor: pointer;
|
||||
width: 133px;
|
||||
height: 40px;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 20px;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
</style>
|
||||