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

style(小程序扫码登录): 登录页重设计 —— 内容居中/规范mask图标(去emoji)/按钮按整体样式(btn-main渐变+btn-ghost)

Browse Source 
- 去除 🔐/✓/✅ emoji，改用 CSS-mask SVG 图标(.sl-ico + .ic-lock/.ic-check)，新增 .ic-lock 图标
- .sl 整页垂直水平居中；卡片柔彩毛玻璃+软阴影
- 主按钮改 .btn-main(渐变胶囊)、取消 .btn-ghost；短信发送按钮柔化
- 登录方式 tab 改渐变胶囊选中态
This commit is contained in:
Pine
2026-08-27 21:10:11 +08:00
parent d5d30edc50
commit c471597395
3 changed files with 35 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/src/app.scss
+1
View File
@@ -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"); }
miniprogram/src/pages/scan-login/index.jsx
+7 -7
View File
@@ -84,7 +84,7 @@ export default function ScanLogin() {
{/* 未登录：先登录 */}
{!authed ? (
<>
<View className="sl-icon">🔐</View>
<View className="sl-ico ic-lock lock" />
<Text className="sl-title">请先登录小程序</Text>
<Text className="sl-desc">为完成扫码登录 / 绑定，请先登录小程序（复用你的微信/手机号身份）。</Text>
<View className="sl-tabs">
@@ -92,21 +92,21 @@ export default function ScanLogin() {
<Text className={`sl-tab${loginMode === 'phone' ? ' on' : ''}`} onClick={() => setLoginMode('phone')}>手机号登录</Text>
</View>
{loginMode === 'wx' ? (
<Button className="btn btn-cta" loading={busy} onClick={wxLoginNow}>微信一键登录</Button>
<Button className="btn btn-main" loading={busy} onClick={wxLoginNow}>微信一键登录</Button>
) : (
<View className="sl-field">
<Input className="input" placeholder="11 位手机号" value={gatePhone} onInput={(e) => setGatePhone(e.detail.value)} />
<View className="sl-code">
<Input className="input" placeholder="验证码" value={gateCode} onInput={(e) => setGateCode(e.detail.value)} />
<Button className="btn btn-ghost btn-sm" disabled={busy} onClick={sendSms}>验证码</Button>
<Button className="btn btn-ghost btn-sm sl-send" disabled={busy} onClick={sendSms}>发送验证码</Button>
</View>
<Button className="btn btn-cta" loading={busy} onClick={phoneLoginNow}>登录</Button>
<Button className="btn btn-main" loading={busy} onClick={phoneLoginNow}>登录</Button>
</View>
)}
</>
) : (
<>
<View className="sl-icon">{done ? '✓' : '✅'}</View>
<View className={`sl-ico ic-check${done ? ' done' : ' ok'}`} />
<Text className="sl-title">{done ? '已完成' : '确认扫码操作'}</Text>
<Text className="sl-desc">
{done ? msg : `确认使用当前微信账号在你操作的端口完成登录 / 绑定？`}
@@ -114,11 +114,11 @@ export default function ScanLogin() {
{!done && scene && <Text className="sl-scene">请求 #{scene.slice(0, 12)}</Text>}
{!done && (
<View className="sl-actions">
<Button className="btn btn-cta" loading={busy} onClick={confirm}>确认登录 / 绑定</Button>
<Button className="btn btn-main" loading={busy} onClick={confirm}>确认登录 / 绑定</Button>
<Button className="btn btn-ghost" disabled={busy} onClick={cancel}>取消</Button>
</View>
)}
{done && <Button className="btn btn-cta" onClick={() => Taro.switchTab({ url: '/pages/index/index' })}>回首页</Button>}
{done && <Button className="btn btn-main" onClick={() => Taro.switchTab({ url: '/pages/index/index' })}>回首页</Button>}
</>
)}
{msg && <Text className="sl-err">{msg}</Text>}
miniprogram/src/pages/scan-login/index.scss
+27 -18
View File
@@ -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; }