From 77abc7b0e28b2dc1738d5d9f1480a9d93aa82049 Mon Sep 17 00:00:00 2001 From: Odboy Date: Sun, 25 Jan 2026 09:29:14 +0800 Subject: [PATCH] =?UTF-8?q?style(styles):=20=E6=B7=BB=E5=8A=A0=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E6=A0=8F=E9=9D=A2=E5=8C=85=E5=B1=91=E6=B1=89=E5=A0=A1?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=A0=B7=E5=BC=8F=E5=8F=98=E9=87=8F=E5=B9=B6?= =?UTF-8?q?=E5=BA=94=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在 variables.technology3.scss 中添加 Navbar 顶部导航栏样式变量 - 在 variables.technology3.scss 中添加 Hamburger 汉堡菜单按钮样式变量 - 在 variables.technology3.scss 中添加 Breadcrumb 面包屑导航样式变量 - 在 Breadcrumb 组件中应用新的面包屑样式变量 - 在 Hamburger 组件中应用新的汉堡菜单样式变量 - 在 Navbar 组件中应用新的导航栏样式变量 - 移除 Breadcrumb 组件中对 variables.technology3 的重复导入 --- .../assets/styles/variables.technology3.scss | 66 +++++++++++++++++++ .../src/components/Breadcrumb/index.vue | 29 ++++---- .../src/components/Hamburger/index.vue | 8 +-- .../src/layout/components/Navbar.vue | 24 +++---- 4 files changed, 96 insertions(+), 31 deletions(-) diff --git a/cutejava-front/src/assets/styles/variables.technology3.scss b/cutejava-front/src/assets/styles/variables.technology3.scss index d3285335..69e790ba 100644 --- a/cutejava-front/src/assets/styles/variables.technology3.scss +++ b/cutejava-front/src/assets/styles/variables.technology3.scss @@ -21,6 +21,71 @@ $subMenuHover: #2A3B5C; // 左侧菜单栏宽度 $sideBarWidth: 250px; +// ===== Navbar 顶部导航栏样式变量 ===== +// Navbar 背景渐变色（从侧边栏颜色过渡到深蓝色） +$navbarBgStart: $menuBg; +$navbarBgEnd: #162035; + +// Navbar 阴影颜色和透明度 +$navbarShadowColor: rgba(74, 144, 226, 0.15); +$navbarShadowY: 2px; +$navbarShadowBlur: 8px; +$navbarShadowSpread: 0px; + +// Navbar 底部边框颜色和透明度 +$navbarBorderColor: rgba(74, 144, 226, 0.2); +$navbarBorderWidth: 1px; + +// Navbar 悬停背景色（hamburger 和右侧菜单项） +$navbarHoverBg: rgba(74, 144, 226, 0.1); + +// 右侧菜单项文字颜色 +$navbarRightMenuColor: $menuText; + +// 右侧菜单项悬停效果颜色 +$navbarRightMenuHoverColor: $menuActiveText; +$navbarRightMenuHoverGlow: rgba(102, 255, 204, 0.3); + +// 头像边框颜色 +$navbarAvatarBorderColor: rgba(102, 255, 204, 0.3); +$navbarAvatarHoverBorderColor: $menuActiveText; +$navbarAvatarHoverGlow: rgba(102, 255, 204, 0.4); + +// 下拉箭头颜色 +$navbarCaretColor: $menuText; + +// ===== Hamburger 汉堡菜单按钮样式变量 ===== +// Hamburger 默认颜色 +$hamburgerColor: $menuText; + +// Hamburger 激活状态颜色 +$hamburgerActiveColor: $menuActiveText; + +// Hamburger 发光效果 +$hamburgerGlow: 0 0 6px $menuActiveText; + +// ===== Breadcrumb 面包屑导航样式变量 ===== +// Breadcrumb 文字颜色 +$breadcrumbTextColor: #FFFFFF; + +// Breadcrumb 链接颜色（可点击项） +$breadcrumbLinkColor: #FFFFFF; + +// Breadcrumb 发光效果 +$breadcrumbTextGlow: rgba(102, 255, 204, 0.3); + +// Breadcrumb 悬停颜色 +$breadcrumbHoverColor: $menuActiveText; + +// Breadcrumb 悬停发光效果 +$breadcrumbHoverGlow: 0 0 6px rgba(102, 255, 204, 0.4); + +// Breadcrumb 分隔符颜色 +$breadcrumbSeparatorColor: rgba(102, 255, 204, 0.5); + +// Breadcrumb 当前页面文字颜色（不可点击项） +$breadcrumbNoRedirectColor: #FFFFFF; + // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { @@ -33,3 +98,4 @@ $sideBarWidth: 250px; subMenuHover: $subMenuHover; sideBarWidth: $sideBarWidth; } + diff --git a/cutejava-front/src/components/Breadcrumb/index.vue b/cutejava-front/src/components/Breadcrumb/index.vue index bbfcee96..c0de9a01 100644 --- a/cutejava-front/src/components/Breadcrumb/index.vue +++ b/cutejava-front/src/components/Breadcrumb/index.vue @@ -71,7 +71,6 @@ export default { diff --git a/cutejava-front/src/components/Hamburger/index.vue b/cutejava-front/src/components/Hamburger/index.vue index 2f944d4a..d88021d8 100644 --- a/cutejava-front/src/components/Hamburger/index.vue +++ b/cutejava-front/src/components/Hamburger/index.vue @@ -40,17 +40,17 @@ export default { vertical-align: middle; width: 20px; height: 20px; - fill: $menuText; + fill: $hamburgerColor; transition: all 0.3s ease; } .hamburger.is-active { transform: rotate(180deg); - fill: $menuActiveText; - filter: drop-shadow(0 0 6px $menuActiveText); + fill: $hamburgerActiveColor; + filter: drop-shadow($hamburgerGlow); } .hamburger:hover { - fill: $menuActiveText; + fill: $hamburgerActiveColor; } diff --git a/cutejava-front/src/layout/components/Navbar.vue b/cutejava-front/src/layout/components/Navbar.vue index f0544e5f..db6e12c5 100644 --- a/cutejava-front/src/layout/components/Navbar.vue +++ b/cutejava-front/src/layout/components/Navbar.vue @@ -114,9 +114,9 @@ export default { height: 50px; overflow: hidden; position: relative; - background: linear-gradient(90deg, $menuBg 0%, #162035 100%); - box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15); - border-bottom: 1px solid rgba(74, 144, 226, 0.2); + background: linear-gradient(90deg, $navbarBgStart 0%, $navbarBgEnd 100%); + box-shadow: 0 $navbarShadowY $navbarShadowBlur $navbarShadowSpread $navbarShadowColor; + border-bottom: $navbarBorderWidth solid $navbarBorderColor; .hamburger-container { line-height: 46px; @@ -127,11 +127,11 @@ export default { -webkit-tap-highlight-color:transparent; &:hover { - background: rgba(74, 144, 226, 0.1); + background: $navbarHoverBg; .hamburger { color: $menuActiveText; - filter: drop-shadow(0 0 6px $menuActiveText); + filter: drop-shadow($hamburgerGlow); } } } @@ -167,9 +167,9 @@ export default { transition: all 0.3s ease; &:hover { - background: rgba(74, 144, 226, 0.1); - color: $menuActiveText; - filter: drop-shadow(0 0 8px rgba(102, 255, 204, 0.3)); + background: $navbarHoverBg; + color: $navbarRightMenuHoverColor; + filter: drop-shadow(0 0 8px $navbarRightMenuHoverGlow); } } } @@ -186,12 +186,12 @@ export default { width: 40px; height: 40px; border-radius: 10px; - border: 2px solid rgba(102, 255, 204, 0.3); + border: 2px solid $navbarAvatarBorderColor; transition: all 0.3s ease; &:hover { - border-color: $menuActiveText; - box-shadow: 0 0 15px rgba(102, 255, 204, 0.4); + border-color: $navbarAvatarHoverBorderColor; + box-shadow: 0 0 15px $navbarAvatarHoverGlow; } } @@ -201,7 +201,7 @@ export default { right: -20px; top: 25px; font-size: 12px; - color: $menuText; + color: $navbarCaretColor; transition: all 0.3s ease; &:hover {