diff --git a/.workbuddy/memory/2026-07-31.md b/.workbuddy/memory/2026-07-31.md index 4aae7a3..a589541 100644 --- a/.workbuddy/memory/2026-07-31.md +++ b/.workbuddy/memory/2026-07-31.md @@ -81,3 +81,8 @@ - **数据**: 全 mock，data() 中每项标注对应后端接口（如 /blade-business/waybill/count、/trend、/cargoStat 等），后续替换真实接口即可 - **预览**: `npm run build` 通过；dev server `http://localhost:2889/` - **注意**: 快捷入口 path 依据 views 目录结构推断（/business/waybill-manage 等），需与后端菜单 path 一致才能跳转 + +## 图标悬停圆形背景效果示例 + +- 按用户提供的两张截图（T 恤默认图标 / 铃铛带圆形背景图标），实现了一个悬停时显示浅灰圆形背景的图标按钮效果。 +- 产物: `/Users/gxwebsoft/VUE/tms-erp-web-ws/icon-hover-demo.html`（含 CSS 核心代码与 Element Plus 用法示例）。 diff --git a/icon-hover-demo.html b/icon-hover-demo.html new file mode 100644 index 0000000..e6be2fd --- /dev/null +++ b/icon-hover-demo.html @@ -0,0 +1,142 @@ + + + + + + 图标悬停圆形背景效果 + + + +

图标悬停圆形背景效果

+
+

把鼠标移到下面的 T 恤图标上，就会出现类似“铃铛”示例的浅灰圆形背景。

+ +
+ + + ↑ hover 查看效果 +
+ +

CSS 核心代码（可复制）

+ 
.icon-hover-btn {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: #333;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.icon-hover-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: #f2f3f5;
+  transform: scale(0.6);
+  opacity: 0;
+  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
+              opacity 0.2s ease;
+}
+.icon-hover-btn:hover::before,
+.icon-hover-btn:focus-visible::before {
+  transform: scale(1);
+  opacity: 1;
+}
+.icon-hover-btn svg {
+  position: relative;
+  z-index: 1;
+  width: 22px;
+  height: 22px;
+}
+ +

Element Plus 用法示例

