提交 a19fdbb2 authored 作者: 陈泽健's avatar 陈泽健

fix(service-monitor): toggle 开关点击无响应修复

toggle-slider 的 pointer-events 默认为 auto,遮挡了
label 的点击传递。修复:
- slider 和 slider:before 加 pointer-events: none
- toggle-switch 加 cursor: pointer
- input 加 position: absolute

点击现在穿透 slider 到达 label,再由 label
传递到内部 checkbox input,toggle 正常工作。
Co-Authored-By: 's avatarClaude <noreply@anthropic.com>
上级 a7f7e175
......@@ -17,10 +17,10 @@
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: 14px; color: var(--gray-700); }
.toggle-switch { position: relative; width: 48px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--gray-300); border-radius: 13px; transition: .2s; }
.toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle-switch { position: relative; width: 48px; height: 26px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--gray-300); border-radius: 13px; transition: .2s; pointer-events: none; }
.toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s; pointer-events: none; }
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }
.btn-test { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论