XiaChangSong/BPOS-TMP-REPO
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

活动模块二次确认瘦身成轻气泡(2026-08-26 用户定):只问一句+确认/取消,不摆影响三必答;本地 PopAsk 组件替代共享 AskBand,L2 禁用/激活与 L3 终止同用

Browse Source
This commit is contained in:
shanqin
2026-08-26 20:41:47 +08:00
parent 237286e908
commit 8139948c28
3 changed files with 120 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/styles/console.css
+13 -16
View File
@@ -709,30 +709,27 @@
.g-actid .g-dh .chips > * { animation: none; }
}
/* ══ 二次确认改气泡弹层(2026-08-26 用户定:不要瘫在 box 下方的确认带)══
锚在页头右下、小三角指回触发钮;三必答从三栏收成竖排三行;
阴影只给弹层(§10),危险确认沿用非实心 danger 钮(§11),进场 180ms 从触发点展开(§13) */
/* 注意:`.g-actvd/.g-actid > *` 的入场动画 forwards 填充会让每个区块长期保持独立层叠上下文,
气泡的 z-index 只在页头内部作数 —— 所以页头容器自己要有正 z-index,气泡才盖得住后面的区块 */
.g-actvd .g-dhwrap, .g-actid .g-dhwrap { position: relative; z-index: 30; }
.g-actvd .g-ask, .g-actid .g-ask { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
width: 372px; padding: 13px 15px 12px; gap: 10px;
/* ══ 二次确认·轻气泡(2026-08-26 用户定:只问一句 + 确认/取消,不摆影响三必答)══
锚在页头右下、小三角指回触发钮;点气泡外的透明罩即取消;
阴影只给弹层(§10),确认钮 danger 非实心(§11),进场 180ms 从触发点展开(§13) */
/* 正 z-index 必须有:`.g-actvd/.g-actid > *` 的入场动画 forwards 填充会让每个区块长期保持独立层叠上下文,
没有它,气泡的 z-index 只在页头内部作数,盖不住后面的区块 */
.g-actvd .g-pahead, .g-actid .g-pahead { position: relative; z-index: 30; }
.g-actvd .g-popask-veil, .g-actid .g-popask-veil { position: fixed; inset: 0; z-index: 39; }
.g-actvd .g-popask, .g-actid .g-popask { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
width: 264px; padding: 13px 14px 12px; background: #fff;
border: 1px solid var(--tone-line, var(--cline)); border-radius: 12px;
box-shadow: 0 12px 32px rgba(22, 26, 34, .14), 0 2px 8px rgba(22, 26, 34, .08);
animation: actvd-ask .18s cubic-bezier(.3, 0, .2, 1) both; transform-origin: top right; }
@keyframes actvd-ask { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
/* 小三角:指回右上方的触发钮(左/上两条边旋转 45° 拼出) */
.g-actvd .g-ask::before, .g-actid .g-ask::before { content: ""; position: absolute; top: -6px; right: 60px;
.g-actvd .g-popask::before, .g-actid .g-popask::before { content: ""; position: absolute; top: -6px; right: 60px;
width: 10px; height: 10px; background: #fff; transform: rotate(45deg);
border-left: 1px solid var(--tone-line, var(--cline)); border-top: 1px solid var(--tone-line, var(--cline)); }
/* 三必答竖排:标签定宽左、内容右,气泡窄也读得顺 */
.g-actvd .g-impact, .g-actid .g-impact { grid-template-columns: 1fr; border-radius: 8px; }
.g-actvd .g-impact > div, .g-actid .g-impact > div { flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 10px; }
.g-actvd .g-impact em, .g-actid .g-impact em { flex: none; width: 52px; }
.g-actvd .g-impact b, .g-actid .g-impact b { font-weight: 500; }
.g-actvd .g-ask-a .g-btn, .g-actid .g-ask-a .g-btn { height: 28px; }
.g-actvd .g-popask p, .g-actid .g-popask p { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.g-actvd .g-popask-a, .g-actid .g-popask-a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
.g-actvd .g-ask, .g-actid .g-ask { animation: none; }
.g-actvd .g-popask, .g-actid .g-popask { animation: none; }
}
.g-fcard .mbtn { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-4); cursor: pointer; }
.g-fcard .mbtn:hover, .g-fcard .mbtn.on { border-color: var(--cline); background: #f3f6fa; color: var(--ink); }