994 lines
18 KiB
SCSS
994 lines
18 KiB
SCSS
@use '../variables' as *;
|
|
/* 登录页面 — 左右分栏全屏布局 */
|
|
.login-view {
|
|
font-size: 0.14rem;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
height: var(--app-height, 100vh);
|
|
background: #F7FEFC;
|
|
}
|
|
|
|
/* ==================== 左侧视觉动画面板 ==================== */
|
|
.login-visual {
|
|
position: relative;
|
|
width: 57%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #ddf4f2;
|
|
border-right: 0.08rem solid #4FC2C9;
|
|
}
|
|
|
|
.login-jianshi-logo {
|
|
position: absolute;
|
|
right: 0.22rem;
|
|
bottom: 0.1rem;
|
|
width: 0.82rem;
|
|
height: 0.21rem;
|
|
object-fit: contain;
|
|
pointer-events: auto;
|
|
user-select: none;
|
|
z-index: 12;
|
|
}
|
|
|
|
.ai-hub-stage {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 11rem;
|
|
height: 9rem;
|
|
overflow: hidden;
|
|
background-repeat: no-repeat;
|
|
background-size: 14.05rem 12.69rem;
|
|
background-position: -2.1rem -1.17rem;
|
|
z-index: 1;
|
|
transform-origin: top left;
|
|
transform: translate3d(var(--stage-x, 0rem), var(--stage-y, 0rem), 0) scale(var(--stage-scale, 1));
|
|
}
|
|
|
|
/* 标题 */
|
|
.hero-title {
|
|
position: absolute;
|
|
left: 0.35rem;
|
|
top: 0.64rem;
|
|
width: 3.74rem;
|
|
height: 0.88rem;
|
|
color: #2a8186;
|
|
font-size: 0.36rem;
|
|
font-weight: 700;
|
|
line-height: 0.44rem;
|
|
z-index: 3;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hero-title__second-line {
|
|
display: block;
|
|
padding-left: 0.72rem;
|
|
}
|
|
|
|
/* Nova 核心机器人 */
|
|
.nova-core {
|
|
position: absolute;
|
|
left: 1.83rem;
|
|
top: 2.59rem;
|
|
width: 5.92rem;
|
|
height: 4.43rem;
|
|
pointer-events: auto;
|
|
z-index: 2;
|
|
user-select: none;
|
|
}
|
|
|
|
.nova-core-base {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.nova-eye {
|
|
position: absolute;
|
|
width: 0.2rem;
|
|
height: 0.44rem;
|
|
object-fit: contain;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
will-change: transform;
|
|
transition: transform .05s linear;
|
|
z-index: 2;
|
|
}
|
|
|
|
.nova-eye-left {
|
|
left: 2.5377rem;
|
|
top: 1.77rem;
|
|
}
|
|
|
|
.nova-eye-right {
|
|
left: 3.1077rem;
|
|
top: 1.77rem;
|
|
}
|
|
|
|
.nova-eye.is-blinking {
|
|
animation: nova-eye-blink .2s ease-in-out;
|
|
transform-origin: center center;
|
|
}
|
|
|
|
@keyframes nova-eye-blink {
|
|
0%, 100% { scale: 1 1; }
|
|
40%, 60% { scale: 1 .06; }
|
|
}
|
|
|
|
/* 浮动节点 */
|
|
.node {
|
|
position: absolute;
|
|
z-index: 4;
|
|
left: var(--x);
|
|
top: var(--y);
|
|
width: var(--w);
|
|
height: var(--h);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
object-fit: contain;
|
|
will-change: opacity, transform, filter;
|
|
transform: translate3d(0, 0.04rem, 0) scale(.996);
|
|
filter: drop-shadow(0 0.16rem 0.28rem rgba(56, 255, 202, .10)) brightness(1);
|
|
}
|
|
|
|
.node.is-running {
|
|
visibility: visible;
|
|
animation: node-life var(--life-ms, 6700ms) linear forwards;
|
|
}
|
|
|
|
@keyframes node-life {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate3d(0, 0.04rem, 0) scale(.996);
|
|
filter: drop-shadow(0 0.16rem 0.28rem rgba(56, 255, 202, .10)) brightness(1);
|
|
}
|
|
20.896%, 79.104% {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
filter: drop-shadow(0 0.16rem 0.28rem rgba(56, 255, 202, .20)) brightness(1.045);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate3d(0, -0.04rem, 0) scale(.996);
|
|
filter: drop-shadow(0 0.16rem 0.28rem rgba(56, 255, 202, .10)) brightness(1);
|
|
}
|
|
}
|
|
|
|
/* ==================== 右侧表单面板 ==================== */
|
|
.login-view__right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 43%;
|
|
height: 100%;
|
|
background: #fff;
|
|
}
|
|
|
|
/* Logo 行（右侧及简历阶段通用） */
|
|
.login-view__logo-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.12rem;
|
|
width: 3.41rem;
|
|
|
|
img{
|
|
width: 1.6rem;
|
|
height: 0.4rem;
|
|
}
|
|
}
|
|
|
|
.login-view__logo-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 0.56rem;
|
|
height: 0.56rem;
|
|
border-radius: 0.16rem;
|
|
font-weight: 700;
|
|
font-size: 0.22rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.login-view__logo-box--light {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.login-view__logo-box--green {
|
|
background: rgba(9, 170, 119, 0.2);
|
|
color: #351616;
|
|
}
|
|
|
|
.login-view__logo-text {
|
|
font-weight: 700;
|
|
font-size: 0.28rem;
|
|
line-height: 0.34rem;
|
|
}
|
|
|
|
.login-view__logo-text--white {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.login-view__logo-text--dark {
|
|
color: #351616;
|
|
}
|
|
|
|
.login-view__logo-row--right {
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
/* 表单包裹 */
|
|
.login-view__form-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.24rem;
|
|
width: 3.41rem;
|
|
}
|
|
|
|
/* 标题 */
|
|
.login-view__heading {
|
|
width: 3.41rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.05rem;
|
|
}
|
|
|
|
.login-view__title {
|
|
font-weight: 700;
|
|
font-size: 0.18rem;
|
|
line-height: 0.22rem;
|
|
color: #18181A;
|
|
}
|
|
|
|
.login-view__subtitle {
|
|
font-weight: 400;
|
|
font-size: 0.10rem;
|
|
line-height: 0.12rem;
|
|
color: #616367;
|
|
|
|
>span:nth-child(2){
|
|
color: $accent;
|
|
}
|
|
}
|
|
|
|
/* ==================== 手机号输入行 ==================== */
|
|
.login-view__phone-row {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 3.41rem;
|
|
height: 0.40rem;
|
|
background: #FFFFFF;
|
|
border: 1px solid #C8C9CD;
|
|
box-shadow: 0 0.08rem 0.20rem rgba(15, 83, 87, 0.05);
|
|
border-radius: 0.08rem;
|
|
}
|
|
|
|
/* 手机图标 */
|
|
.login-view__phone-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
margin-left: 0.16rem;
|
|
flex-shrink: 0;
|
|
|
|
svg {
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
}
|
|
}
|
|
|
|
/* 国家码标签 */
|
|
.login-view__country-label {
|
|
margin-left: 0.06rem;
|
|
font-weight: 500;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #202124;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 下拉箭头 */
|
|
.login-view__country-chevron {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 0.20rem;
|
|
height: 0.20rem;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
|
|
svg {
|
|
width: 0.20rem;
|
|
height: 0.20rem;
|
|
}
|
|
}
|
|
|
|
/* 分隔线 */
|
|
.login-view__input-divider {
|
|
width: 1px;
|
|
height: 0.30rem;
|
|
background: #E7F2F3;
|
|
margin: 0 0.16rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 手机号输入框 */
|
|
.login-view__phone-input {
|
|
flex: 1;
|
|
height: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
font-weight: 400;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #202124;
|
|
outline: none;
|
|
|
|
&::placeholder {
|
|
color: #939599;
|
|
}
|
|
}
|
|
|
|
/* ==================== 发送验证码按钮（步骤一） ==================== */
|
|
.login-view__send-btn {
|
|
width: 3.41rem;
|
|
height: 0.40rem;
|
|
background: linear-gradient(90deg, #4FC2C9 0%, #42A8B3 100%);
|
|
box-shadow: 0 0.16rem 0.30rem rgba(15, 83, 87, 0.15);
|
|
border-radius: 0.08rem;
|
|
border: none;
|
|
font-weight: 600;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&:not(:disabled):hover {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
/* ==================== OTP 验证码输入（步骤二） ==================== */
|
|
.login-view__otp-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.1rem;
|
|
width: 100%;
|
|
cursor: text;
|
|
}
|
|
|
|
.login-view__otp-hidden-input {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
font-size: 0.16rem;
|
|
caret-color: transparent;
|
|
}
|
|
|
|
.login-view__otp-box {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 0.42rem;
|
|
height: 0.46rem;
|
|
background: #FAFBFC;
|
|
border: 1px solid #E2E8F0;
|
|
border-radius: 0.12rem;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
}
|
|
|
|
.login-view__otp-box--active {
|
|
background: #F3FFFD;
|
|
border: 2px solid $accent;
|
|
}
|
|
|
|
.login-view__otp-box--filled {
|
|
background: #F3FFFD;
|
|
border: 2px solid $accent;
|
|
}
|
|
|
|
.login-view__otp-digit {
|
|
font-weight: 700;
|
|
font-size: 0.24rem;
|
|
line-height: 0.29rem;
|
|
color: #132034;
|
|
}
|
|
|
|
/* 闪烁光标 */
|
|
.login-view__otp-cursor {
|
|
display: inline-block;
|
|
width: 2px;
|
|
height: 0.28rem;
|
|
background: $accent;
|
|
border-radius: 1px;
|
|
animation: login-otp-blink 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes login-otp-blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* ==================== 验证码发送状态提示 ==================== */
|
|
.login-view__sms-status {
|
|
width: 100%;
|
|
font-size: 0.13rem;
|
|
line-height: 0.16rem;
|
|
color: #64748B;
|
|
text-align: center;
|
|
padding-right: 0.1rem;
|
|
margin-top: -0.14rem;
|
|
margin-bottom: -0.06rem;
|
|
}
|
|
|
|
.login-view__sms-status--error {
|
|
color: #E85635;
|
|
}
|
|
|
|
/* ==================== 状态按钮（步骤二） ==================== */
|
|
.login-view__status-btn {
|
|
width: 100%;
|
|
height: 0.4rem;
|
|
background: linear-gradient(90deg, $btn-dark 0%, $btn-dark-hover 100%);
|
|
border-radius: 0.12rem;
|
|
border: none;
|
|
font-weight: 600;
|
|
font-size: 0.14rem;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.08rem;
|
|
transition: opacity 0.2s;
|
|
|
|
&:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&:not(:disabled):hover {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
/* 登录中转圈动画 */
|
|
.login-view__spinner {
|
|
display: inline-block;
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-top-color: #FFFFFF;
|
|
border-radius: 50%;
|
|
animation: login-spin 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes login-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ==================== 协议勾选 ==================== */
|
|
.login-view__agreement {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.06rem;
|
|
width: 3.41rem;
|
|
}
|
|
|
|
.login-view__checkbox {
|
|
box-sizing: border-box;
|
|
width: 0.18rem;
|
|
height: 0.18rem;
|
|
background: #FFFFFF;
|
|
border: 1.5px solid #CBD5E1;
|
|
border-radius: 0.04rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.login-view__checkbox--checked {
|
|
background: #4FC2C9;
|
|
border-color: #4FC2C9;
|
|
}
|
|
|
|
.login-view__check-icon {
|
|
font-size: 0.11rem;
|
|
color: #FFFFFF;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.login-view__agreement-text {
|
|
font-weight: 400;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #616367;
|
|
}
|
|
|
|
.login-view__agreement-link {
|
|
font-weight: 500;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #42A8B3;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ==================== 简历上传阶段 — 右侧面板 ==================== */
|
|
.login-view__form-wrap--resume {
|
|
width: 3.41rem;
|
|
}
|
|
|
|
/* 上传区域 */
|
|
.login-view__upload-area {
|
|
width: 100%;
|
|
padding: 0.4rem 0.4rem;
|
|
border: 2px solid #D6F1EF;
|
|
border-radius: 0.12rem;
|
|
background: #F6FFFF;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.12rem;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
|
|
&:hover {
|
|
border-color: $accent;
|
|
}
|
|
}
|
|
|
|
.login-view__upload-circle {
|
|
width: 0.6rem;
|
|
height: 0.6rem;
|
|
border-radius: 50%;
|
|
background: #E8F8F7;
|
|
}
|
|
|
|
.login-view__upload-text {
|
|
font-size: 0.14rem;
|
|
color: #64748B;
|
|
}
|
|
|
|
.login-view__upload-hint {
|
|
font-size: 0.12rem;
|
|
color: #94A3B8;
|
|
}
|
|
|
|
.login-view__file-input {
|
|
display: none;
|
|
}
|
|
|
|
.login-view__upload-btn {
|
|
height: 0.4rem;
|
|
line-height: 0.4rem;
|
|
background: linear-gradient(90deg, $btn-dark 0%, $btn-dark-hover 100%);
|
|
border: none;
|
|
border-radius: 0.08rem;
|
|
font-size: 0.16rem;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
/* 解析中状态 — 新版步骤面板 */
|
|
.login-view__parse-panel {
|
|
box-sizing: border-box;
|
|
width: 3.41rem;
|
|
padding: 0.24rem;
|
|
background: #F6FFFF;
|
|
border: 1px solid #D6F1EF;
|
|
border-radius: 0.08rem;
|
|
}
|
|
|
|
/* 进度条头部 */
|
|
.login-view__parse-progress-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.08rem;
|
|
}
|
|
|
|
.login-view__parse-progress-label {
|
|
font-weight: 500;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #616367;
|
|
}
|
|
|
|
.login-view__parse-progress-percent {
|
|
font-weight: 700;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #42A8B3;
|
|
}
|
|
|
|
/* 进度轨道 */
|
|
.login-view__parse-progress-rail {
|
|
width: 100%;
|
|
height: 0.06rem;
|
|
background: #E7F2F3;
|
|
border-radius: 0.03rem;
|
|
overflow: hidden;
|
|
margin-bottom: 0.20rem;
|
|
}
|
|
|
|
.login-view__parse-progress-fill {
|
|
height: 100%;
|
|
background: #4FC2C9;
|
|
border-radius: 0.03rem;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
/* 步骤列表 */
|
|
.login-view__parse-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.login-view__parse-step-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
}
|
|
|
|
.login-view__parse-step-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-right: 0.10rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 步骤圆圈 — 完成（实心深色） */
|
|
.login-view__parse-dot {
|
|
width: 0.12rem;
|
|
height: 0.12rem;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.login-view__parse-dot--done {
|
|
background: #4FC2C9;
|
|
}
|
|
|
|
/* 步骤圆圈 — 进行中（光晕 + 呼吸内圆） */
|
|
.login-view__parse-dot--active {
|
|
width: 0.16rem;
|
|
height: 0.16rem;
|
|
background: #E7FAF5;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: -0.02rem;
|
|
margin-right: -0.02rem;
|
|
}
|
|
|
|
.login-view__parse-dot-pulse {
|
|
width: 0.08rem;
|
|
height: 0.08rem;
|
|
background: #4FC2C9;
|
|
border-radius: 50%;
|
|
animation: parse-dot-breathe 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes parse-dot-breathe {
|
|
0%, 100% { transform: scale(0.7); opacity: 0.7; }
|
|
50% { transform: scale(1.2); opacity: 1; }
|
|
}
|
|
|
|
/* 步骤圆圈 — 等待（浅色） */
|
|
.login-view__parse-dot--pending {
|
|
background: #D6F1EF;
|
|
}
|
|
|
|
/* 连接线 */
|
|
.login-view__parse-connector {
|
|
width: 0.02rem;
|
|
height: 0.18rem;
|
|
background: #D6F1EF;
|
|
border-radius: 0.01rem;
|
|
}
|
|
|
|
/* 步骤文字 */
|
|
.login-view__parse-step-text {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #18181A;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.login-view__parse-step-text--pending {
|
|
font-weight: 400;
|
|
color: #616367;
|
|
}
|
|
|
|
/* 步骤状态文字 */
|
|
.login-view__parse-step-state {
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
flex-shrink: 0;
|
|
margin-left: 0.10rem;
|
|
}
|
|
|
|
.login-view__parse-step-state--done {
|
|
font-weight: 500;
|
|
color: #42A8B3;
|
|
}
|
|
|
|
.login-view__parse-step-state--active {
|
|
font-weight: 500;
|
|
color: #42A8B3;
|
|
}
|
|
|
|
.login-view__parse-step-state--pending {
|
|
font-weight: 400;
|
|
color: #939599;
|
|
}
|
|
|
|
/* 解析中按钮（禁用样式） */
|
|
.login-view__parse-btn {
|
|
width: 3.41rem;
|
|
height: 0.40rem;
|
|
background: #A6EAE7;
|
|
border-radius: 0.08rem;
|
|
border: none;
|
|
font-weight: 600;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #FFFFFF;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ==================== 状态4：上传成功面板 ==================== */
|
|
.login-view__success-panel {
|
|
box-sizing: border-box;
|
|
width: 3.41rem;
|
|
padding: 0.28rem 0.24rem;
|
|
background: #F6FFFB;
|
|
border: 1px solid #BCEED7;
|
|
border-radius: 0.08rem;
|
|
}
|
|
|
|
.login-view__success-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.14rem;
|
|
margin-bottom: 0.24rem;
|
|
}
|
|
|
|
.login-view__success-icon-bg {
|
|
width: 0.40rem;
|
|
height: 0.40rem;
|
|
background: #E7FAF0;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.login-view__success-icon-mark {
|
|
font-weight: 700;
|
|
font-size: 0.18rem;
|
|
line-height: 0.22rem;
|
|
color: #22B36A;
|
|
}
|
|
|
|
.login-view__success-header-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.04rem;
|
|
}
|
|
|
|
.login-view__success-title {
|
|
font-weight: 500;
|
|
font-size: 0.13rem;
|
|
line-height: 0.16rem;
|
|
color: #18181A;
|
|
}
|
|
|
|
.login-view__success-detail {
|
|
font-weight: 400;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #616367;
|
|
}
|
|
|
|
.login-view__success-tips {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.16rem;
|
|
}
|
|
|
|
.login-view__success-tip-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.10rem;
|
|
}
|
|
|
|
.login-view__success-tip-dot {
|
|
width: 0.06rem;
|
|
height: 0.06rem;
|
|
background: #22B36A;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.login-view__success-tip-text {
|
|
font-weight: 400;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #616367;
|
|
}
|
|
|
|
/* 进入后台按钮 */
|
|
.login-view__success-btn {
|
|
width: 3.41rem;
|
|
height: 0.40rem;
|
|
background: #4FC2C9;
|
|
border-radius: 0.08rem;
|
|
border: none;
|
|
font-weight: 600;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
/* ==================== 状态3：上传失败面板 ==================== */
|
|
.login-view__failed-panel {
|
|
box-sizing: border-box;
|
|
width: 3.41rem;
|
|
padding: 0.28rem 0.24rem;
|
|
background: #FFFBFA;
|
|
border: 1px solid #FADBD5;
|
|
border-radius: 0.08rem;
|
|
}
|
|
|
|
.login-view__failed-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.14rem;
|
|
margin-bottom: 0.24rem;
|
|
}
|
|
|
|
.login-view__failed-icon-bg {
|
|
width: 0.40rem;
|
|
height: 0.40rem;
|
|
background: #FFF0ED;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.login-view__failed-icon-mark {
|
|
font-weight: 700;
|
|
font-size: 0.18rem;
|
|
line-height: 0.22rem;
|
|
color: #FF6B4A;
|
|
}
|
|
|
|
.login-view__failed-header-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.04rem;
|
|
}
|
|
|
|
.login-view__failed-title {
|
|
font-weight: 500;
|
|
font-size: 0.13rem;
|
|
line-height: 0.16rem;
|
|
color: #18181A;
|
|
}
|
|
|
|
.login-view__failed-detail {
|
|
font-weight: 400;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #616367;
|
|
}
|
|
|
|
.login-view__failed-tips {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.16rem;
|
|
}
|
|
|
|
.login-view__failed-tip-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.10rem;
|
|
}
|
|
|
|
.login-view__failed-tip-dot {
|
|
width: 0.06rem;
|
|
height: 0.06rem;
|
|
background: #FF8D76;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.login-view__failed-tip-text {
|
|
font-weight: 400;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #616367;
|
|
}
|
|
|
|
/* 重新上传按钮 */
|
|
.login-view__failed-btn {
|
|
width: 3.41rem;
|
|
height: 0.40rem;
|
|
background: linear-gradient(90deg, #4FC2C9 0%, #42A8B3 100%);
|
|
box-shadow: 0 0.16rem 0.30rem rgba(15, 83, 87, 0.15);
|
|
border-radius: 0.08rem;
|
|
border: none;
|
|
font-weight: 600;
|
|
font-size: 0.12rem;
|
|
line-height: 0.15rem;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
.login-view__right-footer{
|
|
margin-top: 0.37rem;
|
|
font-size: 0.13rem;
|
|
width: 4rem;
|
|
text-align: center;
|
|
color: #999;
|
|
padding-top: 0.3rem;
|
|
border-top: 1px solid #E7F2F3;
|
|
}
|