feat(site): 导航登录态下拉菜单 + 个人信息/退出登录页，登录不再直跳 App
- 导航「进入系统 · 名字」改为下拉：个人信息 / 进入系统 / 退出登录，导航可重入刷新（window.jiuNavRender） - 新增 /profile/（账号 / 门店 / 授权三卡，authFetch 实时拉取）与 /logout/（撤销会话 + 清本地凭证） - 登录成功默认落地 /profile/（?next= 站内白名单不变），不再直跳 /app/ - auth.js 增加 jiuAuth.clear()；site.css 含本轮下拉 / profile / 特惠卡样式 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JJ1g8XV1YhhmHRzhwWEW7o
This commit is contained in:
wangjia
+37
-2
@@ -64,6 +64,16 @@ h1,h2,h3{color:var(--heading); line-height:1.3; margin:0;}
|
||||
.nav-mobile{display:none; border-top:1px solid var(--border); background:var(--surface); padding:10px 24px 16px;}
|
||||
.nav-mobile a{display:block; padding:10px 0; color:var(--text); font-size:15px; border-bottom:1px solid var(--border-subtle); text-decoration:none !important;}
|
||||
.nav-mobile.open{display:block;}
|
||||
.nav-user{position:relative;}
|
||||
.nav-user-btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer;}
|
||||
.nav-user-btn svg{width:13px; height:13px; transition:transform .15s;}
|
||||
.nav-user.open .nav-user-btn svg{transform:rotate(180deg);}
|
||||
.nav-menu{display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:158px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:6px; z-index:50;}
|
||||
.nav-user.open .nav-menu{display:block;}
|
||||
.nav-menu a{display:block; padding:9px 12px; border-radius:var(--r-sm); font-size:14px; color:var(--text); text-decoration:none !important;}
|
||||
.nav-menu a:hover{background:var(--bg);}
|
||||
.nav-menu a.danger{color:var(--danger);}
|
||||
.nav-menu .sep{height:1px; background:var(--border-subtle); margin:5px 4px;}
|
||||
|
||||
/* ---------- Hero（品牌渐变 = 登录页品牌面板同源） ---------- */
|
||||
.hero{background:var(--mk-hero-grad); color:var(--on-accent); padding:84px 0 0; overflow:hidden;}
|
||||
@@ -129,6 +139,14 @@ table.roles .n{color:var(--faint);}
|
||||
.plans.p4{grid-template-columns:repeat(4,1fr); gap:16px;}
|
||||
.plans.p4 .plan{padding:26px 22px;}
|
||||
.plans.p4 .plan .price{font-size:30px;}
|
||||
.plans.p5{grid-template-columns:repeat(5,1fr); gap:14px;}
|
||||
.plans.p5 .plan{padding:24px 18px;}
|
||||
.plans.p5 .plan .price{font-size:28px;}
|
||||
.plan.promo{border-color:var(--warn); box-shadow:var(--sh-2); position:relative; background:linear-gradient(180deg,var(--warn-bg),var(--surface) 55%);}
|
||||
.plan.promo::before{content:'🔥 新店专享'; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--warn); color:#fff; font-size:var(--fs-xs); font-weight:700; padding:3px 12px; border-radius:var(--r-pill); white-space:nowrap;}
|
||||
.plan.promo .price{color:var(--warn);}
|
||||
.plan .price .was{font-size:14px; color:var(--faint); font-weight:400; text-decoration:line-through; font-family:var(--font); margin-left:6px;}
|
||||
.plan .btn.disabled{pointer-events:none; opacity:.55;}
|
||||
.plan{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 26px; display:flex; flex-direction:column;}
|
||||
.plan.hot{border-color:var(--primary); box-shadow:var(--sh-2); position:relative;}
|
||||
.plan.hot::before{content:'推荐'; position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--primary); color:var(--on-primary); font-size:var(--fs-xs); font-weight:700; padding:3px 12px; border-radius:var(--r-pill);}
|
||||
@@ -169,12 +187,12 @@ table.roles .n{color:var(--faint);}
|
||||
/* ---------- 响应式 ---------- */
|
||||
@media (max-width:1024px){
|
||||
.grid.c4{grid-template-columns:repeat(2,1fr);}
|
||||
.plans,.plans.p4{grid-template-columns:repeat(2,1fr);}
|
||||
.plans,.plans.p4,.plans.p5{grid-template-columns:repeat(2,1fr);}
|
||||
.split{grid-template-columns:1fr;}
|
||||
.footer-grid{grid-template-columns:1fr 1fr;}
|
||||
}
|
||||
@media (max-width:640px){
|
||||
.plans,.plans.p4{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
|
||||
.plans,.plans.p4,.plans.p5{grid-template-columns:1fr; max-width:440px; margin:0 auto;}
|
||||
}
|
||||
@media (max-width:720px){
|
||||
.nav-links,.nav-cta .btn.ghost{display:none;}
|
||||
@@ -248,6 +266,11 @@ textarea.input{height:auto; min-height:64px; padding:9px 11px; resize:vertical;}
|
||||
.seg-btn{border:none; background:transparent; padding:8px 18px; border-radius:calc(var(--r-md) - 3px); font-size:var(--fs-body); color:var(--muted); cursor:pointer; font-family:var(--font); display:inline-flex; align-items:center; gap:7px;}
|
||||
.seg-btn.on{background:var(--surface); color:var(--heading); font-weight:600; box-shadow:var(--sh-1);}
|
||||
.seg-tip{font-size:var(--fs-xs); color:var(--success); background:var(--ok-soft); padding:1px 8px; border-radius:var(--r-pill); font-weight:600;}
|
||||
.seg-btn.promo{color:var(--warn); font-weight:700;}
|
||||
.seg-btn.promo.on{color:var(--warn);}
|
||||
.seg-btn.used,.seg-btn:disabled{color:var(--faint); font-weight:400; cursor:not-allowed; opacity:.7;}
|
||||
.promo-banner{background:var(--warn-bg); border:1px solid var(--warn); border-radius:var(--r-md); padding:12px 14px; font-size:var(--fs-sm); color:var(--text); margin:10px 0 4px; line-height:1.7;}
|
||||
.promo-banner b{display:block; color:var(--warn); font-size:var(--fs-body);}
|
||||
.seg-label{font-size:var(--fs-sm); color:var(--muted); margin:14px 0 8px;}
|
||||
.co-feats{list-style:none; padding:0; margin:12px 0 4px; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--text);}
|
||||
.co-feats li{display:flex; gap:8px; align-items:flex-start;}
|
||||
@@ -281,6 +304,18 @@ textarea.input{height:auto; min-height:64px; padding:9px 11px; resize:vertical;}
|
||||
.sum-total .val{font-size:var(--fs-display); font-weight:800; color:var(--primary); font-family:var(--font-mono); letter-spacing:-.5px;}
|
||||
.co-summary .fine{font-size:var(--fs-xs); color:var(--faint); text-align:center; margin-top:12px; line-height:1.6;}
|
||||
|
||||
/* ---------- 个人信息（/profile/） ---------- */
|
||||
.pf-row{display:flex; justify-content:space-between; gap:16px; padding:9px 0; font-size:var(--fs-body); border-bottom:1px solid var(--border-subtle);}
|
||||
.pf-row:last-child{border-bottom:none; padding-bottom:2px;}
|
||||
.pf-row .k{color:var(--muted); flex:none;}
|
||||
.pf-row .v{color:var(--heading); font-weight:500; text-align:right; word-break:break-all;}
|
||||
.pf-row .v.mono{font-family:var(--font-mono);}
|
||||
.pf-badge{display:inline-flex; padding:2px 10px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600;}
|
||||
.pf-badge.ok{background:var(--ok-soft); color:var(--success);}
|
||||
.pf-badge.warn{background:var(--warn-bg); color:var(--warn);}
|
||||
.pf-badge.bad{background:var(--danger-bg); color:var(--danger);}
|
||||
.pf-acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
|
||||
|
||||
/* ---------- 支付结果页 ---------- */
|
||||
.result{text-align:center; max-width:520px; margin:0 auto; padding:24px 16px;}
|
||||
.result .ring{width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
|
||||
|
||||
Reference in New Issue
Block a user