|
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>
|
||||||