fix(meeting): 抹除 uni-button ::after 遮罩修复工具栏点击失效
uni-app H5 会给每个 <button> 编译后的 <uni-button> 自动注入一个
::after 伪元素作为点击态反馈遮罩,其 inset 为 0 -1200px -80px 0
(即 2400px × 160px),向按钮右侧扩展 1200px,下方扩展 80px。
这导致会议工具栏(MeetingToolbar)里每个按钮的 ::after 都横跨整个
toolbar,最后一个"离开"按钮 DOM 顺序最上,其 ::after 覆盖了所有
兄弟按钮的命中区域:点击"静音/视频/邀请/成员/聊天"时实际都命中
"离开"按钮的 ::after,触发离开弹窗;且弹窗中的"取消"按钮同样被
右侧"结束会议"按钮的 ::after 遮挡,点击取消反而会触发结束会议。
修复:在 .btn 和 .leave-btn 上显式设置 ::after { content: none;
display: none },并把按钮设为 position: relative 固化堆叠上下文。
验证:Playwright 真实点击各按钮 hitSelf=true,取消按钮不再
错误触发结束会议逻辑。
Made-with: Cursor
This commit is contained in:
@@ -142,6 +142,15 @@ const emitIf = (name) => {
|
||||
border-radius: 16rpx;
|
||||
transition: background-color 0.15s ease, transform 0.1s ease;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
position: relative;
|
||||
}
|
||||
/* 关键修复:uni-app H5 会为 <button> 编译后的 <uni-button> 自动注入一个
|
||||
伪元素 ::after(尺寸约 2400rpx × 160rpx,向右下延伸),
|
||||
作为点击态反馈遮罩;若不抹除,会覆盖右侧所有兄弟按钮,
|
||||
导致除最后一个按钮外其他按钮都"点不到"。 */
|
||||
.btn::after {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
.btn:hover { background: rgba(255, 255, 255, 0.06); }
|
||||
.btn:active { transform: translateY(1rpx); }
|
||||
|
||||
@@ -548,7 +548,10 @@ onUnload(() => {
|
||||
flex-direction: column;
|
||||
background: #0F172A;
|
||||
color: #F3F4F6;
|
||||
z-index: 10;
|
||||
/* 必须高于 CustomTabBar(z-index:999),否则从带 tabBar 的页面
|
||||
navigateTo 进会议室后,上一页遗留的 tabBar 会悬浮覆盖 toolbar
|
||||
导致静音/摄像头/邀请/成员/聊天按钮全部被拦截 */
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
@@ -721,6 +724,14 @@ onUnload(() => {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.12s ease;
|
||||
position: relative;
|
||||
}
|
||||
/* 同样抹除 uni-app H5 自动注入的 ::after 遮罩(inset: 0 -1200px -80px 0),
|
||||
否则 cancel 按钮的 ::after 会覆盖到右侧确认按钮区域,
|
||||
导致点击 "取消" 命中 "结束会议" 逻辑。 */
|
||||
.leave-btn::after {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
.leave-cancel {
|
||||
background: #F3F4F6;
|
||||
|
||||
Reference in New Issue
Block a user