fix: adapt contact CTAs for desktop

src/components/CTA.astro

@@ -20,7 +20,7 @@ const {
     </div>
     <div class="cta-panel__actions">
       <a class="button button--white" href={`mailto:${site.contact.email}?subject=塑美俏官网咨询`}>邮件咨询</a>
-      <a class="button button--ghost-light" href="/contact/">联系与合作</a>
+      <a class="button button--ghost-light" href="/contact/" data-contact-trigger>联系与合作</a>
     </div>
   </div>
 </section>

src/components/ContactDialog.astro

+---
+import { site } from "../data/site";
+---
+<dialog class="contact-dialog" data-contact-dialog aria-labelledby="contact-dialog-title">
+  <div class="contact-dialog__panel">
+    <form method="dialog">
+      <button class="contact-dialog__close" type="submit" aria-label="关闭联系我们弹窗">×</button>
+    </form>
+    <div class="eyebrow"><span></span>CONTACT US</div>
+    <h2 id="contact-dialog-title">联系我们</h2>
+    <p class="contact-dialog__intro">{site.contact.intro}</p>
+    <dl class="contact-dialog__details">
+      <div>
+        <dt>合作邮箱</dt>
+        <dd><a href={`mailto:${site.contact.email}?subject=塑美俏官网咨询`}>{site.contact.email}</a></dd>
+      </div>
+      <div>
+        <dt>公司地址</dt>
+        <dd>{site.contact.address}</dd>
+      </div>
+      <div>
+        <dt>官方网站</dt>
+        <dd><a href="https://www.sumeiqiao.com">{site.contact.website}</a></dd>
+      </div>
+    </dl>
+    <div class="contact-dialog__actions">
+      <a class="button" href={`mailto:${site.contact.email}?subject=塑美俏官网咨询`}>发送邮件</a>
+      <a class="text-link" href="/contact/">查看联系页 <span>↗</span></a>
+    </div>
+  </div>
+</dialog>

src/components/Footer.astro

@@ -32,7 +32,7 @@ import { site } from "../data/site";
       <h2>联系与合作</h2>
       <a href={`mailto:${site.contact.email}`}>{site.contact.email}</a>
       <address>{site.contact.address}</address>
-      <a class="footer-arrow" href="/contact/">查找附近门店 / 合作咨询 <span>↗</span></a>
+      <a class="footer-arrow" href="/contact/" data-contact-trigger>查找附近门店 / 合作咨询 <span>↗</span></a>
     </div>
   </div>
   <div class="container footer-bottom">

src/components/Header.astro

@@ -30,13 +30,13 @@ const nav = site.nav.map((item) => item.href === "/articles/"
       <ul>
         {nav.map((item) => (
           <li class="nav-item">
-            <a class="nav-link" href={item.href} aria-current={isActive(item.href) ? "page" : undefined} aria-haspopup="true">
+            <a class="nav-link" href={item.href} aria-current={isActive(item.href) ? "page" : undefined} aria-haspopup="true" data-contact-trigger={item.href === "/contact/" ? "" : undefined}>
               {item.label}<span class="nav-chevron" aria-hidden="true">⌄</span>
             </a>
             <div class="nav-dropdown">
               <ul>
                 {item.children.slice(1).map((child) => (
-                  <li><a href={child.href}>{child.label}<span aria-hidden="true">↗</span></a></li>
+                  <li><a href={child.href} data-contact-trigger={child.href.startsWith("/contact/?intent=join") ? "" : undefined}>{child.label}<span aria-hidden="true">↗</span></a></li>
                 ))}
               </ul>
             </div>
@@ -45,7 +45,7 @@ const nav = site.nav.map((item) => item.href === "/articles/"
       </ul>
     </nav>
 
-    <a class="button button--small header-cta" href="/contact/?intent=join">加盟详情咨询</a>
+    <a class="button button--small header-cta" href="/contact/?intent=join" data-contact-trigger>加盟详情咨询</a>
 
     <details class="mobile-nav">
       <summary aria-label="打开导航菜单">
@@ -54,13 +54,13 @@ const nav = site.nav.map((item) => item.href === "/articles/"
       <nav data-mobile-nav aria-label="移动端导航">
         {nav.map((item) => (
           <div class="mobile-nav__group">
-            <a class="mobile-nav__primary" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a>
+            <a class="mobile-nav__primary" href={item.href} aria-current={isActive(item.href) ? "page" : undefined} data-contact-trigger={item.href === "/contact/" ? "" : undefined}>{item.label}</a>
             <div class="mobile-subnav">
-              {item.children.slice(1).map((child) => <a href={child.href}>{child.label}</a>)}
+              {item.children.slice(1).map((child) => <a href={child.href} data-contact-trigger={child.href.startsWith("/contact/?intent=join") ? "" : undefined}>{child.label}</a>)}
             </div>
           </div>
         ))}
-        <a class="button" href="/contact/?intent=join">加盟详情咨询</a>
+        <a class="button" href="/contact/?intent=join" data-contact-trigger>加盟详情咨询</a>
       </nav>
     </details>
   </div>

src/layouts/Base.astro

 ---
 import "../styles/global.css";
 import logo from "../../横向-绿0013.svg";
+import ContactDialog from "../components/ContactDialog.astro";
 import { site } from "../data/site";
 
 interface Props {
@@ -76,6 +77,7 @@ const allLd = [organizationLd, ...pageLd.filter((item) => Object.keys(item).leng
   <body>
     <a class="skip-link" href="#main-content">跳到主要内容</a>
     <slot />
+    <ContactDialog />
     <script is:inline>
       const header = document.querySelector('[data-header]');
       const syncHeader = () => header?.classList.toggle('is-scrolled', window.scrollY > 16);
@@ -95,6 +97,19 @@ const allLd = [organizationLd, ...pageLd.filter((item) => Object.keys(item).leng
       document.querySelectorAll('[data-mobile-nav] a').forEach((link) => {
         link.addEventListener('click', () => link.closest('details')?.removeAttribute('open'));
       });
+
+      const contactDialog = document.querySelector('[data-contact-dialog]');
+      const isMobileLayout = matchMedia('(max-width: 820px)');
+      document.querySelectorAll('[data-contact-trigger]').forEach((trigger) => {
+        trigger.addEventListener('click', (event) => {
+          if (isMobileLayout.matches || !contactDialog?.showModal) return;
+          event.preventDefault();
+          contactDialog.showModal();
+        });
+      });
+      contactDialog?.addEventListener('click', (event) => {
+        if (event.target === contactDialog) contactDialog.close();
+      });
     </script>
   </body>
 </html>

src/pages/index.astro

@@ -45,7 +45,7 @@ const jsonLd = [
           <h1>中式经络调理，<em>让身体自然轻盈</em></h1>
           <p>{site.home.subhead}</p>
           <div class="hero__actions">
-            <a class="button" href="/contact/?intent=join">加盟详情咨询 <span>↗</span></a>
+            <a class="button" href="/contact/?intent=join" data-contact-trigger>加盟详情咨询 <span>↗</span></a>
             <a class="button button--secondary" href="/contact/?intent=store">查找附近门店</a>
           </div>
           <div class="hero__meta" aria-label="服务特点">

src/styles/global.css

@@ -463,6 +463,46 @@ section[id], .faq-item[id] { scroll-margin-top: 112px; }
 .contact-card a { margin-top: auto; padding-top: 25px; color: var(--primary-dark); font-weight: 600; font-size: 13px; }
 .contact-note { margin-top: 26px; padding: 22px 26px; color: #68736f; background: var(--secondary-light); border-radius: 16px; font-size: 13px; }
 
+.contact-dialog {
+  width: min(620px, calc(100vw - 40px));
+  max-height: calc(100vh - 40px);
+  padding: 0;
+  color: var(--text);
+  background: transparent;
+  border: 0;
+  border-radius: 24px;
+  box-shadow: 0 30px 90px rgba(16, 56, 49, .28);
+  overflow: auto;
+}
+.contact-dialog::backdrop { background: rgba(15, 35, 31, .52); backdrop-filter: blur(4px); }
+.contact-dialog__panel { position: relative; padding: 42px; background: var(--surface); }
+.contact-dialog__close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-content: center;
+  padding: 0 0 2px;
+  color: var(--ink-green);
+  background: var(--secondary-light);
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 25px;
+  line-height: 1;
+}
+.contact-dialog__close:hover, .contact-dialog__close:focus-visible { color: white; background: var(--primary-dark); outline: none; }
+.contact-dialog h2 { margin: 16px 0 10px; color: var(--ink-green); font-size: 36px; font-weight: 600; }
+.contact-dialog__intro { max-width: 500px; margin-bottom: 26px; color: var(--muted); font-size: 14px; }
+.contact-dialog__details { margin: 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
+.contact-dialog__details > div { padding: 15px 18px; display: grid; grid-template-columns: 90px 1fr; gap: 18px; background: #f8fbf9; }
+.contact-dialog__details dt { color: #82908b; font-size: 12px; }
+.contact-dialog__details dd { margin: 0; color: var(--ink-green); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
+.contact-dialog__details a:hover { color: var(--primary-dark); }
+.contact-dialog__actions { margin-top: 28px; display: flex; align-items: center; gap: 24px; }
+
 .not-found { min-height: 72vh; display: grid; place-items: center; text-align: center; }
 .not-found strong { display: block; color: var(--secondary); font-family: Georgia, serif; font-size: 100px; font-weight: 400; line-height: 1; }
 .not-found h1 { margin: 16px 0 10px; color: var(--ink-green); font-family: var(--serif); font-size: 40px; font-weight: 600; }