193 lines
4.2 KiB
SCSS
193 lines
4.2 KiB
SCSS
// GuideBar 的 z-index 通过局部样式类动态控制
|
||
|
||
.cqContainer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
|
||
.wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
// gap: 24px;
|
||
|
||
.tips {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
|
||
.tip1 {
|
||
color: #000;
|
||
text-align: center;
|
||
font-family: "PingFang SC";
|
||
font-size: 18px;
|
||
font-style: normal;
|
||
font-weight: 600;
|
||
line-height: 28px;
|
||
}
|
||
|
||
.tip2 {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
text-align: center;
|
||
font-family: "PingFang SC";
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
}
|
||
}
|
||
|
||
.qrcodeWrappper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
|
||
.qrcode {
|
||
width: 180px;
|
||
height: 180px;
|
||
// border-radius: 12px;
|
||
// border: 1px solid rgba(0, 0, 0, 0.06);
|
||
// background: lightgray 50% / cover no-repeat;
|
||
// box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.16);
|
||
}
|
||
|
||
.qrcodeTip {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
text-align: center;
|
||
font-family: "PingFang SC";
|
||
font-size: 14px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: normal;
|
||
margin-top: -30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.listPage {
|
||
background-color: #FAFAFA;
|
||
font-family: "PingFang SC";
|
||
transition: padding-top 0.3s ease-in-out; // 添加过渡动画，让布局变化更平滑
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100vh - var(--status-bar-height, 0px) - var(--nav-bar-height, 0px) - 112px); // 减去底部导航栏高度 112px
|
||
overflow: hidden;
|
||
|
||
.fixedHeader {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.listTopSearchWrapper {
|
||
// background-color: #fafafa;
|
||
// 使用 margin-top 负值来控制可见性，保持元素高度不变，筛选项位置固定
|
||
transition: margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
|
||
opacity 0.2s ease-out;
|
||
padding: 10px 15px 10px 15px; // 统一边距：上下10px 左右15px
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
will-change: margin-top, opacity;
|
||
|
||
&.show {
|
||
opacity: 1;
|
||
margin-top: 0; // 正常显示
|
||
}
|
||
|
||
&.hide {
|
||
opacity: 0;
|
||
margin-top: -64px; // 使用负 margin 向上隐藏，但仍占据布局空间 (44px内容 + 20px padding = 64px)
|
||
pointer-events: none; // 隐藏时禁用交互
|
||
}
|
||
}
|
||
|
||
.listTopFilterWrapper {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
align-items: center;
|
||
padding: 0 15px 10px 15px;
|
||
// 上0 左右15px 下10px（与搜索框左右对齐，下边距一致）
|
||
gap: 5px;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.listScrollView {
|
||
flex: 1;
|
||
height: 0; // 让 flex 生效
|
||
}
|
||
|
||
.menuFilter {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.listNavWrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.toggleElement {
|
||
/* 绝对定位使两个元素重叠 */
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
/* 过渡动画设置，实现平滑切换 */
|
||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 第一个元素样式 */
|
||
.firstElement {
|
||
background-color: #4a90e2;
|
||
color: white;
|
||
}
|
||
|
||
/* 第二个元素样式 */
|
||
.secondElement {
|
||
background-color: #5cb85c;
|
||
color: white;
|
||
/* 初始状态：透明且稍微偏移 */
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
/* 可见状态 */
|
||
.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* 隐藏状态 */
|
||
.hidden {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
pointer-events: none;
|
||
/* 隐藏时不响应鼠标事件 */
|
||
}
|
||
|
||
// GuideBar 动态 z-index 控制
|
||
.guideBarLowZIndex {
|
||
z-index: 80 !important; // 筛选弹出时，降低层级，避免遮挡筛选内容
|
||
}
|
||
|
||
.guideBarHighZIndex {
|
||
z-index: 900 !important; // 正常状态，保持较高层级
|
||
} |