Commit e5f96e5f authored by tao355667's avatar tao355667

feat: add floating contact actions

parent cc542d1a
Pipeline #466 canceled with stage
---
import { site } from "../data/site";
---
<dialog class="contact-dialog contact-dialog--form" data-contact-dialog aria-labelledby="contact-dialog-title"> <dialog class="contact-dialog contact-dialog--form" data-contact-dialog aria-labelledby="contact-dialog-title">
<div class="contact-dialog__panel"> <div class="contact-dialog__panel">
<button class="contact-dialog__close" type="button" data-contact-dialog-close aria-label="关闭领取弹窗">×</button> <button class="contact-dialog__close" type="button" data-contact-dialog-close aria-label="关闭领取弹窗">×</button>
<div class="contact-dialog__heading"> <div class="contact-dialog__heading">
<h2 id="contact-dialog-title">免费领取学情分析</h2> <h2 id="contact-dialog-title">免费领取 1对1 专属学情深度分析</h2>
<p>留下手机号,教务老师会尽快与您沟通孩子的年级、学科和当前学习情况。</p> <p>留下手机号,教务主任会尽快沟通孩子情况,也可添加教务主任微信。</p>
</div> </div>
<form class="consultation-form" data-consultation-form> <form class="consultation-form" data-consultation-form>
<label for="consultation-phone">家长手机号</label> <label for="consultation-phone">家长手机号</label>
...@@ -15,16 +18,33 @@ ...@@ -15,16 +18,33 @@
</div> </div>
</dialog> </dialog>
<dialog class="contact-dialog contact-dialog--phone" data-phone-dialog aria-labelledby="phone-dialog-title">
<div class="contact-dialog__panel">
<button class="contact-dialog__close" type="button" data-phone-dialog-close aria-label="关闭官方电话信息">×</button>
<div class="phone-dialog__heading">
<span>OFFICIAL CONTACT</span>
<h2 id="phone-dialog-title">官方电话</h2>
<p>课程咨询、教师匹配与服务安排,欢迎致电了解。</p>
</div>
<a class="phone-dialog__number" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a>
<div class="phone-dialog__details">
<span>服务时间:周一至周日 · 7×24 小时</span>
<a href={`mailto:${site.contact.email}`}>{site.contact.email}</a>
</div>
<a class="phone-dialog__call" href={`tel:${site.contact.phone}`}>立即拨打</a>
</div>
</dialog>
<dialog class="contact-dialog contact-dialog--teacher" data-teacher-dialog aria-labelledby="teacher-dialog-title"> <dialog class="contact-dialog contact-dialog--teacher" data-teacher-dialog aria-labelledby="teacher-dialog-title">
<div class="contact-dialog__panel"> <div class="contact-dialog__panel">
<button class="contact-dialog__close" type="button" data-teacher-dialog-close aria-label="关闭客服微信弹窗">×</button> <button class="contact-dialog__close" type="button" data-teacher-dialog-close aria-label="关闭教务主任微信弹窗">×</button>
<div class="teacher-dialog__heading"> <div class="teacher-dialog__heading">
<h2 id="teacher-dialog-title">添加客服微信</h2> <h2 id="teacher-dialog-title">添加教务主任微信</h2>
<p>手机号已提交,客服稍后会与您联系。您也可以扫码添加客服微信。</p> <p>手机号已提交,教务主任稍后会与您联系,也可扫码添加教务主任微信。</p>
</div> </div>
<div class="teacher-contact"> <div class="teacher-contact">
<div class="teacher-contact__identity"><strong data-teacher-name></strong><span data-teacher-title></span></div> <div class="teacher-contact__identity"><strong data-teacher-name></strong><span data-teacher-title></span></div>
<img data-teacher-qr alt="客服微信二维码" /> <img data-teacher-qr alt="教务主任微信二维码" />
<p class="teacher-wechat" data-teacher-wechat-wrap>微信号:<strong data-teacher-wechat></strong><button type="button" data-copy-teacher-wechat>复制</button></p> <p class="teacher-wechat" data-teacher-wechat-wrap>微信号:<strong data-teacher-wechat></strong><button type="button" data-copy-teacher-wechat>复制</button></p>
</div> </div>
</div> </div>
......
This diff is collapsed.
...@@ -131,6 +131,12 @@ ...@@ -131,6 +131,12 @@
.contact-hero .breadcrumb,.contact-hero .breadcrumb a{color:rgba(255,255,255,.86)} .contact-hero .breadcrumb,.contact-hero .breadcrumb a{color:rgba(255,255,255,.86)}
.contact-hero .breadcrumb a:hover{color:#fff} .contact-hero .breadcrumb a:hover{color:#fff}
/* 固定咨询入口:让在线咨询始终保持在页面可操作范围内。 */
.floating-consultation{position:fixed;right:24px;bottom:24px;z-index:90;display:inline-flex;width:198px;height:62px;align-items:center;justify-content:center;gap:11px;padding:0 22px;border:0;border-radius:32px;color:#fff;background:#1d2b49;box-shadow:0 12px 26px rgba(20,37,68,.2);cursor:pointer;font-size:20px;font-weight:700;letter-spacing:.02em;transition:transform .2s,box-shadow .2s,background .2s}.floating-consultation svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.floating-consultation:hover{background:#14213a;box-shadow:0 16px 30px rgba(20,37,68,.27);transform:translateY(-2px)}.floating-consultation:focus-visible{outline:3px solid rgba(20,115,230,.42);outline-offset:4px}.floating-consultation i{position:absolute;top:-7px;right:-4px;display:grid;width:28px;height:28px;place-items:center;border-radius:50%;color:#fff;background:#ff4f5d;font-size:14px;font-style:normal;font-weight:700;box-shadow:0 2px 6px rgba(255,79,93,.22)}
.floating-phone{position:fixed;right:24px;bottom:98px;z-index:90;display:inline-flex;width:198px;height:62px;align-items:center;justify-content:center;gap:11px;padding:0 22px;border:0;border-radius:32px;color:#fff;background:#ff7900;box-shadow:0 12px 26px rgba(204,92,0,.2);font-size:20px;font-weight:700;letter-spacing:.02em;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}.floating-phone svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.floating-phone:hover{background:#e86d00;box-shadow:0 16px 30px rgba(204,92,0,.27);transform:translateY(-2px)}.floating-phone:focus-visible{outline:3px solid rgba(255,121,0,.35);outline-offset:4px}
.contact-dialog--phone{width:min(440px,calc(100% - 28px))}.contact-dialog--phone .contact-dialog__panel{padding:32px 34px 28px}.phone-dialog__heading>span{display:block;margin-bottom:8px;color:#e86d00;font-size:10px;font-weight:800;letter-spacing:.16em}.phone-dialog__heading h2{margin:0 0 8px;color:#1e3248;font-size:29px}.phone-dialog__heading p{margin:0;color:#66798a;font-size:14px;line-height:1.7}.phone-dialog__number{display:block;margin:24px 0 18px;color:#1e3248;font-size:30px;font-weight:750;letter-spacing:.04em}.phone-dialog__details{display:grid;gap:5px;padding:14px 0;border-top:1px solid #e2eaf0;border-bottom:1px solid #e2eaf0;color:#718393;font-size:12px;line-height:1.6}.phone-dialog__details a{color:var(--brand-blue)}.phone-dialog__call{display:flex;min-height:44px;margin-top:20px;align-items:center;justify-content:center;border-radius:9px;color:#fff;background:#ff7900;font-size:14px;font-weight:700;transition:background .2s,transform .2s}.phone-dialog__call:hover{background:#e86d00;transform:translateY(-1px)}
@media(max-width:760px){.floating-phone{right:16px;bottom:150px;width:148px;height:56px;gap:9px;padding:0 18px;font-size:18px}.floating-phone svg{width:23px;height:23px}.floating-consultation{right:16px;bottom:84px;width:148px;height:56px;gap:9px;padding:0 18px;font-size:18px}.floating-consultation svg{width:23px;height:23px}.floating-consultation i{top:-6px;right:-3px;width:26px;height:26px;font-size:13px}}
@media(max-width:1080px){ @media(max-width:1080px){
.subject-stage-grid article{min-height:365px} .subject-stage-grid article{min-height:365px}
.about-brand-layout{gap:48px} .about-brand-layout{gap:48px}
......
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