style(Breadcrumb): 更新面包屑组件样式以增强视觉效果
- 导入新的技术变量文件 variables.technology3 - 将面包屑文字颜色统一设置为白色并增加重要性标记 - 为链接状态添加发光阴影效果和悬停滤镜 - 调整分隔符颜色透明度以改善可读性 - 为非重定向项目添加文本阴影效果 - 优化悬停状态的颜色过渡和阴影效果
This commit is contained in:
@@ -71,6 +71,7 @@ export default {
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/assets/styles/variables";
|
@import "~@/assets/styles/variables";
|
||||||
|
@import "~@/assets/styles/variables.technology3";
|
||||||
|
|
||||||
.app-breadcrumb.el-breadcrumb {
|
.app-breadcrumb.el-breadcrumb {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -80,28 +81,47 @@ export default {
|
|||||||
|
|
||||||
::v-deep .el-breadcrumb__item {
|
::v-deep .el-breadcrumb__item {
|
||||||
.el-breadcrumb__inner {
|
.el-breadcrumb__inner {
|
||||||
color: $menuText;
|
color: #FFFFFF !important;
|
||||||
|
font-weight: 500;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:hover {
|
&.is-link {
|
||||||
color: $menuActiveText;
|
color: #FFFFFF !important;
|
||||||
filter: drop-shadow(0 0 4px rgba(102, 255, 204, 0.3));
|
text-shadow: 0 0 4px rgba(102, 255, 204, 0.3);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $menuActiveText !important;
|
||||||
|
filter: drop-shadow(0 0 6px rgba(102, 255, 204, 0.4));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-link {
|
&:hover {
|
||||||
font-weight: 500;
|
color: $menuActiveText !important;
|
||||||
|
filter: drop-shadow(0 0 6px rgba(102, 255, 204, 0.4));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-breadcrumb__separator {
|
.el-breadcrumb__separator {
|
||||||
color: rgba(102, 255, 204, 0.4);
|
color: rgba(102, 255, 204, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
font-weight: 500;
|
||||||
|
text-shadow: 0 0 4px rgba(102, 255, 204, 0.3);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $menuActiveText !important;
|
||||||
|
filter: drop-shadow(0 0 6px rgba(102, 255, 204, 0.4));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-redirect {
|
.no-redirect {
|
||||||
color: $menuText;
|
color: #FFFFFF !important;
|
||||||
cursor: text;
|
cursor: text;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
text-shadow: 0 0 4px rgba(102, 255, 204, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user