diff --git a/src/assets/img/leftBg.png b/src/assets/img/leftBg.png new file mode 100644 index 0000000..a0d755b Binary files /dev/null and b/src/assets/img/leftBg.png differ diff --git a/src/components/GlobalComponent/breadcrumb.less b/src/components/GlobalComponent/breadcrumb.less index 5695a96..61da2e6 100644 --- a/src/components/GlobalComponent/breadcrumb.less +++ b/src/components/GlobalComponent/breadcrumb.less @@ -12,6 +12,11 @@ flex-wrap: nowrap; justify-content: flex-start; box-sizing: border-box; + //border: 1px solid; + //border-top-right-radius: 8px; + //border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%) ; + //border-image-slice: 1; /* 这个很重要! */ + } // 面包屑容器滚动条样式 @@ -47,11 +52,11 @@ .breadcrumb-item { height: 32px; padding: 0 12px; - border-radius: 8px; + //border-radius: 8px; // 使用rgba格式设置带透明度的背景色,最后一个参数0.13表示13%的透明度 - background-color: rgba(186, 186, 186, 0.13); + background-color: #E5F3F1; // border: 1px solid #E8E8E8; - margin-right: 8px; + margin-right: 10px; display: flex; align-items: center; transition: all 0.3s ease; @@ -60,8 +65,13 @@ overflow: hidden; text-overflow: ellipsis; max-width: 180px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); + //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); box-sizing: border-box; + border-top-right-radius: 8px; + border-image-source: linear-gradient(96.54deg, #FFFFFF -0.94%, rgba(255, 255, 255, 0) 25.28%, rgba(167, 229, 228, 0) 59.69%, #A7E5E4 79.76%) ; + border-image-slice: 1; + backdrop-filter: blur(3.4000000953674316px); + box-shadow: 1px 2px 5px 0 #00666540; // 移除默认的分隔符 .ant-breadcrumb-separator { @@ -73,8 +83,8 @@ display: flex; align-items: center; height: 100%; - color: #808080 !important; - background: transparent !important; + color: #999999 !important; + background: #E5F3F1 !important; padding: 0; margin: 0; overflow: hidden; @@ -84,26 +94,26 @@ // 悬停效果 &:hover { - border-color: #0056FF; + border-color: #D6F5F0; // transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0, 86, 255, 0.1); + box-shadow: 1px 2px 5px 0 #00666599; } } // 面包屑项选中状态样式 .breadcrumb-item-active { - background-color: rgba(94, 121, 246, 0.13); + background-color: #D5F5F0; // border-color: #0056FF; .ant-breadcrumb-link { - color: #0056FF !important; + color: #1A7876 !important; font-weight: 500; } } // 面包屑文本选中状态样式 - 对应第252行代码中的条件样式 .breadcrumb-item-text-active { - color: #0056FF !important; + color: #1A7876 !important; font-weight: 500; } @@ -128,7 +138,7 @@ flex: 1; .breadcrumb-item-text-active { - color: #0056FF !important; + color: #1A7876 !important; } } @@ -145,20 +155,20 @@ flex-shrink: 0; &:hover { - color: #0056FF; + color: #1A7876; } } // 确保所有面包屑链接样式一致 .ant-breadcrumb-link { - color: #808080 !important; + color: #999999 !important; transition: color 0.3s ease; } .ant-breadcrumb-link:hover { - color: #0056FF !important; + color: #1A7876 !important; } .ant-breadcrumb-item-active .ant-breadcrumb-link { - color: #0056FF !important; -} \ No newline at end of file + color: #1A7876 !important; +} diff --git a/src/pages/nav_system_content/SystemContentList.less b/src/pages/nav_system_content/SystemContentList.less index 4019b6c..846169e 100644 --- a/src/pages/nav_system_content/SystemContentList.less +++ b/src/pages/nav_system_content/SystemContentList.less @@ -6,7 +6,7 @@ // padding: 12px; .tabBarHeader { - background-color: #fff; + background-color: #F0F7F7; padding: 0; width: 100%; min-height: 62px; @@ -31,6 +31,7 @@ .leftMenu { width: calc(100% - 52px); + } } @@ -77,11 +78,14 @@ width: 230px; overflow-y: auto; overflow-x: hidden; - background-color: #2E4CD4; - + //background-color: #006665; + background-image: url("@/assets/img/leftBg.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; .ant-menu-inline, .ant-menu-vertical { - background: #2E4CD4 !important; + background: #006665 !important; } // 默认情况字体样式和右边距 @@ -133,4 +137,4 @@ // height: 100%; overflow: auto; } -} \ No newline at end of file +}