Commit 84a1fbdf authored by xuchentao's avatar xuchentao

fix: 公告栏横幅改为页面上方流式布局,不再遮挡导航

parent ec99279b
...@@ -4,17 +4,20 @@ import home from "../data/home.json"; ...@@ -4,17 +4,20 @@ import home from "../data/home.json";
import design from "../data/design.json"; import design from "../data/design.json";
const showAnnouncement = design.layout.announcementBar && home.announcement; const showAnnouncement = design.layout.announcementBar && home.announcement;
--- ---
{showAnnouncement && <div class="announcement-bar"><div class="container">{home.announcement}</div></div>} <div class="masthead">
<header class="header"> {showAnnouncement && <div class="announcement-bar"><div class="container">{home.announcement}</div></div>}
<div class="container nav"> <header class="header">
<a class="brand" href="#top"><span class="brand-mark">W</span><span>{company.name}</span></a> <div class="container nav">
<nav><a href="#about">关于我们</a><a href="#services">服务能力</a><a href="#advantages">企业优势</a><a href="articles/">文章</a></nav> <a class="brand" href="#top"><span class="brand-mark">W</span><span>{company.name}</span></a>
<a class="nav-action" href="#contact">联系合作 <span>↗</span></a> <nav><a href="#about">关于我们</a><a href="#services">服务能力</a><a href="#advantages">企业优势</a><a href="articles/">文章</a></nav>
</div> <a class="nav-action" href="#contact">联系合作 <span>↗</span></a>
</header> </div>
</header>
</div>
<style> <style>
.masthead { position: relative; z-index: 21; }
.announcement-bar { position: relative; z-index: 21; padding: 9px 0; color: white; background: var(--color-primary-dark); font-size: 13px; font-weight: 600; text-align: center; letter-spacing: .02em; } .announcement-bar { position: relative; z-index: 21; padding: 9px 0; color: white; background: var(--color-primary-dark); font-size: 13px; font-weight: 600; text-align: center; letter-spacing: .02em; }
.header { position: absolute; z-index: 20; width: 100%; top: 0; } .header { position: absolute; z-index: 20; width: 100%; top: 100%; }
.nav { height: 88px; display: flex; align-items: center; justify-content: space-between; } .nav { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; } .brand { display: flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: white; background: var(--gradient-primary); box-shadow: 0 8px 22px rgba(112,40,255,.28); } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: white; background: var(--gradient-primary); box-shadow: 0 8px 22px rgba(112,40,255,.28); }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment