OPC-Hub/training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(小程序扫码登录): 锁定整屏一页(height:100vh+overflow hidden)并压缩内容/间距，杜绝滚动

Browse Source
This commit is contained in:
Pine
2026-08-27 21:15:14 +08:00
parent 7539801207
commit 67fb4c3785
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/src/pages/scan-login/index.scss
+26 -26
View File
@@ -1,41 +1,41 @@
/* 小程序扫码登录确认页 · 移动端布局（顶部返回 + 居中内容 + 底部主按钮） */
.sl { position: relative; z-index: 2; min-height: 100vh;
display: flex; flex-direction: column; padding: 24rpx 40rpx 60rpx; }
/* 小程序扫码登录确认页 · 整屏一页(无滚动) */
.sl { position: relative; z-index: 2; height: 100vh; height: 100dvh; overflow: hidden;
display: flex; flex-direction: column; padding: 16rpx 40rpx 28rpx; box-sizing: border-box; }
/* 顶栏返回 */
.sl-top { display: flex; align-items: center; height: 72rpx; }
.sl-back { width: 64rpx; height: 64rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center;
.sl-top { flex-shrink: 0; display: flex; align-items: center; height: 60rpx; }
.sl-back { width: 60rpx; height: 60rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.55); border: 1px solid rgba(99,132,255,.16); backdrop-filter: blur(8px); }
.sl-back .ic-arrow-left { width: 34rpx; height: 34rpx; background: #23315c; }
.sl-back .ic-arrow-left { width: 30rpx; height: 30rpx; background: #23315c; }
/* 中间内容（垂直居中偏上） */
.sl-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 24rpx 8rpx 40rpx; }
.sl-ico { width: 108rpx; height: 108rpx; margin-bottom: 30rpx; border-radius: 50%;
display: block; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 54rpx;
mask-position: center; mask-repeat: no-repeat; mask-size: 54rpx; }
/* 中间内容（垂直居中，占满剩余且可压缩） */
.sl-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 18rpx; padding: 12rpx 0; }
.sl-ico { width: 92rpx; height: 92rpx; border-radius: 50%; flex-shrink: 0;
display: block; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 46rpx;
mask-position: center; mask-repeat: no-repeat; mask-size: 46rpx; }
.sl-ico.lock { background: #9aa4c6; }
.sl-title { display: block; font-size: 46rpx; font-weight: 800; color: #23315c; letter-spacing: -0.02em; line-height: 1.25; }
.sl-desc { display: block; margin: 20rpx 0 0; font-size: 28rpx; color: #4a5580; line-height: 1.7; max-width: 560rpx; }
.sl-scene { display: block; margin-top: 16rpx; font-size: 24rpx; color: #9aa4c6; }
.sl-title { display: block; font-size: 42rpx; font-weight: 800; color: #23315c; letter-spacing: -0.02em; line-height: 1.2; }
.sl-desc { display: block; font-size: 26rpx; color: #4a5580; line-height: 1.6; max-width: 540rpx; }
.sl-scene { display: block; font-size: 23rpx; color: #9aa4c6; }
/* 成功：大圆圈勾选 */
.sl-circle { width: 200rpx; height: 200rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center;
border: 6rpx solid #8f7bff; margin: 0 auto 40rpx; box-shadow: 0 0 40rpx rgba(143,123,255,.25); }
.sl-circle .ic-check { width: 96rpx; height: 96rpx; background: #8f7bff; }
.sl-circle { width: 156rpx; height: 156rpx; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
border: 5rpx solid #8f7bff; box-shadow: 0 0 36rpx rgba(143,123,255,.25); }
.sl-circle .ic-check { width: 76rpx; height: 76rpx; background: #8f7bff; }
/* 底部 CTA */
.sl-foot { display: flex; flex-direction: column; gap: 18rpx; margin-top: auto; padding-top: 32rpx; }
.sl-note { display: block; font-size: 23rpx; color: #9aa4c6; text-align: center; line-height: 1.5; }
/* 底部 CTA（贴底，不占满，避免溢出） */
.sl-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: 12rpx; margin-top: auto; }
.sl-note { display: block; font-size: 22rpx; color: #9aa4c6; text-align: center; line-height: 1.5; }
.sl-cta { width: 100%; }
.sl-cancel { width: 100%; }
/* 登录门 tab / 表单 */
.sl-tabs { display: flex; gap: 8rpx; margin: 32rpx 0; padding: 8rpx; border-radius: 999px; background: #eef1ff; border: 1px solid rgba(99,132,255,.14); width: 100%; }
.sl-tab { flex: 1; text-align: center; padding: 16rpx 0; border-radius: 999px; color: #7a86b0; font-size: 27rpx; font-weight: 600; }
/* 登录门 tab / 表单（压缩高度） */
.sl-tabs { display: flex; gap: 8rpx; margin: 20rpx 0; padding: 6rpx; border-radius: 999px; background: #eef1ff; border: 1px solid rgba(99,132,255,.14); width: 100%; }
.sl-tab { flex: 1; text-align: center; padding: 12rpx 0; border-radius: 999px; color: #7a86b0; font-size: 26rpx; font-weight: 600; }
.sl-tab.on { background: linear-gradient(135deg, #6b8bff, #8f7bff); color: #fff; box-shadow: 0 6rpx 18rpx rgba(98,132,255,.28); }
.sl-field { display: flex; flex-direction: column; gap: 16rpx; width: 100%; }
.sl-field { display: flex; flex-direction: column; gap: 12rpx; width: 100%; }
.sl-code { display: flex; gap: 12rpx; align-items: center; }
.sl-code .input { flex: 1; margin: 0; }
.sl-send { font-size: 24rpx; padding: 0 22rpx; line-height: 2.4; flex-shrink: 0; }
.sl-err { display: block; margin-top: 16rpx; font-size: 25rpx; color: #e05252; text-align: center; }
.sl-err { display: block; margin-top: 10rpx; font-size: 24rpx; color: #e05252; text-align: center; }