/** v2 弹层:毛玻璃 + 发丝线 + 苹果级缓动 **/ .ov-root { position: fixed; inset: 0; z-index: 80; } .scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ovFade .28s cubic-bezier(.32, .72, 0, 1) both; } @keyframes ovFade { from { opacity: 0; } to { opacity: 1; } } .ov-press { opacity: .6; } /* Modal */ .modal-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 68rpx; pointer-events: none; } .modal { width: 100%; max-width: 576rpx; border-radius: var(--r-sheet, 40rpx); overflow: hidden; pointer-events: auto; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border: 1rpx solid rgba(255, 255, 255, .7); box-shadow: 0 48rpx 120rpx -36rpx rgba(0, 0, 0, .32); animation: ovModalIn .42s cubic-bezier(.32, .72, 0, 1) both; } @keyframes ovModalIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } .modal-body { padding: 44rpx 40rpx 36rpx; text-align: center; } .modal-title { font-family: var(--serif, serif); font-size: 36rpx; font-weight: 500; letter-spacing: -.005em; color: var(--ink, #0A0A0A); } .modal-text { margin-top: 16rpx; font-size: 26rpx; line-height: 1.6; color: var(--ink-2, #6E6E73); } .modal-acts { display: flex; border-top: 1rpx solid var(--hairline, rgba(0, 0, 0, .08)); } .modal-act { flex: 1; height: 96rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; color: var(--ink-2, #6E6E73); transition: background .16s cubic-bezier(.32, .72, 0, 1); } .modal-act + .modal-act { border-left: 1rpx solid var(--hairline, rgba(0, 0, 0, .08)); } .modal-act--main { color: var(--ink, #0A0A0A); font-weight: 600; } /* ActionSheet */ .as-wrap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 0 16rpx calc(16rpx + env(safe-area-inset-bottom)); } .as-card { border-radius: 28rpx; overflow: hidden; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border: 1rpx solid rgba(255, 255, 255, .7); box-shadow: 0 -20rpx 80rpx -36rpx rgba(0, 0, 0, .3); animation: ovAsIn .4s cubic-bezier(.32, .72, 0, 1) both; } @keyframes ovAsIn { from { opacity: 0; transform: translateY(24rpx); } to { opacity: 1; transform: none; } } .as-hd { padding: 26rpx 32rpx; text-align: center; font-size: 25rpx; color: var(--ink-3, #AEAEB2); border-bottom: 1rpx solid var(--hairline, rgba(0, 0, 0, .08)); } .as-item { height: 104rpx; line-height: 104rpx; text-align: center; font-size: 34rpx; color: var(--ink, #0A0A0A); border-bottom: 1rpx solid var(--hairline, rgba(0, 0, 0, .08)); transition: background .16s cubic-bezier(.32, .72, 0, 1); } .as-item:last-child { border-bottom: 0; } .as-cancel { margin-top: 16rpx; height: 104rpx; line-height: 104rpx; text-align: center; font-size: 34rpx; font-weight: 600; color: var(--ink, #0A0A0A); border-radius: 28rpx; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border: 1rpx solid rgba(255, 255, 255, .7); } /* Toast */ .toast-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .toast { max-width: 460rpx; padding: 26rpx 40rpx; border-radius: 28rpx; background: rgba(28, 28, 30, .82); color: #fff; font-size: 27rpx; line-height: 1.5; text-align: center; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 36rpx 88rpx -32rpx rgba(0, 0, 0, .5); animation: ovToastIn .34s cubic-bezier(.32, .72, 0, 1) both; } @keyframes ovToastIn { from { opacity: 0; transform: scale(.92) translateY(12rpx); } to { opacity: 1; transform: none; } }