Skip to content

Commit 9237de9

Browse files
lin-xinlin-xin
committed
fix:文件名改为小写
1 parent 995ab69 commit 9237de9

14 files changed

+669
-663
lines changed

‎src/components/Header.vue renamed to ‎src/components/header.vue

Lines changed: 154 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,154 @@
1-
<template>
2-
<div class="header">
3-
<!-- 折叠按钮 -->
4-
<div class="collapse-btn" @click="collapseChage">
5-
<el-icon v-if="sidebar.collapse"><Expand /></el-icon>
6-
<el-icon v-else><Fold /></el-icon>
7-
</div>
8-
<div class="logo">后台管理系统</div>
9-
<div class="header-right">
10-
<div class="header-user-con">
11-
<!-- 消息中心 -->
12-
<div class="btn-bell" @click="router.push('/tabs')">
13-
<el-tooltip
14-
effect="dark"
15-
:content="message ? `有${message}条未读消息` : `消息中心`"
16-
placement="bottom"
17-
>
18-
<i class="el-icon-lx-notice"></i>
19-
</el-tooltip>
20-
<span class="btn-bell-badge" v-if="message"></span>
21-
</div>
22-
<!-- 用户头像 -->
23-
<el-avatar class="user-avator" :size="30" :src="imgurl" />
24-
<!-- 用户名下拉菜单 -->
25-
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
26-
<span class="el-dropdown-link">
27-
{{ username }}
28-
<el-icon class="el-icon--right">
29-
<arrow-down />
30-
</el-icon>
31-
</span>
32-
<template #dropdown>
33-
<el-dropdown-menu>
34-
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
35-
<el-dropdown-item>项目仓库</el-dropdown-item>
36-
</a>
37-
<el-dropdown-item command="user">个人中心</el-dropdown-item>
38-
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
39-
</el-dropdown-menu>
40-
</template>
41-
</el-dropdown>
42-
</div>
43-
</div>
44-
</div>
45-
</template>
46-
<script setup lang="ts">
47-
import { onMounted } from 'vue';
48-
import { useSidebarStore } from '../store/sidebar';
49-
import { useRouter } from 'vue-router';
50-
import imgurl from '../assets/img/img.jpg';
51-
52-
const username: string | null = localStorage.getItem('ms_username');
53-
const message: number = 2;
54-
55-
const sidebar = useSidebarStore();
56-
// 侧边栏折叠
57-
const collapseChage = () => {
58-
sidebar.handleCollapse();
59-
};
60-
61-
onMounted(() => {
62-
if (document.body.clientWidth < 1500) {
63-
collapseChage();
64-
}
65-
});
66-
67-
// 用户名下拉菜单选择事件
68-
const router = useRouter();
69-
const handleCommand = (command: string) => {
70-
if (command == 'loginout') {
71-
localStorage.removeItem('ms_username');
72-
router.push('/login');
73-
} else if (command == 'user') {
74-
router.push('/user');
75-
}
76-
};
77-
</script>
78-
<style scoped>
79-
.header {
80-
position: relative;
81-
box-sizing: border-box;
82-
width: 100%;
83-
height: 70px;
84-
font-size: 22px;
85-
color: #fff;
86-
}
87-
.collapse-btn {
88-
display: flex;
89-
justify-content: center;
90-
align-items: center;
91-
height: 100%;
92-
float: left;
93-
padding: 0 21px;
94-
cursor: pointer;
95-
}
96-
.header .logo {
97-
float: left;
98-
width: 250px;
99-
line-height: 70px;
100-
}
101-
.header-right {
102-
float: right;
103-
padding-right: 50px;
104-
}
105-
.header-user-con {
106-
display: flex;
107-
height: 70px;
108-
align-items: center;
109-
}
110-
.btn-fullscreen {
111-
transform: rotate(45deg);
112-
margin-right: 5px;
113-
font-size: 24px;
114-
}
115-
.btn-bell,
116-
.btn-fullscreen {
117-
position: relative;
118-
width: 30px;
119-
height: 30px;
120-
text-align: center;
121-
border-radius: 15px;
122-
cursor: pointer;
123-
display: flex;
124-
align-items: center;
125-
}
126-
.btn-bell-badge {
127-
position: absolute;
128-
right: 4px;
129-
top: 0px;
130-
width: 8px;
131-
height: 8px;
132-
border-radius: 4px;
133-
background: #f56c6c;
134-
color: #fff;
135-
}
136-
.btn-bell .el-icon-lx-notice {
137-
color: #fff;
138-
}
139-
.user-name {
140-
margin-left: 10px;
141-
}
142-
.user-avator {
143-
margin-left: 20px;
144-
}
145-
.el-dropdown-link {
146-
color: #fff;
147-
cursor: pointer;
148-
display: flex;
149-
align-items: center;
150-
}
151-
.el-dropdown-menu__item {
152-
text-align: center;
153-
}
154-
</style>
1+
<template>
2+
<div class="header">
3+
<!-- 折叠按钮 -->
4+
<div class="collapse-btn" @click="collapseChage">
5+
<el-icon v-if="sidebar.collapse"><Expand /></el-icon>
6+
<el-icon v-else><Fold /></el-icon>
7+
</div>
8+
<div class="logo">后台管理系统</div>
9+
<div class="header-right">
10+
<div class="header-user-con">
11+
<!-- 消息中心 -->
12+
<div class="btn-bell" @click="router.push('/tabs')">
13+
<el-tooltip
14+
effect="dark"
15+
:content="message ? `有${message}条未读消息` : `消息中心`"
16+
placement="bottom"
17+
>
18+
<i class="el-icon-lx-notice"></i>
19+
</el-tooltip>
20+
<span class="btn-bell-badge" v-if="message"></span>
21+
</div>
22+
<!-- 用户头像 -->
23+
<el-avatar class="user-avator" :size="30" :src="imgurl" />
24+
<!-- 用户名下拉菜单 -->
25+
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
26+
<span class="el-dropdown-link">
27+
{{ username }}
28+
<el-icon class="el-icon--right">
29+
<arrow-down />
30+
</el-icon>
31+
</span>
32+
<template #dropdown>
33+
<el-dropdown-menu>
34+
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
35+
<el-dropdown-item>项目仓库</el-dropdown-item>
36+
</a>
37+
<el-dropdown-item command="user">个人中心</el-dropdown-item>
38+
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
39+
</el-dropdown-menu>
40+
</template>
41+
</el-dropdown>
42+
</div>
43+
</div>
44+
</div>
45+
</template>
46+
<script setup lang="ts">
47+
import { onMounted } from 'vue';
48+
import { useSidebarStore } from '../store/sidebar';
49+
import { useRouter } from 'vue-router';
50+
import imgurl from '../assets/img/img.jpg';
51+
52+
const username: string | null = localStorage.getItem('ms_username');
53+
const message: number = 2;
54+
55+
const sidebar = useSidebarStore();
56+
// 侧边栏折叠
57+
const collapseChage = () => {
58+
sidebar.handleCollapse();
59+
};
60+
61+
onMounted(() => {
62+
if (document.body.clientWidth < 1500) {
63+
collapseChage();
64+
}
65+
});
66+
67+
// 用户名下拉菜单选择事件
68+
const router = useRouter();
69+
const handleCommand = (command: string) => {
70+
if (command == 'loginout') {
71+
localStorage.removeItem('ms_username');
72+
router.push('/login');
73+
} else if (command == 'user') {
74+
router.push('/user');
75+
}
76+
};
77+
</script>
78+
<style scoped>
79+
.header {
80+
position: relative;
81+
box-sizing: border-box;
82+
width: 100%;
83+
height: 70px;
84+
font-size: 22px;
85+
color: #fff;
86+
}
87+
.collapse-btn {
88+
display: flex;
89+
justify-content: center;
90+
align-items: center;
91+
height: 100%;
92+
float: left;
93+
padding: 0 21px;
94+
cursor: pointer;
95+
}
96+
.header .logo {
97+
float: left;
98+
width: 250px;
99+
line-height: 70px;
100+
}
101+
.header-right {
102+
float: right;
103+
padding-right: 50px;
104+
}
105+
.header-user-con {
106+
display: flex;
107+
height: 70px;
108+
align-items: center;
109+
}
110+
.btn-fullscreen {
111+
transform: rotate(45deg);
112+
margin-right: 5px;
113+
font-size: 24px;
114+
}
115+
.btn-bell,
116+
.btn-fullscreen {
117+
position: relative;
118+
width: 30px;
119+
height: 30px;
120+
text-align: center;
121+
border-radius: 15px;
122+
cursor: pointer;
123+
display: flex;
124+
align-items: center;
125+
}
126+
.btn-bell-badge {
127+
position: absolute;
128+
right: 4px;
129+
top: 0px;
130+
width: 8px;
131+
height: 8px;
132+
border-radius: 4px;
133+
background: #f56c6c;
134+
color: #fff;
135+
}
136+
.btn-bell .el-icon-lx-notice {
137+
color: #fff;
138+
}
139+
.user-name {
140+
margin-left: 10px;
141+
}
142+
.user-avator {
143+
margin-left: 20px;
144+
}
145+
.el-dropdown-link {
146+
color: #fff;
147+
cursor: pointer;
148+
display: flex;
149+
align-items: center;
150+
}
151+
.el-dropdown-menu__item {
152+
text-align: center;
153+
}
154+
</style>

0 commit comments

Comments
 (0)