first commit
This commit is contained in:
120
src/assets/styles/auth.css
Normal file
120
src/assets/styles/auth.css
Normal file
@@ -0,0 +1,120 @@
|
||||
/* 认证页面全局样式 */
|
||||
|
||||
/* 输入框样式优化 */
|
||||
.auth-input :deep(.el-input__wrapper) {
|
||||
border-radius: 8px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
border: 1px solid #d1d5db !important;
|
||||
}
|
||||
|
||||
.auth-input :deep(.el-input__wrapper:hover) {
|
||||
border-color: #3b82f6 !important;
|
||||
}
|
||||
|
||||
.auth-input :deep(.el-input__wrapper.is-focus) {
|
||||
border-color: #3b82f6 !important;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
|
||||
}
|
||||
|
||||
/* 按钮样式优化 */
|
||||
.auth-button :deep(.el-button--primary) {
|
||||
border-radius: 8px !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all 0.3s ease !important;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.auth-button :deep(.el-button--primary:hover) {
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%) !important;
|
||||
}
|
||||
|
||||
.auth-button :deep(.el-button--primary:active) {
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
|
||||
/* Radio button 样式优化 */
|
||||
.auth-radio :deep(.el-radio-button__inner) {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
color: #6b7280 !important;
|
||||
font-weight: 500 !important;
|
||||
transition: all 0.3s ease !important;
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
|
||||
.auth-radio :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
||||
background: white !important;
|
||||
color: #3b82f6 !important;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
|
||||
}
|
||||
|
||||
/* 表单标签样式 */
|
||||
.auth-label {
|
||||
@apply block text-sm font-medium text-gray-700 mb-2;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
.auth-link {
|
||||
@apply text-gray-600 hover:text-sky-600 transition-colors mx-2;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.auth-card {
|
||||
@apply bg-white/95 backdrop-blur-sm shadow-2xl rounded-2xl border border-white/20;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.auth-title {
|
||||
@apply text-2xl font-bold text-gray-900 mb-2;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
@apply text-gray-600 text-sm;
|
||||
}
|
||||
|
||||
/* 响应式优化 */
|
||||
@media (max-width: 640px) {
|
||||
.auth-input :deep(.el-input__wrapper) {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.auth-button :deep(.el-button--primary) {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
.auth-fade-in {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.auth-loading {
|
||||
@apply opacity-75 pointer-events-none;
|
||||
}
|
||||
|
||||
/* 错误状态样式 */
|
||||
.auth-error :deep(.el-input__wrapper) {
|
||||
border-color: #ef4444 !important;
|
||||
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
|
||||
}
|
||||
|
||||
/* 成功状态样式 */
|
||||
.auth-success :deep(.el-input__wrapper) {
|
||||
border-color: #10b981 !important;
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user