From 05e86e6cc5facb8aa059ca1b21eefb0e73db2180 Mon Sep 17 00:00:00 2001
From: Zhu Zhonghua <zhonghua@qq.com>
Date: 星期五, 11 四月 2025 18:04:58 +0800
Subject: [PATCH] 初版页面美化
---
src/layout/components/TagsView/index.vue | 47 ++++++++++++++++++-----------------------------
1 files changed, 18 insertions(+), 29 deletions(-)
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 2755df8..553a847 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -10,12 +10,15 @@
class="tags-view-item"
:style="activeStyle(tag)"
@click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
- @contextmenu.prevent="openMenu(tag, $event)"
- >
- {{ tag.title }}
- <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
- <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
- </span>
+ @contextmenu.prevent="openMenu(tag, $event)">
+ <div
+ @mouseover.stop="tag.isHover = true"
+ @mouseout.stop="tag.isHover = false">
+ {{ tag.title }}
+ <span v-show="!isAffix(tag) && tag.isHover" @click.prevent.stop="closeSelectedTag(tag)">
+ <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;" />
+ </span>
+ </div>
</router-link>
</scroll-pane>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
@@ -88,8 +91,10 @@
function activeStyle(tag) {
if (!isActive(tag)) return {};
return {
- "background-color": theme.value,
- "border-color": theme.value
+ // "background-color": theme.value,
+ // "border-color": theme.value
+ 'border-bottom': '2px solid #409eff',
+ color: '#409eff'
};
}
@@ -122,7 +127,8 @@
fullPath: tagPath,
path: tagPath,
name: route.name,
- meta: { ...route.meta }
+ meta: { ...route.meta },
+ isHover: false
})
}
if (route.children) {
@@ -272,9 +278,9 @@
cursor: pointer;
height: 26px;
line-height: 26px;
- border: 1px solid var(--tags-item-border, #d8dce5);
- color: var(--tags-item-text, #495060);
- background: var(--tags-item-bg, #fff);
+ // border: 1px solid var(--tags-item-border, #d8dce5);
+ // color: var(--tags-item-text, #495060);
+ // background: var(--tags-item-bg, #fff);
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
@@ -286,23 +292,6 @@
&:last-of-type {
margin-right: 15px;
- }
-
- &.active {
- background-color: #42b983;
- color: #fff;
- border-color: #42b983;
-
- &::before {
- content: '';
- background: #fff;
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- position: relative;
- margin-right: 5px;
- }
}
}
}
--
Gitblit v1.9.3