Files
vue-learning/企业级管理系统/web/admin_system/src/layout/components/Header.vue
2023-01-19 18:01:35 +08:00

100 lines
2.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @Author: Kane
* @Date: 2023-01-04 11:39:04
* @LastEditors: Kane
* @LastEditTime: 2023-01-19 14:53:38
* @FilePath: \admin_system\src\layout\components\Header.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<div class="app_banner no_select">
<span class="company_name">CPIC</span>
<div class="version_div">
<div>测试版</div>
<div>3.6.7 x64 Build 202208301257</div>
</div>
<div class="buttons_div">
<User
style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;"
/>
<SwitchButton
style="width: 25px; height; 25px; margin-right: 8px; cursor:pointer;"
@click="logout"
/>
</div>
</div>
</template>
<script>
//import { ElMessage } from "element-plus";
import { Logout } from "../../utils/api/info/account";
export default {
name: "AppBanner",
data() {
return {};
},
// created() {
// console.log("banner请求数据");
// },
mounted() {
//console.log("banner请求数据");
},
methods: {
logout() {
this.$confirm("是否退出系统?", "请确认", {
confirmButtonText: "是",
cancelButtonText: "否",
type: "warning",
}).then(() => {
Logout();
});
},
},
};
</script>
<style scoped>
.app_banner {
background-color: var(--banner-background-color);
color: #fff;
display: flex;
justify-content: left;
align-items: center;
padding: 0px 15px 0px 15px;
height: 100%;
position: relative;
}
.no_select {
-webkit-touch-callout: none;
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器*/
user-select: none;
}
.app_banner > * + * {
margin-left: 10px;
}
.company_name {
font-size: 2rem;
}
.version_div {
font-size: 0.5rem;
}
.buttons_div {
margin-left: auto;
padding-top: 5px;
/* border: 1px solid salmon; */
}
</style>