优化登录页样式布局和动画效果
This commit is contained in:
bakaECC
parent
f14ebb9f0c
commit
d242217686
@ -19,14 +19,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="shell">
|
<div class="shell">
|
||||||
<section class="brand-card">
|
|
||||||
<!-- <div class="brand-chip">AEROSPACE · DIGITAL MISSION CONTROL</div> -->
|
|
||||||
<h1 class="headline">凌能空间 · AI大模型 应用系统</h1>
|
|
||||||
<p class="subline">
|
|
||||||
面向航天任务的智能中台，支持知识与模型的协同编排。
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<el-form class="form" :model="model" :rules="rules" ref="loginForm">
|
<el-form class="form" :model="model" :rules="rules" ref="loginForm">
|
||||||
<div class="form-meta">
|
<div class="form-meta">
|
||||||
<div>
|
<div>
|
||||||
@ -249,17 +241,47 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 64px 24px;
|
padding: 72px 28px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: radial-gradient(circle at 15% 20%, rgba(120, 190, 255, 0.2), transparent 25%),
|
background: radial-gradient(circle at 18% 22%, rgba(104, 173, 255, 0.2), transparent 30%),
|
||||||
radial-gradient(circle at 80% 10%, rgba(132, 165, 255, 0.16), transparent 22%),
|
radial-gradient(circle at 80% 14%, rgba(139, 92, 246, 0.12), transparent 26%),
|
||||||
linear-gradient(135deg, #f5f8ff 0%, #eef4ff 45%, #e9f3ff 100%);
|
radial-gradient(circle at 28% 82%, rgba(94, 234, 212, 0.12), transparent 24%),
|
||||||
|
linear-gradient(145deg, #f5f7fb 0%, #edf0f6 45%, #e7ebf2 100%);
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
mix-blend-mode: soft-light;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(255, 255, 255, 0.04) 0,
|
||||||
|
rgba(255, 255, 255, 0.04) 1px,
|
||||||
|
transparent 1px,
|
||||||
|
transparent 22px
|
||||||
|
),
|
||||||
|
repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(255, 255, 255, 0.04) 0,
|
||||||
|
rgba(255, 255, 255, 0.04) 1px,
|
||||||
|
transparent 1px,
|
||||||
|
transparent 22px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.08), transparent 35%),
|
||||||
|
radial-gradient(circle at 65% 70%, rgba(255, 255, 255, 0.08), transparent 30%);
|
||||||
|
filter: blur(36px);
|
||||||
|
}
|
||||||
|
|
||||||
// Blob 容器
|
// Blob 容器
|
||||||
.blob-container {
|
.blob-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset: 0;
|
inset: -12%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
@ -268,8 +290,8 @@ export default defineComponent({
|
|||||||
.blob {
|
.blob {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
filter: blur(90px);
|
filter: blur(100px);
|
||||||
opacity: 0.55;
|
opacity: 0.46;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
mix-blend-mode: screen;
|
mix-blend-mode: screen;
|
||||||
}
|
}
|
||||||
@ -277,25 +299,25 @@ export default defineComponent({
|
|||||||
.blob-1 {
|
.blob-1 {
|
||||||
width: 520px;
|
width: 520px;
|
||||||
height: 520px;
|
height: 520px;
|
||||||
background: linear-gradient(135deg, rgba(93, 156, 255, 0.22), rgba(141, 198, 255, 0.26));
|
background: linear-gradient(135deg, rgba(93, 156, 255, 0.32), rgba(141, 198, 255, 0.24));
|
||||||
top: -160px;
|
top: -140px;
|
||||||
right: -180px;
|
right: -160px;
|
||||||
animation: blob-float 18s ease-in-out infinite;
|
animation: blob-float 18s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blob-2 {
|
.blob-2 {
|
||||||
width: 480px;
|
width: 500px;
|
||||||
height: 480px;
|
height: 500px;
|
||||||
background: linear-gradient(135deg, rgba(126, 211, 180, 0.2), rgba(121, 189, 255, 0.24));
|
background: linear-gradient(135deg, rgba(126, 211, 180, 0.26), rgba(121, 189, 255, 0.22));
|
||||||
bottom: -150px;
|
bottom: -140px;
|
||||||
left: -140px;
|
left: -120px;
|
||||||
animation: blob-float-2 22s ease-in-out infinite;
|
animation: blob-float-2 22s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blob-3 {
|
.blob-3 {
|
||||||
width: 420px;
|
width: 420px;
|
||||||
height: 420px;
|
height: 420px;
|
||||||
background: linear-gradient(135deg, rgba(255, 214, 165, 0.24), rgba(161, 196, 253, 0.22));
|
background: linear-gradient(135deg, rgba(255, 214, 165, 0.28), rgba(161, 196, 253, 0.22));
|
||||||
top: 48%;
|
top: 48%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
@ -305,26 +327,11 @@ export default defineComponent({
|
|||||||
.shell {
|
.shell {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
width: min(1200px, 100%);
|
width: min(520px, 100%);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1.2fr 1fr;
|
|
||||||
gap: 32px;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-card {
|
|
||||||
padding: 32px;
|
|
||||||
border-radius: 24px;
|
|
||||||
background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.78) 100%);
|
|
||||||
border: 1px solid #e3eaf5;
|
|
||||||
box-shadow: 0 20px 60px rgba(47, 85, 151, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
-webkit-backdrop-filter: blur(16px);
|
|
||||||
color: #1f2b3d;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
gap: 16px;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-chip {
|
.brand-chip {
|
||||||
@ -342,68 +349,78 @@ export default defineComponent({
|
|||||||
|
|
||||||
.headline {
|
.headline {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 32px;
|
font-size: 0;
|
||||||
font-weight: 800;
|
|
||||||
color: #0f172a;
|
|
||||||
line-height: 1.2;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.subline {
|
.subline {
|
||||||
margin: 0;
|
display: none;
|
||||||
font-size: 15px;
|
|
||||||
color: #4b5563;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 36px 32px;
|
padding: 40px 36px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: #ffffff;
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.94) 100%);
|
||||||
border: 1px solid #d7e0ef;
|
border: 1px solid rgba(120, 149, 203, 0.18);
|
||||||
border-radius: 24px;
|
border-radius: 26px;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 18px 60px rgba(0, 0, 0, 0.25),
|
0 24px 80px rgba(88, 112, 156, 0.22),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.35s ease;
|
||||||
|
overflow: hidden;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -36%;
|
||||||
|
background: conic-gradient(from 140deg, rgba(99, 102, 241, 0.12), rgba(34, 211, 238, 0.16), rgba(45, 212, 191, 0.12), rgba(99, 102, 241, 0.12));
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
filter: blur(38px);
|
||||||
|
z-index: 0;
|
||||||
|
animation: form-glow 12s ease-in-out infinite;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 22px 70px rgba(15, 23, 42, 0.16),
|
0 28px 96px rgba(88, 112, 156, 0.26),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.95);
|
inset 0 1px 0 rgba(255, 255, 255, 0.88);
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep {
|
:deep {
|
||||||
.el-input__wrapper {
|
.el-input__wrapper {
|
||||||
background: #f3f6fb;
|
background: rgba(255, 255, 255, 0.72);
|
||||||
border: 1px solid #d7e0ef;
|
border: 1px solid rgba(120, 149, 203, 0.25);
|
||||||
border-radius: 12px;
|
border-radius: 14px;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 2px 10px rgba(0, 0, 0, 0.04),
|
0 6px 18px rgba(36, 79, 140, 0.12),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.95);
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||||
transition: all 0.25s ease;
|
transition: all 0.25s ease;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #ffffff;
|
border-color: rgba(120, 149, 203, 0.36);
|
||||||
border-color: #c2cfe4;
|
background: rgba(255, 255, 255, 0.86);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-focus {
|
&.is-focus {
|
||||||
background: #ffffff;
|
background: rgba(255, 255, 255, 0.96);
|
||||||
border-color: #4f8dfd;
|
border-color: #6aa6ff;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 6px 18px rgba(79, 141, 253, 0.18),
|
0 12px 28px rgba(106, 166, 255, 0.3),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.95),
|
inset 0 1px 0 rgba(255, 255, 255, 0.94),
|
||||||
0 0 0 3px rgba(79, 141, 253, 0.16);
|
0 0 0 4px rgba(106, 166, 255, 0.22);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input__inner {
|
.el-input__inner {
|
||||||
color: #0f172a;
|
color: #0f172a;
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: #6b7280;
|
color: #6b7280;
|
||||||
@ -427,32 +444,34 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-meta {
|
.form-meta {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #6b7280;
|
color: #6b7280;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
letter-spacing: 0.06em;
|
letter-spacing: 0.08em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
color: #0f172a;
|
color: #0f172a;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
margin: 4px 0 6px;
|
margin: 4px 0 6px;
|
||||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
text-shadow: 0 10px 18px rgba(74, 88, 126, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-desc {
|
.title-desc {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #4b5563;
|
color: #4b5563;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -475,33 +494,37 @@ export default defineComponent({
|
|||||||
|
|
||||||
.text {
|
.text {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
:deep(.el-input__inner) {
|
:deep(.el-input__inner) {
|
||||||
color: #0f172a;
|
color: #0f172a;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: #6b7280;
|
color: #6b7280;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 48px;
|
height: 50px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 700;
|
font-weight: 750;
|
||||||
border-radius: 12px;
|
border-radius: 14px;
|
||||||
background: linear-gradient(135deg, hsl(217 91% 60%) 0%, hsl(189 94% 50%) 100%);
|
background: linear-gradient(135deg, #7bb6ff 0%, #6fe0c0 50%, #6ad5f3 100%);
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 4px 16px rgba(56, 189, 248, 0.4),
|
0 10px 28px rgba(111, 224, 192, 0.35),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
&:hover:not(:disabled) {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px) scale(1.01);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 8px 24px rgba(56, 189, 248, 0.5),
|
0 16px 38px rgba(111, 224, 192, 0.42),
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -511,12 +534,14 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
color: rgba(255, 255, 255, 0.6);
|
color: rgba(9, 8, 8, 0.7);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin: 6px 0 12px;
|
margin: 10px 0 14px;
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
@ -528,20 +553,22 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-sso {
|
.btn-sso {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 46px;
|
height: 48px;
|
||||||
border-radius: 12px;
|
border-radius: 14px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.45);
|
border: 1px solid rgba(120, 149, 203, 0.28);
|
||||||
color: #f8fbff;
|
color: #0f172a;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
background: rgba(255, 255, 255, 0.12);
|
background: linear-gradient(120deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82));
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
|
box-shadow: 0 10px 28px rgba(88, 112, 156, 0.18);
|
||||||
transition: all 0.25s ease;
|
transition: all 0.25s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(255, 255, 255, 0.18);
|
background: rgba(255, 255, 255, 0.96);
|
||||||
border-color: rgba(255, 255, 255, 0.7);
|
border-color: rgba(120, 149, 203, 0.42);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -582,6 +609,31 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes form-glow {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg) scale(1);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: rotate(180deg) scale(1.06);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg) scale(1);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1080px) {
|
||||||
|
.login {
|
||||||
|
padding: 60px 22px;
|
||||||
|
|
||||||
|
.shell {
|
||||||
|
width: min(520px, 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.change-lang {
|
.change-lang {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user