Browse Source

feat(header): 添加微信社交按钮及其弹出提示

- 将微信社交链接更改为可点击的按钮,增强可访问性
- 添加微信二维码弹出提示,改善用户体验
- 更新相关CSS样式以支持新功能
master
peijunlei 2 weeks ago
parent
commit
aa38d23efe
  1. 75
      public/themes/dist_static/static/css/common.css
  2. 8
      public/themes/website/1/en/demo/components/header.html
  3. 14
      public/themes/website/1/zh/demo/components/header.html

75
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;

8
public/themes/website/1/en/demo/components/header.html

@ -39,7 +39,7 @@
<span>{hcTaglib:setting name="company_phone" type="1" /}</span>
</a>
<div class="site-header__socials" aria-label="社交账号">
<a class="site-header__social" href="#" aria-label="微信">
<span class="site-header__social site-header__social--wechat" tabindex="0" aria-label="微信" role="button">
<span class="site-header__icon" aria-hidden="true">
<svg
viewBox="0 0 16 16"
@ -58,7 +58,11 @@
/>
</svg>
</span>
</a>
<span class="site-header__wechat-pop" role="tooltip">
<img src="{hcTaglib:setting name='wechat_code' type='2' /}" alt="官方微信" width="120" height="120" />
<span>官方微信</span>
</span>
</span>
<a class="site-header__social" href="#" aria-label="抖音">
<span class="site-header__icon" aria-hidden="true">
<svg

14
public/themes/website/1/zh/demo/components/header.html

@ -39,7 +39,7 @@
<span>{hcTaglib:setting name="company_phone" type="1" /}</span>
</a>
<div class="site-header__socials" aria-label="社交账号">
<a class="site-header__social" href="#" aria-label="微信">
<span class="site-header__social site-header__social--wechat" tabindex="0" aria-label="微信" role="button">
<span class="site-header__icon" aria-hidden="true">
<svg
viewBox="0 0 16 16"
@ -58,8 +58,12 @@
/>
</svg>
</span>
</a>
<a class="site-header__social" href="#" aria-label="抖音">
<span class="site-header__wechat-pop" role="tooltip">
<img src="{hcTaglib:setting name='wechat_code' type='2' /}" alt="官方微信" width="120" height="120" />
<span>官方微信</span>
</span>
</span>
<a class="site-header__social" href="https://v.douyin.com/y7mvLjAkdJ4/" aria-label="抖音" target="_blank">
<span class="site-header__icon" aria-hidden="true">
<svg
viewBox="0 0 16 16"
@ -79,7 +83,7 @@
</svg>
</span>
</a>
<a class="site-header__social" href="#" aria-label="微博">
<a class="site-header__social" href="https://weibo.com/u/78123456789012345678" aria-label="微博" target="_blank">
<span class="site-header__icon" aria-hidden="true">
<svg
viewBox="0 0 16 16"
@ -99,7 +103,7 @@
</svg>
</span>
</a>
<a class="site-header__social" href="#" aria-label="知乎">
<a class="site-header__social" href="https://www.zhihu.com/people/78123456789012345678" aria-label="知乎" target="_blank">
<span class="site-header__icon" aria-hidden="true">
<svg
viewBox="0 0 16 16"

Loading…
Cancel
Save