From c471597395171b02e199db14dfc19a838b9cedee Mon Sep 17 00:00:00 2001 From: Pine Date: Thu, 27 Aug 2026 21:10:11 +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=E7=99=BB=E5=BD=95=E9=A1=B5?= =?UTF-8?q?=E9=87=8D=E8=AE=BE=E8=AE=A1=20=E2=80=94=E2=80=94=20=E5=86=85?= =?UTF-8?q?=E5=AE=B9=E5=B1=85=E4=B8=AD/=E8=A7=84=E8=8C=83mask=E5=9B=BE?= =?UTF-8?q?=E6=A0=87(=E5=8E=BBemoji)/=E6=8C=89=E9=92=AE=E6=8C=89=E6=95=B4?= =?UTF-8?q?=E4=BD=93=E6=A0=B7=E5=BC=8F(btn-main=E6=B8=90=E5=8F=98+btn-ghos?= =?UTF-8?q?t)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 去除 🔐/✓/✅ emoji，改用 CSS-mask SVG 图标(.sl-ico + .ic-lock/.ic-check)，新增 .ic-lock 图标 - .sl 整页垂直水平居中；卡片柔彩毛玻璃+软阴影 - 主按钮改 .btn-main(渐变胶囊)、取消 .btn-ghost；短信发送按钮柔化 - 登录方式 tab 改渐变胶囊选中态 --- miniprogram/src/app.scss | 1 + miniprogram/src/pages/scan-login/index.jsx | 14 +++---- miniprogram/src/pages/scan-login/index.scss | 45 ++++++++++++--------- 3 files changed, 35 insertions(+), 25 deletions(-) diff --git a/miniprogram/src/app.scss b/miniprogram/src/app.scss index d5221d5..f08e670 100644 --- a/miniprogram/src/app.scss +++ b/miniprogram/src/app.scss @@ -361,6 +361,7 @@ page { -ms-overflow-style: none; scrollbar-width: none; } .ic-play { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5 3l14 9-14 9V3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5 3l14 9-14 9V3z'/%3E%3C/svg%3E"); } .ic-heart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); } .ic-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } +.ic-lock { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } .ic-thumb { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M7 10v12M15 5.9s0-1-.5-2a1.5 1.5 0 0 0-2.8 1C12.4 6.6 11 10 11 10h6a2 2 0 0 1 2 2.5l-1.4 5.6a2 2 0 0 1-2 1.5H7M15 6l2-1.5a1.5 1.5 0 0 1 2.7 1.3L18 13M7 22H4a2 2 0 0 1-2-2V12a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M7 10v12M15 5.9s0-1-.5-2a1.5 1.5 0 0 0-2.8 1C12.4 6.6 11 10 11 10h6a2 2 0 0 1 2 2.5l-1.4 5.6a2 2 0 0 1-2 1.5H7M15 6l2-1.5a1.5 1.5 0 0 1 2.7 1.3L18 13M7 22H4a2 2 0 0 1-2-2V12a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); } .ic-share { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7M16 6l-4-4-4 4M12 2v13'/%3E%3C/svg%3E"); } .ic-cmt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } diff --git a/miniprogram/src/pages/scan-login/index.jsx b/miniprogram/src/pages/scan-login/index.jsx index 10b9b27..8c5e05d 100644 --- a/miniprogram/src/pages/scan-login/index.jsx +++ b/miniprogram/src/pages/scan-login/index.jsx @@ -84,7 +84,7 @@ export default function ScanLogin() { {/* 未登录：先登录 */} {!authed ? ( <> - 🔐 + 请先登录小程序 为完成扫码登录 / 绑定，请先登录小程序（复用你的微信/手机号身份）。 @@ -92,21 +92,21 @@ export default function ScanLogin() { setLoginMode('phone')}>手机号登录 {loginMode === 'wx' ? ( - + ) : ( setGatePhone(e.detail.value)} /> setGateCode(e.detail.value)} /> - + - + )} ) : ( <> - {done ? '✓' : '✅'} + {done ? '已完成' : '确认扫码操作'} {done ? msg : `确认使用当前微信账号在你操作的端口完成登录 / 绑定？`} @@ -114,11 +114,11 @@ export default function ScanLogin() { {!done && scene && 请求 #{scene.slice(0, 12)}} {!done && ( - + )} - {done && } + {done && } )} {msg && {msg}} diff --git a/miniprogram/src/pages/scan-login/index.scss b/miniprogram/src/pages/scan-login/index.scss index 5151df7..e790de7 100644 --- a/miniprogram/src/pages/scan-login/index.scss +++ b/miniprogram/src/pages/scan-login/index.scss @@ -1,23 +1,32 @@ -/* 小程序扫码登录确认页 */ -.sl { position: relative; z-index: 2; } +/* 小程序扫码登录确认页 · Soft UI */ +.sl { position: relative; z-index: 2; min-height: 100vh; + display: flex; align-items: center; justify-content: center; padding: 32rpx; } .sl-card { - margin: 40rpx 32rpx 0; padding: 60rpx 40rpx; - background: rgba(255,255,255,0.55); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); - border: 1px solid rgba(99,132,255,.14); border-radius: 20rpx; text-align: center; + width: 100%; max-width: 640rpx; margin: 0 auto; padding: 72rpx 48rpx 56rpx; + background: rgba(255,255,255,0.7); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); + border: 1px solid rgba(99,132,255,.14); border-radius: 28rpx; text-align: center; + box-shadow: 0 16rpx 48rpx rgba(59,79,125,.10); } -.sl-icon { font-size: 72rpx; margin-bottom: 20rpx; } -.sl-title { display: block; font-size: 40rpx; font-weight: 700; color: #23315c; } -.sl-desc { display: block; margin: 16rpx 0 0; font-size: 27rpx; color: #4a5580; line-height: 1.6; } -.sl-scene { display: block; margin-top: 12rpx; font-size: 23rpx; color: #9aa4c6; } -.sl-err { display: block; margin-top: 16rpx; font-size: 25rpx; color: #f0b8b8; } -.sl-actions { display: flex; flex-direction: column; gap: 16rpx; margin-top: 40rpx; } +/* 规范图标（mask SVG，无 emoji） */ +.sl-ico { + width: 104rpx; height: 104rpx; margin: 0 auto 28rpx; border-radius: 50%; + display: block; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 52rpx; + mask-position: center; mask-repeat: no-repeat; mask-size: 52rpx; +} +.sl-ico.lock { background: #9aa4c6; } +.sl-ico.ok { background: #6b8bff; } +.sl-ico.done { background: #2ab36b; } +.sl-title { display: block; font-size: 40rpx; font-weight: 700; color: #23315c; letter-spacing: -0.02em; } +.sl-desc { display: block; margin: 18rpx 0 0; font-size: 27rpx; color: #4a5580; line-height: 1.7; } +.sl-scene { display: block; margin-top: 14rpx; font-size: 23rpx; color: #9aa4c6; } +.sl-err { display: block; margin-top: 16rpx; font-size: 25rpx; color: #e05252; } +.sl-actions { display: flex; flex-direction: column; gap: 18rpx; margin-top: 44rpx; } /* 登录门 */ -.sl-tabs { display: flex; gap: 4px; margin: 24rpx 0; padding: 4px; border-radius: 12px; background: #eef1ff; border: 1px solid rgba(99,132,255,.14); } -.sl-tab { flex: 1; text-align: center; padding: 12rpx 0; border-radius: 9px; color: #7a86b0; font-size: 26rpx; } -.sl-tab.on { background: #fff; color: #23315c; box-shadow: 0 4rpx 12rpx rgba(59,79,125,.10); } -.sl-field { display: flex; flex-direction: column; gap: 14rpx; margin-top: 8rpx; } +.sl-tabs { display: flex; gap: 8rpx; margin: 28rpx 0; padding: 8rpx; border-radius: 999px; background: #eef1ff; border: 1px solid rgba(99,132,255,.14); } +.sl-tab { flex: 1; text-align: center; padding: 16rpx 0; border-radius: 999px; color: #7a86b0; font-size: 27rpx; 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; margin-top: 8rpx; } .sl-code { display: flex; gap: 12rpx; align-items: center; } -.sl-code .input { flex: 1; } -.btn-sm { font-size: 24rpx; padding: 0 24rpx; line-height: 2.4; } -.sl-err { display: block; margin-top: 20rpx; font-size: 25rpx; color: #f0b8b8; } +.sl-code .input { flex: 1; margin: 0; } +.sl-send { font-size: 24rpx; padding: 0 22rpx; line-height: 2.4; flex-shrink: 0; }