.search-dialog-mask { position: fixed; inset: 0; /* 让弹层层级低于站点顶部 header(header z-index=100),避免遮住 header */ z-index: 90; display: none; align-items: flex-start; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); padding-top: 72px; /* pc 默认站位 */ box-sizing: border-box; } .search-dialog-mask.is-open { display: flex; } .search-dialog-card { width: 343px; padding: 0; box-sizing: border-box; } .search-dialog-form { width: 100%; } .search-dialog-bar { width: 100%; padding-left: 12px; padding-right: 12px; padding-top: 8px; padding-bottom: 8px; background: rgba(0, 0, 0, 0.6); overflow: hidden; border-radius: 36px; display: inline-flex; justify-content: space-between; align-items: center; box-sizing: border-box; } .search-dialog-input { width: 190px; height: 24px; background: transparent; border: none; outline: none; color: rgba(255, 255, 255, 0.6); font-size: 14px; font-family: PingFang SC; font-weight: 400; line-height: 20px; box-sizing: border-box; } .search-dialog-input::placeholder { color: rgba(255, 255, 255, 0.6); } .search-dialog-submit { width: 71px; height: 30px; background: #EC237F; border: none; border-radius: 999px; cursor: pointer; color: #181818; font-size: 12px; font-family: PingFang SC; font-weight: 400; line-height: 18px; box-sizing: border-box; } @media (max-width: 767px) { .search-dialog-mask { padding-top: 64px; /* 移动端 header 高度 */ } }