From aa38d23efe8300ab5485e69165abd3c96966ad38 Mon Sep 17 00:00:00 2001 From: peijunlei Date: Sat, 5 Sep 2026 17:04:19 +0800 Subject: [PATCH] =?UTF-8?q?feat(header):=20=E6=B7=BB=E5=8A=A0=E5=BE=AE?= =?UTF-8?q?=E4=BF=A1=E7=A4=BE=E4=BA=A4=E6=8C=89=E9=92=AE=E5=8F=8A=E5=85=B6?= =?UTF-8?q?=E5=BC=B9=E5=87=BA=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将微信社交链接更改为可点击的按钮，增强可访问性 - 添加微信二维码弹出提示，改善用户体验 - 更新相关CSS样式以支持新功能 --- public/themes/dist_static/static/css/common.css | 75 +++++++++++++++++++++- .../website/1/en/demo/components/header.html | 8 ++- .../website/1/zh/demo/components/header.html | 14 ++-- 3 files changed, 88 insertions(+), 9 deletions(-) diff --git a/public/themes/dist_static/static/css/common.css b/public/themes/dist_static/static/css/common.css index c478df3..cb67935 100644 --- a/public/themes/dist_static/static/css/common.css +++ b/public/themes/dist_static/static/css/common.css @@ -1058,9 +1058,9 @@ body { height: var(--header-t-h); max-height: var(--header-t-h); padding: 0 3.125rem; - overflow: hidden; + overflow: visible; position: relative; - z-index: 2; + z-index: 5; transition: max-height var(--duration-normal) var(--easing), height var(--duration-normal) var(--easing), padding var(--duration-normal) var(--easing), opacity var(--duration-fast) var(--easing); }.site-header__main { display: grid; @@ -1182,6 +1182,76 @@ body { height: 1rem; flex-shrink: 0; color: inherit; + text-decoration: none; +} +.site-header__social--wechat { + position: relative; + cursor: pointer; + outline: none; +} +.site-header__wechat-pop { + position: absolute; + top: calc(100% + 0.75rem); + left: 50%; + z-index: 999; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + width: 8.5rem; + padding: 0.75rem; + border-radius: 0.5rem; + background: #fff; + box-shadow: 0 0.5rem 1.5rem rgba(46, 53, 58, 0.16); + color: var(--color-text); + opacity: 0; + visibility: hidden; + pointer-events: none; + transform: translateX(-50%) translateY(0.25rem); + transition: opacity var(--duration-fast) var(--easing), visibility var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing); +} +.site-header__wechat-pop::before { + content: ""; + position: absolute; + top: -0.375rem; + left: 50%; + width: 0.75rem; + height: 0.75rem; + background: #fff; + transform: translateX(-50%) rotate(45deg); + box-shadow: -2px -2px 4px rgba(46, 53, 58, 0.04); +} +.site-header__wechat-pop::after { + content: ""; + position: absolute; + top: -0.75rem; + left: 0; + right: 0; + height: 0.75rem; +} +.site-header__wechat-pop img { + position: relative; + z-index: 1; + display: block; + width: 7rem; + height: 7rem; + object-fit: contain; +} +.site-header__wechat-pop > span { + position: relative; + z-index: 1; + font-family: "MiSans VF", "PingFang SC", sans-serif; + font-size: var(--font-12, 0.75rem); + line-height: 1.2; + color: var(--color-text-muted, #666); + white-space: nowrap; +} +.site-header__social--wechat:hover .site-header__wechat-pop, +.site-header__social--wechat:focus-within .site-header__wechat-pop { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translateX(-50%) translateY(0); }.site-header__lang { display: flex; align-items: center; @@ -1276,6 +1346,7 @@ body { padding-top: 0; padding-bottom: 0; opacity: 0; + overflow: hidden; pointer-events: none; }.site-header.is-scrolled .site-header__main { border-top-color: transparent; diff --git a/public/themes/website/1/en/demo/components/header.html b/public/themes/website/1/en/demo/components/header.html index 6d7fe27..bedc3bf 100644 --- a/public/themes/website/1/en/demo/components/header.html +++ b/public/themes/website/1/en/demo/components/header.html @@ -39,7 +39,7 @@ {hcTaglib:setting name="company_phone" type="1" /}
- + + 官方微信 + 官方微信 + +
- - - -