+ 
<el-button class="icon-hover-btn" link>
+  <el-icon size="22"><Upload /></el-icon>
+</el-button>
+
+ + diff --git a/index.html b/index.html index d12d054..5a4c44b 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@ + 运输板块数字化管理平台 diff --git a/public/favicon.png b/public/favicon-bak.png similarity index 100% rename from public/favicon.png rename to public/favicon-bak.png diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..1278ac7 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/img/bg/img-logo.jpg b/public/img/bg/img-logo.jpg deleted file mode 100644 index f696429..0000000 Binary files a/public/img/bg/img-logo.jpg and /dev/null differ diff --git a/public/img/bg/img-logo.png b/public/img/bg/img-logo.png index a4bf80c..f0fd939 100644 Binary files a/public/img/bg/img-logo.png and b/public/img/bg/img-logo.png differ diff --git a/public/img/logo.png b/public/img/logo.png index 305c622..f0fd939 100644 Binary files a/public/img/logo.png and b/public/img/logo.png differ diff --git a/src/styles/theme/beautiful.scss b/src/styles/theme/beautiful.scss index bf96a2f..44b903c 100644 --- a/src/styles/theme/beautiful.scss +++ b/src/styles/theme/beautiful.scss @@ -26,7 +26,8 @@ } .avue-logo { - background: linear-gradient(90deg, #006cff, #399efd) !important; + background: #fff !important; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .avue-tags { diff --git a/src/styles/theme/bule.scss b/src/styles/theme/bule.scss index 0c59765..98d58ea 100644 --- a/src/styles/theme/bule.scss +++ b/src/styles/theme/bule.scss @@ -1,7 +1,23 @@ .theme-bule { .avue-top, .avue-logo { - background: #004ca7; + background: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + color: rgba(0, 0, 0, 0.85); + } + + .avue-top { + .top-bar__right, + .avue-breadcrumb, + .top-bar__item, + .el-dropdown, + .el-dropdown-link { + color: rgba(0, 0, 0, 0.85); + + i { + color: rgba(0, 0, 0, 0.65); + } + } } .avue-sidebar { @@ -12,25 +28,21 @@ } } - .el-dropdown { - color: #fff; - } - .avue-logo { .avue-logo_title { - color: #fff; + color: rgba(0, 0, 0, 0.85); } } .avue-breadcrumb { i { - color: #fff; + color: rgba(0, 0, 0, 0.65); } } .top-bar__item { i { - color: #fff; + color: rgba(0, 0, 0, 0.65); } } @@ -39,13 +51,13 @@ .el-menu-item { i, span { - color: #fff; + color: rgba(0, 0, 0, 0.85); } &:hover { i, span { - color: #fff; + color: var(--el-color-primary); } } } diff --git a/src/styles/theme/cool.scss b/src/styles/theme/cool.scss index 1ae469b..1d852b8 100644 --- a/src/styles/theme/cool.scss +++ b/src/styles/theme/cool.scss @@ -34,7 +34,8 @@ } .avue-top { - background: linear-gradient(120deg, #25aff3, #008ad3); + background: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .avue-tags { @@ -62,7 +63,7 @@ .avue-logo { background: #fff; - box-shadow: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .avue-sidebar--tip { @@ -71,20 +72,20 @@ } .el-dropdown { - color: #fff; + color: rgba(0, 0, 0, 0.85); } .avue-logo_title { font-weight: 400; - color: #008ad3; + color: rgba(0, 0, 0, 0.85); } .logo_title, .avue-breadcrumb { - color: #fff; + color: rgba(0, 0, 0, 0.85); i { - color: #fff; + color: rgba(0, 0, 0, 0.65); } } @@ -92,13 +93,13 @@ .el-menu-item { i, span { - color: #fff; + color: rgba(0, 0, 0, 0.85); } &:hover { i, span { - color: #fff; + color: var(--el-color-primary); } } } @@ -169,7 +170,7 @@ .top-bar__item { i { - color: #fff; + color: rgba(0, 0, 0, 0.65); } } } diff --git a/src/styles/theme/d2.scss b/src/styles/theme/d2.scss index e5c61f4..3781c05 100644 --- a/src/styles/theme/d2.scss +++ b/src/styles/theme/d2.scss @@ -1,8 +1,8 @@ .theme-d2 { .avue-logo { - color: var(--el-color-primary); - background-color: #ebf1f6; - box-shadow: none; + color: rgba(0, 0, 0, 0.85); + background-color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); .avue-logo_title { font-size: 20px; @@ -11,8 +11,8 @@ } .avue-top { - background-color: #ebf1f6; - box-shadow: none; + background-color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .avue-main { diff --git a/src/styles/theme/hey.scss b/src/styles/theme/hey.scss index 96468a0..efd4226 100644 --- a/src/styles/theme/hey.scss +++ b/src/styles/theme/hey.scss @@ -33,7 +33,7 @@ .avue-logo { background-color: #fff; - box-shadow: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); .avue-logo_title { color: var(--el-color-primary); diff --git a/src/styles/theme/index.scss b/src/styles/theme/index.scss index 8bfe8c8..d6a96bf 100644 --- a/src/styles/theme/index.scss +++ b/src/styles/theme/index.scss @@ -47,16 +47,17 @@ .theme-cool, .theme-beautiful { .avue-logo { - background: var(--el-color-primary) !important; - background-color: var(--el-color-primary) !important; - color: #fff; + background: #fff !important; + background-color: #fff !important; + color: rgba(0, 0, 0, 0.85); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); .avue-logo_title, .avue-logo_subtitle, .logo-title { - color: #fff; + color: rgba(0, 0, 0, 0.85); background-image: none; - -webkit-text-fill-color: #fff; + -webkit-text-fill-color: rgba(0, 0, 0, 0.85); } } } diff --git a/src/styles/theme/iview.scss b/src/styles/theme/iview.scss index 4ecfdca..eb8afe1 100644 --- a/src/styles/theme/iview.scss +++ b/src/styles/theme/iview.scss @@ -1,7 +1,7 @@ .theme-iview { .avue-logo { - background: #001529; - box-shadow: none; + background: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); text-align: center; .avue-logo_title { diff --git a/src/styles/theme/lte.scss b/src/styles/theme/lte.scss index ef2baea..78b3a9d 100644 --- a/src/styles/theme/lte.scss +++ b/src/styles/theme/lte.scss @@ -1,11 +1,12 @@ .theme-lte { .avue-logo { - background-color: var(--el-color-primary); + background-color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); .avue-logo_title { font-weight: 500; font-size: 20px; - color: #fff; + color: rgba(0, 0, 0, 0.85); } } diff --git a/src/styles/theme/white.scss b/src/styles/theme/white.scss index cd5db57..5e7ed43 100644 --- a/src/styles/theme/white.scss +++ b/src/styles/theme/white.scss @@ -36,7 +36,8 @@ .avue-top, .avue-logo, .tags-container { - background-color: var(--el-color-primary); + background-color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .avue-sidebar--tip { @@ -45,20 +46,20 @@ } .el-dropdown { - color: #fff; + color: rgba(0, 0, 0, 0.85); } .avue-logo_title { font-weight: 400; - color: #fff; + color: rgba(0, 0, 0, 0.85); } .logo_title, .avue-breadcrumb { - color: #fff; + color: rgba(0, 0, 0, 0.85); i { - color: #fff; + color: rgba(0, 0, 0, 0.65); } } @@ -66,13 +67,13 @@ .el-menu-item { i, span { - color: #fff; + color: rgba(0, 0, 0, 0.85); } &:hover { i, span { - color: #fff; + color: var(--el-color-primary); } } } @@ -137,7 +138,7 @@ .top-bar__item { i { - color: #fff; + color: rgba(0, 0, 0, 0.65); } } } diff --git a/src/styles/top.scss b/src/styles/top.scss index 1ed371f..d73f54b 100644 --- a/src/styles/top.scss +++ b/src/styles/top.scss @@ -3,8 +3,8 @@ .avue-top { position: relative; background-color: #fff; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); - color: rgba(0, 0, 0, .65); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + color: rgba(0, 0, 0, 0.85); font-size: 28px; height: variables.$top_height; line-height: variables.$top_height; @@ -20,10 +20,10 @@ .avue-breadcrumb { height: 100%; - color: #fff; + color: rgba(0, 0, 0, 0.65); i { - color: #fff; + color: rgba(0, 0, 0, 0.65); font-size: 30px !important; } @@ -56,7 +56,7 @@ .el-input__wrapper { font-size: 13px; border: none; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); background-color: #fff; border-radius: 4px; } @@ -97,7 +97,7 @@ right: 10px; display: flex; align-items: center; - color: #fff; + color: rgba(0, 0, 0, 0.85); i, .el-icon, @@ -107,7 +107,7 @@ } .el-color-picker__trigger { - border-color: rgba(255, 255, 255, 0.85); + border-color: rgba(0, 0, 0, 0.15); } .el-color-picker__icon { @@ -132,30 +132,31 @@ height: 100%; padding-left: 50px; box-sizing: border-box; - background: var(--el-color-primary); + background: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; - font-weight: 400; + font-weight: 500; + color: rgba(0, 0, 0, 0.85); } .avue-logo { height: variables.$top_height; line-height: variables.$top_height; - background-color: var(--el-color-primary); + background-color: #fff; font-size: 20px; overflow: hidden; box-sizing: border-box; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); - color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); + color: rgba(0, 0, 0, 0.85); &_title { display: block; text-align: center; font-weight: bold; font-size: 20px; - color: #fff; + color: inherit; } &_subtitle { @@ -163,6 +164,6 @@ text-align: center; font-size: 18px; font-weight: bold; - color: #fff; + color: inherit; } }