style(Breadcrumb): 更新面包屑组件样式以增强视觉效果
- 导入新的技术变量文件 variables.technology3 - 将面包屑文字颜色统一设置为白色并增加重要性标记 - 为链接状态添加发光阴影效果和悬停滤镜 - 调整分隔符颜色透明度以改善可读性 - 为非重定向项目添加文本阴影效果 - 优化悬停状态的颜色过渡和阴影效果
This commit is contained in:
@@ -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;
|
||||
|
||||
&.is-link {
|
||||
color: #FFFFFF !important;
|
||||
text-shadow: 0 0 4px rgba(102, 255, 204, 0.3);
|
||||
|
||||
&:hover {
|
||||
color: $menuActiveText;
|
||||
filter: drop-shadow(0 0 4px rgba(102, 255, 204, 0.3));
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user