diff --git a/.workbuddy/memory/2026-07-31.md b/.workbuddy/memory/2026-07-31.md index a589541..ebab83f 100644 --- a/.workbuddy/memory/2026-07-31.md +++ b/.workbuddy/memory/2026-07-31.md @@ -86,3 +86,12 @@ - 按用户提供的两张截图(T 恤默认图标 / 铃铛带圆形背景图标),实现了一个悬停时显示浅灰圆形背景的图标按钮效果。 - 产物: `/Users/gxwebsoft/VUE/tms-erp-web-ws/icon-hover-demo.html`(含 CSS 核心代码与 Element Plus 用法示例)。 + +## 顶栏 T 恤图标悬停效果落地 + +- 用户要求把悬停圆形背景效果运用到顶部状态栏的 T 恤图标(实际指向主题图标位置 ``)。 +- 改动文件: `src/page/index/top/top-theme.vue` + - 模板:将 `` 替换为内联 SVG T 恤(保留 `@click="open"` 打开主题选择弹窗)。 + - 样式:新增 scoped `.top-theme-icon`,`::before` 浅灰圆形背景 `#f2f3f5`,默认 `scale(0.6) opacity(0)`,hover/focus 弹性放大到 `scale(1)`,图标 `z-index:1` 压在上层。 + - 调整:用户反馈 T 恤图标在顶栏中上下不居中,把 `.top-theme-icon` 由 `display:flex; height:100%` 改为 `display:inline-flex; vertical-align:middle; width:32px; height:32px`,使其与右侧头像/用户名在同一水平中线。 + - 注意:该组件受 `website.setting.theme` 控制(之前曾设为 false 隐藏),若顶栏未显示主题图标,需确认 website.js 中 `setting.theme` 为 true。 diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue index ddf427e..6a5c513 100644 --- a/src/page/index/top/index.vue +++ b/src/page/index/top/index.vue @@ -33,7 +33,7 @@
- + {{ userInfo.real_name }} diff --git a/src/page/index/top/top-theme.vue b/src/page/index/top/top-theme.vue index 1e2b93d..097a7fa 100644 --- a/src/page/index/top/top-theme.vue +++ b/src/page/index/top/top-theme.vue @@ -10,8 +10,10 @@ - - + + + +
@@ -116,4 +118,44 @@ export default { .list { width: 100%; } + +.top-theme-icon { + position: relative; + display: inline-flex; + vertical-align: middle; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + cursor: pointer; + color: rgba(0, 0, 0, 0.85); + + &::before { + content: ""; + position: absolute; + inset: 0; + margin: auto; + width: 36px; + height: 36px; + 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; + } + + &:hover::before, + &:focus-visible::before { + transform: scale(1); + opacity: 1; + } + + svg { + position: relative; + z-index: 1; + width: 18px; + height: 18px; + pointer-events: none; + } +} diff --git a/src/styles/theme/d2.scss b/src/styles/theme/d2.scss index c10f15e..e4d31a6 100644 --- a/src/styles/theme/d2.scss +++ b/src/styles/theme/d2.scss @@ -16,7 +16,7 @@ } .avue-main { - //padding: 0 5px; + padding: 0 1px; } .avue-tags { diff --git a/src/styles/top.scss b/src/styles/top.scss index d73f54b..beb2abc 100644 --- a/src/styles/top.scss +++ b/src/styles/top.scss @@ -81,7 +81,6 @@ .top-bar__right { height: variables.$top_height; position: absolute; - margin-top: 2px; top: 0; i { @@ -121,6 +120,7 @@ height: variables.$top_height; margin: 0 7px; font-size: 16px; + top: -2px; .el-badge__content.is-fixed { top: 12px;