/* merged: mtime=2026-05-06 10:05:44, now=2026-05-06 10:08:39, files=fvwebapp-ajs-User-Register.major.part.css */
#body-main-content {
height: auto;
}
.register-page {
width: 100%;
background: #f7f9fc;
padding: 180px 0 120px;
}
.register-container {
width: 1000px;
margin: 0 auto;
background: #fff;
border-radius: 6px;
padding: 48px 135px;
display: flex;
flex-direction: column;
gap: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.register-title {
font-size: 34px;
font-weight: 700;
color: #262626;
line-height: 42px;
margin: 0;
}
/* 两卡片区域 */
.register-methods {
display: flex;
gap: 24px;
}
.method-card {
flex: 1;
min-width: 0;
background: #fdfdfd;
border: 1px solid #f3f3f3;
border-radius: 16px;
padding: 24px;
height: 350px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
box-sizing: border-box;
}
/* 卡片标题区 */
.method-header {
display: flex;
flex-direction: column;
gap: 8px;
}
.method-title {
font-size: 24px;
font-weight: 700;
color: #333;
line-height: 36px;
}
.method-bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.method-bullets li {
display: flex;
align-items: center;
gap: 4px;
font-size: 15px;
color: #333;
line-height: 22px;
}
.bullet-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 16px;
height: 16px;
background: rgba(61, 107, 255, 0.1);
border-radius: 50%;
}
.bullet-icon::after {
content: '';
display: block;
width: 7px;
height: 4px;
border-left: 1.5px solid #4580ff;
border-bottom: 1.5px solid #4580ff;
transform: rotate(-45deg) translateY(-1px);
}
/* 卡片内容区 */
.method-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
/* 二维码 */
.qrcode-wrapper {
width: 136px;
height: 136px;
border: 2px solid #d9e8fe;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
flex-shrink: 0;
}
.qrcode-img {
width: 96px;
height: 96px;
display: block;
}
.qrcode-hint {
font-size: 14px;
font-weight: 500;
color: #4580ff;
line-height: 40px;
text-align: center;
margin: 0;
}
/* PC 卡片内容 */
.pc-method-body {
justify-content: space-between;
}
.pc-illustration {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.pc-monitor-svg {
width: 100%;
max-width: 220px;
height: auto;
}
.pc-buttons {
width: 100%;
height: 40px;
padding: 0 24px;
box-sizing: border-box;
}
.download-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
height: 100%;
padding: 0 12px;
border-radius: 16px;
font-size: 16px;
font-weight: 500;
color: #f3f7ff;
background: #4580ff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
text-decoration: none;
transition: background 0.2s;
box-sizing: border-box;
}
.download-btn:hover,
.download-btn:focus {
background: #2953bf;
color: #f3f7ff;
text-decoration: none;
}
.download-btn-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* 底部区域 */
.register-footer {
display: flex;
flex-direction: column;
}
.footer-row {
display: flex;
align-items: center;
min-height: 30px;
flex-wrap: wrap;
}
.footer-text {
font-size: 14px;
color: #5c5c5c;
line-height: 20px;
}
.footer-link {
font-size: 14px;
color: #4580ff;
line-height: 20px;
padding: 4px 8px;
border-radius: 8px;
text-decoration: none;
}
/* 768–1024px：收窄容器宽度，不改顶部间距 */
@media (max-width: 1024px) {
.register-container {
width: 600px;
box-sizing: content-box;
padding: 48px calc((100vw - 624px) / 2);
}
}
/* < 768px：布局改单栏，顶部间距 6rem */
@media (max-width: 768px) {
.register-page {
padding-top: 6rem;
}
.register-container {
width: 90%;
padding: 32px 24px;
}
.register-title {
font-size: 26px;
line-height: 34px;
}
.register-methods {
flex-direction: column;
}
.method-card {
justify-content: center;
align-items: center;
}
.method-card:first-child {
height: 350px;
}
.method-card:last-child {
height: auto;
}
.method-body {
flex: 0 0 auto;
}
.pc-illustration {
display: none;
}
.pc-method-body {
width: 100%;
}
.pc-buttons {
padding: 0;
width: 100%;
}
.pc-buttons .download-btn {
max-width: 472px;
margin: 0 auto;
}
.method-title {
display: flex;
justify-content: center;
}
}