From 67fb4c37851f2b7e02011001623a8d68391735d7 Mon Sep 17 00:00:00 2001 From: Pine Date: Thu, 27 Aug 2026 21:15:14 +0800 Subject: [PATCH] =?UTF-8?q?style(=E5=B0=8F=E7=A8=8B=E5=BA=8F=E6=89=AB?= =?UTF-8?q?=E7=A0=81=E7=99=BB=E5=BD=95):=20=E9=94=81=E5=AE=9A=E6=95=B4?= =?UTF-8?q?=E5=B1=8F=E4=B8=80=E9=A1=B5(height:100vh+overflow=20hidden)?= =?UTF-8?q?=E5=B9=B6=E5=8E=8B=E7=BC=A9=E5=86=85=E5=AE=B9/=E9=97=B4?= =?UTF-8?q?=E8=B7=9D=EF=BC=8C=E6=9D=9C=E7=BB=9D=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/src/pages/scan-login/index.scss | 52 ++++++++++----------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/miniprogram/src/pages/scan-login/index.scss b/miniprogram/src/pages/scan-login/index.scss index f3a4a75..f5043f4 100644 --- a/miniprogram/src/pages/scan-login/index.scss +++ b/miniprogram/src/pages/scan-login/index.scss @@ -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; }