完善：多步 H5 授权流程
This commit is contained in:
236
basic-info.css
236
basic-info.css
@@ -1075,3 +1075,239 @@ body.modal-open {
|
||||
.back-home-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ==================== 授权流程样式 ==================== */
|
||||
.auth-flow-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 授权进度区域 */
|
||||
.auth-progress-section {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.auth-progress-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.auth-progress-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.auth-progress-count {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.auth-progress-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.auth-progress-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.auth-progress-item.active {
|
||||
background: #e8f0ff;
|
||||
border: 1px solid #3474fe;
|
||||
}
|
||||
|
||||
.auth-progress-item.completed {
|
||||
background: #f0fff4;
|
||||
}
|
||||
|
||||
.auth-progress-item.completed .auth-progress-icon {
|
||||
color: #19be6b;
|
||||
}
|
||||
|
||||
.auth-progress-item.completed .auth-progress-status {
|
||||
color: #19be6b;
|
||||
}
|
||||
|
||||
.auth-progress-item.failed {
|
||||
background: #fff5f5;
|
||||
}
|
||||
|
||||
.auth-progress-item.failed .auth-progress-icon {
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.auth-progress-item.failed .auth-progress-status {
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.auth-progress-item.timeout {
|
||||
background: #fffbe6;
|
||||
}
|
||||
|
||||
.auth-progress-item.timeout .auth-progress-icon {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.auth-progress-item.timeout .auth-progress-status {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.auth-progress-icon {
|
||||
font-size: 18px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.auth-progress-item.active .auth-progress-icon {
|
||||
color: #3474fe;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-progress-name {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.auth-progress-status {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.auth-progress-item.active .auth-progress-status {
|
||||
color: #3474fe;
|
||||
}
|
||||
|
||||
/* iframe 区域 */
|
||||
.auth-iframe-section {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.auth-iframe-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
background: linear-gradient(135deg, #3474fe 0%, #5b8def 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.auth-iframe-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.auth-iframe-hint {
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.auth-iframe {
|
||||
width: 100%;
|
||||
height: calc(100vh - 350px);
|
||||
min-height: 400px;
|
||||
border: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 授权完成区域 */
|
||||
.auth-complete-section {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.auth-complete-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
margin: 0 auto 20px;
|
||||
background: linear-gradient(135deg, #19be6b 0%, #47d88a 100%);
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 12px rgba(25, 190, 107, 0.3);
|
||||
}
|
||||
|
||||
.auth-complete-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.auth-complete-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.auth-countdown {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.auth-countdown #countdownSeconds {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #3474fe;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.auth-redirect-btn {
|
||||
display: inline-block;
|
||||
padding: 14px 48px;
|
||||
background: linear-gradient(135deg, #3474fe 0%, #5b8def 100%);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(52, 116, 254, 0.3);
|
||||
}
|
||||
|
||||
.auth-redirect-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(52, 116, 254, 0.4);
|
||||
}
|
||||
|
||||
.auth-redirect-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user