56 lines
1.3 KiB
SCSS
56 lines
1.3 KiB
SCSS
@use '@/styles/variables.scss' as *;
|
|
|
|
// 固定悬浮于页面顶部；默认透明（沉浸式，透出页面渐变背景），滚动后切换为主题色底
|
|
.navBar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: transparent;
|
|
transition: background $transition-base, box-shadow $transition-base;
|
|
}
|
|
|
|
// 滚动态：主题色底 + 浮层阴影，保证白字标题在内容之上仍可读
|
|
.navBarSolid {
|
|
background: $color-primary;
|
|
box-shadow: $shadow-float;
|
|
}
|
|
|
|
.navContent {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
// 右侧留出胶囊按钮区域（胶囊约 87px 宽 + 边距）；返回按钮与胶囊对称占位，标题仍居中
|
|
padding: 0 200rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.navTitle {
|
|
font-size: 32rpx;
|
|
font-weight: $font-weight-semibold;
|
|
color: $color-text-white;
|
|
@include text-ellipsis;
|
|
}
|
|
|
|
// 返回按钮：左箭头圆底，与右侧胶囊按钮视觉对称
|
|
.backBtn {
|
|
position: absolute;
|
|
left: 32rpx;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.18);
|
|
@include flex-center;
|
|
}
|
|
|
|
.backArrow {
|
|
font-size: 40rpx;
|
|
font-weight: $font-weight-bold;
|
|
color: $color-text-white;
|
|
line-height: 1;
|
|
// 微调视觉居中（‹ 字符偏上）
|
|
margin-top: -4rpx;
|
|
}
|