|
@@ -259,7 +259,7 @@ const handleRegister = async () => {
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
min-height: 100vh;
|
|
min-height: 100vh;
|
|
|
- background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, #e8edf9 0%, #d4def5 50%, #c1cef0 100%);
|
|
|
position: relative;
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
@@ -279,7 +279,7 @@ const handleRegister = async () => {
|
|
|
.circle-1 {
|
|
.circle-1 {
|
|
|
width: 400px;
|
|
width: 400px;
|
|
|
height: 400px;
|
|
height: 400px;
|
|
|
- background: #db2777;
|
|
|
|
|
|
|
+ background: #143694;
|
|
|
top: -100px;
|
|
top: -100px;
|
|
|
right: -100px;
|
|
right: -100px;
|
|
|
animation: float 20s ease-in-out infinite;
|
|
animation: float 20s ease-in-out infinite;
|
|
@@ -288,7 +288,7 @@ const handleRegister = async () => {
|
|
|
.circle-2 {
|
|
.circle-2 {
|
|
|
width: 300px;
|
|
width: 300px;
|
|
|
height: 300px;
|
|
height: 300px;
|
|
|
- background: #f472b6;
|
|
|
|
|
|
|
+ background: #5b7fd4;
|
|
|
bottom: -80px;
|
|
bottom: -80px;
|
|
|
left: -80px;
|
|
left: -80px;
|
|
|
animation: float 15s ease-in-out infinite reverse;
|
|
animation: float 15s ease-in-out infinite reverse;
|
|
@@ -297,7 +297,7 @@ const handleRegister = async () => {
|
|
|
.circle-3 {
|
|
.circle-3 {
|
|
|
width: 200px;
|
|
width: 200px;
|
|
|
height: 200px;
|
|
height: 200px;
|
|
|
- background: #ca8a04;
|
|
|
|
|
|
|
+ background: #2a4fa6;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
left: 60%;
|
|
left: 60%;
|
|
|
animation: float 18s ease-in-out infinite;
|
|
animation: float 18s ease-in-out infinite;
|
|
@@ -329,7 +329,7 @@ const handleRegister = async () => {
|
|
|
|
|
|
|
|
.auth-card {
|
|
.auth-card {
|
|
|
border-radius: 16px;
|
|
border-radius: 16px;
|
|
|
- border: 1px solid rgba(219, 39, 119, 0.1);
|
|
|
|
|
|
|
+ border: 1px solid rgba(20, 54, 148, 0.1);
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
|
padding: 8px;
|
|
padding: 8px;
|
|
@@ -339,14 +339,14 @@ const handleRegister = async () => {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top: 16px;
|
|
top: 16px;
|
|
|
left: 16px;
|
|
left: 16px;
|
|
|
- color: #be185d;
|
|
|
|
|
|
|
+ color: #143694;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
transition: color 0.2s;
|
|
transition: color 0.2s;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.back-btn:hover {
|
|
.back-btn:hover {
|
|
|
- color: #db2777;
|
|
|
|
|
|
|
+ color: #1a44b8;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.back-btn .el-icon {
|
|
.back-btn .el-icon {
|
|
@@ -362,14 +362,14 @@ const handleRegister = async () => {
|
|
|
margin: 0 0 8px;
|
|
margin: 0 0 8px;
|
|
|
font-size: 28px;
|
|
font-size: 28px;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
- color: #831843;
|
|
|
|
|
|
|
+ color: #0f2a73;
|
|
|
letter-spacing: 2px;
|
|
letter-spacing: 2px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.auth-subtitle {
|
|
.auth-subtitle {
|
|
|
margin: 0;
|
|
margin: 0;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
- color: #be185d;
|
|
|
|
|
|
|
+ color: #143694;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.auth-tabs {
|
|
.auth-tabs {
|
|
@@ -383,22 +383,22 @@ const handleRegister = async () => {
|
|
|
:deep(.auth-tabs .el-tabs__item) {
|
|
:deep(.auth-tabs .el-tabs__item) {
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
- color: #831843;
|
|
|
|
|
|
|
+ color: #0f2a73;
|
|
|
transition: color 0.2s;
|
|
transition: color 0.2s;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
:deep(.auth-tabs .el-tabs__item.is-active) {
|
|
:deep(.auth-tabs .el-tabs__item.is-active) {
|
|
|
- color: #db2777;
|
|
|
|
|
|
|
+ color: #143694;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
:deep(.auth-tabs .el-tabs__active-bar) {
|
|
:deep(.auth-tabs .el-tabs__active-bar) {
|
|
|
- background-color: #db2777;
|
|
|
|
|
|
|
+ background-color: #143694;
|
|
|
height: 3px;
|
|
height: 3px;
|
|
|
border-radius: 3px;
|
|
border-radius: 3px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
:deep(.auth-tabs .el-tabs__nav-wrap::after) {
|
|
:deep(.auth-tabs .el-tabs__nav-wrap::after) {
|
|
|
- background-color: rgba(219, 39, 119, 0.15);
|
|
|
|
|
|
|
+ background-color: rgba(20, 54, 148, 0.15);
|
|
|
height: 1px;
|
|
height: 1px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -409,20 +409,20 @@ const handleRegister = async () => {
|
|
|
:deep(.el-input__wrapper) {
|
|
:deep(.el-input__wrapper) {
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
padding: 8px 12px;
|
|
padding: 8px 12px;
|
|
|
- box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.15) inset;
|
|
|
|
|
|
|
+ box-shadow: 0 0 0 1px rgba(20, 54, 148, 0.15) inset;
|
|
|
transition: box-shadow 0.2s;
|
|
transition: box-shadow 0.2s;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
:deep(.el-input__wrapper:hover) {
|
|
:deep(.el-input__wrapper:hover) {
|
|
|
- box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.3) inset;
|
|
|
|
|
|
|
+ box-shadow: 0 0 0 1px rgba(20, 54, 148, 0.3) inset;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
:deep(.el-input__wrapper.is-focus) {
|
|
:deep(.el-input__wrapper.is-focus) {
|
|
|
- box-shadow: 0 0 0 1px #db2777 inset;
|
|
|
|
|
|
|
+ box-shadow: 0 0 0 1px #143694 inset;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
:deep(.el-input__prefix) {
|
|
:deep(.el-input__prefix) {
|
|
|
- color: #db2777;
|
|
|
|
|
|
|
+ color: #143694;
|
|
|
margin-right: 8px;
|
|
margin-right: 8px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -432,15 +432,15 @@ const handleRegister = async () => {
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
letter-spacing: 4px;
|
|
letter-spacing: 4px;
|
|
|
- background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, #143694 0%, #1a44b8 100%);
|
|
|
border: none;
|
|
border: none;
|
|
|
transition: all 0.2s;
|
|
transition: all 0.2s;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.auth-submit:hover {
|
|
.auth-submit:hover {
|
|
|
- background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
|
|
|
|
|
|
|
+ background: linear-gradient(135deg, #0f2a73 0%, #143694 100%);
|
|
|
transform: translateY(-1px);
|
|
transform: translateY(-1px);
|
|
|
- box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3);
|
|
|
|
|
|
|
+ box-shadow: 0 4px 12px rgba(20, 54, 148, 0.3);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.auth-submit:active {
|
|
.auth-submit:active {
|