style(Breadcrumb): 更新面包屑组件样式以增强视觉效果

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