From 8790f99a94733c7c3836706c75a77f9bbb15c2ca Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 31 三月 2025 17:09:30 +0800
Subject: [PATCH] layout布局修改，标签卡，列表组件封装
---
src/layouts/components/HeaderNav.vue | 189 ++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 168 insertions(+), 21 deletions(-)
diff --git a/src/layouts/components/HeaderNav.vue b/src/layouts/components/HeaderNav.vue
index ac6fff2..c7e9896 100644
--- a/src/layouts/components/HeaderNav.vue
+++ b/src/layouts/components/HeaderNav.vue
@@ -2,45 +2,77 @@
<div>
<!-- 右侧用户登录图标 -->
<div class="user-logininfo">
- <el-dropdown @command="clickmenu">
- <span class="el-dropdown-link right-userName">
- <div style="margin-left: 10px;">{{ userInfo.nickName }}</div>
- </span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="outlogin">退出登录</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
+ <div class="user-logininfo-icon">
+ <!-- 折叠 -->
+ <!-- <i @click="clickFold" class="el-icon-s-fold"></i> -->
+ <!-- 标签列表 -->
+ <div class="tag-list-container">
+ <div class="tag-list" v-for="tag in tagList" :key="tag.name">
+ <div @click="goTag(tag)" :class="{ 'activeTag': tag.path === $route.path }">
+ {{ tag.meta.title }}
+ </div>
+ <i @click="closeTag(tag)" v-if="tagList.length > 1" class="el-icon-close"></i>
+ </div>
+ </div>
+ </div>
+ <div class="user-info">
+ <img src="@/assets/public/photo.png" />
+ <div class="user-info-text">欢迎您，admin</div>
+ <div class="user-info-line"></div>
+ <div @click="outLogin" class="user-info-out">
+ <img src="@/assets/public/logOut.png" />
+ <div class="user-info-out-text">退出登录</div>
+ </div>
+ </div>
</div>
</div>
</template>
<script>
+import { mapState } from 'vuex'
export default {
data() {
return {
userInfo: '',
}
},
+ computed: {
+ ...mapState(['tagList', 'isFold'])
+ },
mounted() {
// 获取用户信息
this.getUserInfo()
},
methods: {
+ // 点击折叠按钮
+ clickFold() {
+ this.$store.commit('SET_ISFOLD', !this.isFold)
+ },
// 获取用户信息
getUserInfo() {
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
- },
- // 点击下拉菜单回调
- clickmenu(e) {
- if (e === 'outlogin') {
- this.outLogin()
- }
},
// 退出登录
outLogin() {
localStorage.clear()
this.$router.replace({ path: "/" });
},
+ // 关闭标签
+ closeTag(tag) {
+ this.$store.commit('SET_TAGLIST', this.tagList.filter(item => item.path !== tag.path))
+ // 判断是否是当前标签
+ if (tag.path === this.$route.path) {
+ // if (this.tagList.length > 1) {
+ this.$router.push(this.tagList[this.tagList.length - 1].path)
+ // } else {
+ // // this.$router.push('/welcome')
+ // }
+ }
+ },
+ // 跳转标签
+ goTag(tag) {
+ this.$router.push(tag.path)
+ }
},
}
</script>
@@ -49,16 +81,131 @@
// 右侧用户头像
.user-logininfo {
height: 100%;
- padding-right: 40px;
- cursor: pointer;
+ padding-left: 32px;
+ padding-right: 20px;
display: flex;
align-items: center;
- justify-content: flex-end;
+ justify-content: space-between;
-}
+ .user-logininfo-icon {
+ flex: 1;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
-.right-userName {
- display: flex;
- align-items: center;
+ i:first-child {
+ margin-right: 21px;
+ }
+
+ i {
+ cursor: pointer;
+ }
+
+ .tag-list-container {
+ display: flex;
+ align-items: center;
+ overflow-x: auto;
+
+ .tag-list {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ font-weight: 400;
+ font-size: 18px;
+ color: rgba(0, 0, 0, .6);
+ margin-right: 40px;
+
+ div:hover {
+ font-weight: bold;
+ color: #049C9A;
+ }
+
+ i {
+ margin-left: 10px;
+
+ &:hover {
+ color: #049C9A;
+ }
+ }
+ }
+
+ .activeTag {
+ font-weight: bold;
+ color: #049C9A;
+ }
+ }
+
+ }
+
+ .user-info {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 26px;
+ height: 26px;
+ border-radius: 50%;
+ }
+
+ .user-info-text {
+ margin-left: 16px;
+ font-size: 14px;
+ color: #303133;
+ font-weight: 400;
+ }
+
+ .user-info-line {
+ width: 1px;
+ height: 12px;
+ background-color: #979797;
+ margin: 0 20px;
+ }
+
+ .user-info-out {
+ display: flex;
+ align-items: center;
+ padding: 0 11px;
+ border-radius: 12px;
+ position: relative;
+ background: transparent;
+ cursor: pointer;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 12px;
+ padding: 1px;
+ background: linear-gradient(180deg, rgba(10, 203, 202, 1), rgba(4, 156, 154, 1));
+ -webkit-mask:
+ linear-gradient(#fff 0 0) content-box,
+ linear-gradient(#fff 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ }
+
+ .user-info-out-text {
+ font-weight: 400;
+ font-size: 14px;
+ color: #049C9A;
+ line-height: 21px;
+ position: relative;
+ z-index: 1;
+ }
+
+ img {
+ width: 14px;
+ height: 14px;
+ margin-right: 7px;
+ position: relative;
+ z-index: 1;
+ }
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.7.1