bugfix
This commit is contained in:
@@ -636,13 +636,12 @@ swiper-item {
|
|||||||
/* ============================================================================
|
/* ============================================================================
|
||||||
§15 底部抽屉(页面级 Sheet,含抓手 / 标题行 / 滚动体 / 底部操作区)
|
§15 底部抽屉(页面级 Sheet,含抓手 / 标题行 / 滚动体 / 底部操作区)
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
/* 遮罩只压暗、不做全屏模糊:全屏 backdrop-filter 会让整页发虚 */
|
||||||
.scrim {
|
.scrim {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 70;
|
z-index: 70;
|
||||||
background: rgba(0, 0, 0, .28);
|
background: rgba(0, 0, 0, .28);
|
||||||
-webkit-backdrop-filter: blur(2px);
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
animation: fadeIn .28s var(--ease) both;
|
animation: fadeIn .28s var(--ease) both;
|
||||||
}
|
}
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
|
|||||||
@@ -5,12 +5,12 @@
|
|||||||
z-index: 80;
|
z-index: 80;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 遮罩只压暗、不做全屏模糊:全屏 backdrop-filter 会把整页糊掉,也会连带把面板糊虚 */
|
||||||
.scrim {
|
.scrim {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
z-index: 1;
|
||||||
background: rgba(0, 0, 0, .28);
|
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;
|
animation: ovFade .28s cubic-bezier(.32, .72, 0, 1) both;
|
||||||
}
|
}
|
||||||
@keyframes ovFade {
|
@keyframes ovFade {
|
||||||
@@ -23,6 +23,8 @@
|
|||||||
.modal-wrap {
|
.modal-wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
/* 必须高于遮罩:面板自身带毛玻璃+位移动画,层级不确定时会被压到遮罩之下而发灰发虚 */
|
||||||
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -80,6 +82,8 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
/* 高于遮罩:面板不能被压暗,也不能被遮罩的模糊糊掉 */
|
||||||
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0 16rpx calc(16rpx + env(safe-area-inset-bottom));
|
padding: 0 16rpx calc(16rpx + env(safe-area-inset-bottom));
|
||||||
@@ -134,6 +138,7 @@
|
|||||||
.toast-wrap {
|
.toast-wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
Reference in New Issue
Block a user