登陆页左侧新广告特效
This commit is contained in:
@@ -8,55 +8,169 @@
|
||||
background: #F7FEFC;
|
||||
}
|
||||
|
||||
/* ==================== 左侧品牌面板 ==================== */
|
||||
.login-view__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* ==================== 左侧视觉动画面板 ==================== */
|
||||
.login-visual {
|
||||
position: relative;
|
||||
width: 57%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #0A9E97 0%, #12C7BE 50%, #06B6D4 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #ddf4f2;
|
||||
}
|
||||
|
||||
/* 装饰圆圈 */
|
||||
.login-view__deco-circle {
|
||||
border-radius: 50%;
|
||||
.login-jianshi-logo {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
bottom: 10px;
|
||||
width: 82px;
|
||||
height: 21px;
|
||||
object-fit: contain;
|
||||
pointer-events: auto;
|
||||
user-select: none;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.login-view__deco-circle--lg {
|
||||
width: 4.8rem;
|
||||
height: 4.8rem;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.ai-hub-stage {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1100px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1405px 1269px;
|
||||
background-position: -210px -117px;
|
||||
z-index: 1;
|
||||
transform-origin: top left;
|
||||
transform: translate3d(var(--stage-x, 0px), var(--stage-y, 0px), 0) scale(var(--stage-scale, 1));
|
||||
}
|
||||
|
||||
.login-view__deco-circle--sm {
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
/* 标题 */
|
||||
.hero-title {
|
||||
position: absolute;
|
||||
left: 35px;
|
||||
top: 64px;
|
||||
width: 374px;
|
||||
height: 88px;
|
||||
color: #2a8186;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 44px;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 左侧中心内容 */
|
||||
.login-view__left-content {
|
||||
.hero-title__second-line {
|
||||
display: block;
|
||||
padding-left: 72px;
|
||||
}
|
||||
|
||||
/* Nova 核心机器人 */
|
||||
.nova-core {
|
||||
position: absolute;
|
||||
left: 183px;
|
||||
top: 259px;
|
||||
width: 592px;
|
||||
height: 443px;
|
||||
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: 20px;
|
||||
height: 44px;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
will-change: transform;
|
||||
transition: transform .05s linear;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.nova-eye-left {
|
||||
left: 253.77px;
|
||||
top: 177px;
|
||||
}
|
||||
|
||||
.nova-eye-right {
|
||||
left: 310.77px;
|
||||
top: 177px;
|
||||
}
|
||||
|
||||
.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, 4px, 0) scale(.996);
|
||||
filter: drop-shadow(0 16px 28px 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, 4px, 0) scale(.996);
|
||||
filter: drop-shadow(0 16px 28px rgba(56, 255, 202, .10)) brightness(1);
|
||||
}
|
||||
20.896%, 79.104% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
filter: drop-shadow(0 16px 28px rgba(56, 255, 202, .20)) brightness(1.045);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -4px, 0) scale(.996);
|
||||
filter: drop-shadow(0 16px 28px rgba(56, 255, 202, .10)) brightness(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 右侧表单面板 ==================== */
|
||||
.login-view__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 0.32rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 43%;
|
||||
height: 100%;
|
||||
background: #F6FDFB;
|
||||
}
|
||||
|
||||
/* Logo 行 */
|
||||
/* Logo 行（右侧及简历阶段通用） */
|
||||
.login-view__logo-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -99,56 +213,6 @@
|
||||
color: #351616;
|
||||
}
|
||||
|
||||
/* 标语 */
|
||||
.login-view__slogan {
|
||||
font-weight: 700;
|
||||
font-size: 0.4rem;
|
||||
line-height: 0.56rem;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.login-view__sub-slogan {
|
||||
font-weight: 400;
|
||||
font-size: 0.16rem;
|
||||
line-height: 0.19rem;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
/* 特性药丸标签 */
|
||||
.login-view__pills {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 0.24rem;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.login-view__pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.12rem 0.2rem;
|
||||
gap: 0.08rem;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 0.24rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.17rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* ==================== 右侧表单面板 ==================== */
|
||||
.login-view__right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 43%;
|
||||
height: 100%;
|
||||
background: #F6FDFB;
|
||||
}
|
||||
|
||||
.login-view__logo-row--right {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
@@ -446,6 +510,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== 简历上传阶段 — 左侧基础（step 3 使用） ==================== */
|
||||
.login-view__left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 57%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #0A9E97 0%, #12C7BE 50%, #06B6D4 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==================== 简历上传阶段 — 左侧职位卡片面板 ==================== */
|
||||
.login-view__left--resume {
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user