diff --git a/src/assets/style/auth-pages.scss b/src/assets/style/auth-pages.scss new file mode 100644 index 0000000..b07d2ff --- /dev/null +++ b/src/assets/style/auth-pages.scss @@ -0,0 +1,570 @@ +// 认证页面统一样式文件 +// 使用明亮暖色调配色方案 + +// ===== 颜色变量 ===== +$primary-color: #ff6b35; // 橙红色 +$primary-light: #ff8a5b; // 浅橙红色 +$primary-dark: #e55a2b; // 深橙红色 +$secondary-color: #ffd93d; // 金黄色 +$accent-color: #ffb84d; // 橙黄色 + +$bg-dark: #1a1a2e; // 深色背景 +$bg-light: #16213e; // 浅色背景 +$bg-gradient-start: #0f0f23; // 渐变开始 +$bg-gradient-end: #1a1a2e; // 渐变结束 + +$text-primary: #ffffff; +$text-secondary: rgba(255, 255, 255, 0.7); +$text-muted: rgba(255, 255, 255, 0.5); + +$border-color: rgba(255, 255, 255, 0.08); +$border-hover: rgba(255, 107, 53, 0.3); +$border-focus: rgba(255, 107, 53, 0.6); + +// ===== 基础容器 ===== +.auth-container { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + position: relative; + background: linear-gradient(135deg, $bg-gradient-start 0%, $bg-gradient-end 100%); + overflow: hidden; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', + 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} + +// ===== 科技感背景 ===== +.tech-bg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; + pointer-events: none; + + // 网格线 + .grid-line { + position: absolute; + width: 100%; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.08), transparent); + animation: gridMove 8s linear infinite; + + &:nth-child(1) { top: 20%; animation-delay: 0s; } + &:nth-child(2) { top: 40%; animation-delay: 2s; } + &:nth-child(3) { top: 60%; animation-delay: 4s; } + &:nth-child(4) { top: 80%; animation-delay: 6s; } + } + + // 光点效果 + .light-spot { + position: absolute; + width: 4px; + height: 4px; + background: $primary-color; + border-radius: 50%; + box-shadow: 0 0 10px $primary-color, 0 0 20px $primary-color; + animation: float 6s ease-in-out infinite; + + &:nth-child(5) { top: 15%; left: 20%; animation-delay: 0s; } + &:nth-child(6) { top: 25%; left: 70%; animation-delay: 2s; } + &:nth-child(7) { top: 55%; left: 15%; animation-delay: 4s; } + &:nth-child(8) { top: 75%; left: 80%; animation-delay: 1s; } + } +} + +@keyframes gridMove { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(100%); } +} + +@keyframes float { + 0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; } + 50% { transform: translateY(-20px) scale(1.2); opacity: 1; } +} + +// ===== 主卡片 ===== +.auth-wrapper { + width: 100%; + max-width: 960px; + padding: 20px; + position: relative; + z-index: 1; +} + +.auth-card { + background: rgba(255, 255, 255, 0.02); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border-radius: 28px; + padding: 0; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); + border: 1px solid $border-color; + overflow: hidden; + display: flex; + min-height: 580px; + animation: cardFadeIn 0.6s ease-out; +} + +@keyframes cardFadeIn { + 0% { opacity: 0; transform: translateY(20px); } + 100% { opacity: 1; transform: translateY(0); } +} + +// ===== 左侧装饰区 ===== +.decoration-area { + flex: 1; + background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(255, 217, 61, 0.03) 100%); + padding: 60px 40px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + border-right: 1px solid $border-color; +} + +.tech-circle { + position: relative; + width: 220px; + height: 220px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 48px; + + .circle-inner { + width: 110px; + height: 110px; + background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%); + border-radius: 50%; + box-shadow: 0 0 50px rgba(255, 107, 53, 0.4); + animation: pulse 3s ease-in-out infinite; + display: flex; + align-items: center; + justify-content: center; + + &::after { + content: ''; + width: 60px; + height: 60px; + background: linear-gradient(135deg, $secondary-color 0%, $accent-color 100%); + border-radius: 50%; + box-shadow: 0 0 30px rgba(255, 217, 61, 0.5); + } + } + + .circle-ring { + position: absolute; + width: 160px; + height: 160px; + border: 2px solid rgba(255, 107, 53, 0.2); + border-radius: 50%; + animation: rotate 12s linear infinite; + + &::before { + content: ''; + position: absolute; + top: -2px; + left: 50%; + transform: translateX(-50%); + width: 8px; + height: 8px; + background: $primary-color; + border-radius: 50%; + box-shadow: 0 0 15px $primary-color; + } + } + + .circle-ring-2 { + width: 200px; + height: 200px; + border: 1px solid rgba(255, 217, 61, 0.15); + animation: rotate 18s linear infinite reverse; + } +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); opacity: 1; } + 50% { transform: scale(1.08); opacity: 0.85; } +} + +@keyframes rotate { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.decoration-text { + text-align: center; + + h2 { + margin: 0 0 16px; + font-size: 32px; + font-weight: 700; + background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + letter-spacing: 1px; + } + + p { + margin: 0; + color: $text-secondary; + font-size: 16px; + font-weight: 400; + letter-spacing: 0.5px; + } +} + +// ===== 右侧表单区 ===== +.form-area { + flex: 1.3; + padding: 60px 56px; +} + +.auth-header { + margin-bottom: 40px; + + h1 { + margin: 0 0 12px; + font-size: 36px; + font-weight: 700; + background: linear-gradient(135deg, $primary-color 0%, $accent-color 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + letter-spacing: 1px; + } + + .subtitle { + margin: 0; + color: $text-secondary; + font-size: 15px; + font-weight: 400; + } +} + +// ===== 表单样式 ===== +.auth-form { + margin-top: 0; + + :deep(.ant-form-item) { + margin-bottom: 26px; + } + + :deep(.ant-form-item-label > label) { + color: $text-secondary; + font-size: 14px; + font-weight: 500; + } + + // 输入框样式 + :deep(.ant-input-affix-wrapper), + :deep(.ant-input) { + background: rgba(255, 255, 255, 0.03); + border: 1px solid $border-color; + border-radius: 12px; + color: $text-primary; + padding: 12px 16px; + font-size: 15px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + &:hover { + background: rgba(255, 255, 255, 0.06); + border-color: $border-hover; + } + + &:focus, + &.ant-input-affix-wrapper-focused { + background: rgba(255, 255, 255, 0.06); + border-color: $primary-color; + box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1); + } + } + + :deep(.ant-input::placeholder) { + color: $text-muted; + } + + :deep(.ant-input-affix-wrapper > input.ant-input) { + background: transparent; + } + + // 图标样式 + :deep(.anticon) { + color: $text-secondary; + font-size: 16px; + transition: color 0.3s; + } + + :deep(.ant-input-affix-wrapper-focused .anticon) { + color: $primary-color; + } +} + +// ===== 按钮样式 ===== +.auth-form :deep(.ant-btn-primary) { + background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%); + border: none; + border-radius: 12px; + height: 48px; + font-weight: 600; + font-size: 16px; + letter-spacing: 0.5px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); + + &:hover:not(:disabled) { + background: linear-gradient(135deg, $primary-light 0%, $accent-color 100%); + box-shadow: 0 6px 25px rgba(255, 107, 53, 0.4); + transform: translateY(-2px); + } + + &:active:not(:disabled) { + transform: translateY(0); + box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3); + } + + &:disabled { + background: rgba(255, 255, 255, 0.08); + color: $text-muted; + box-shadow: none; + transform: none; + cursor: not-allowed; + } +} + +// ===== 表单选项 ===== +.form-options { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 26px; + + :deep(.ant-checkbox-wrapper) { + color: $text-primary; + font-size: 14px; + + .ant-checkbox { + .ant-checkbox-inner { + border-color: $border-color; + background: rgba(255, 255, 255, 0.03); + } + + &.ant-checkbox-checked .ant-checkbox-inner { + background: $primary-color; + border-color: $primary-color; + } + } + } +} + +.forgot-password { + color: $primary-color; + text-decoration: none; + font-size: 14px; + font-weight: 500; + transition: all 0.3s; + + &:hover { + color: $primary-light; + text-decoration: underline; + } +} + +// ===== 验证码输入框 ===== +.code-input-wrapper { + display: flex; + gap: 14px; + + .code-input { + flex: 1; + } + + .code-btn { + width: 150px; + white-space: nowrap; + background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%); + border: none; + border-radius: 12px; + font-weight: 600; + font-size: 14px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); + + &:hover:not(:disabled) { + background: linear-gradient(135deg, $primary-light 0%, $accent-color 100%); + box-shadow: 0 6px 25px rgba(255, 107, 53, 0.4); + transform: translateY(-2px); + } + + &:active:not(:disabled) { + transform: translateY(0); + } + + &:disabled { + background: rgba(255, 255, 255, 0.08); + color: $text-muted; + box-shadow: none; + transform: none; + cursor: not-allowed; + } + } +} + +// ===== 协议复选框 ===== +.agreement-checkbox { + :deep(.ant-checkbox-wrapper) { + color: $text-secondary; + font-size: 13px; + align-items: flex-start; + line-height: 1.6; + + .ant-checkbox { + margin-top: 2px; + + .ant-checkbox-inner { + border-color: $border-color; + background: rgba(255, 255, 255, 0.03); + } + + &.ant-checkbox-checked .ant-checkbox-inner { + background: $primary-color; + border-color: $primary-color; + } + } + } +} + +.agreement-text { + font-size: 13px; + line-height: 1.6; + color: $text-secondary; +} + +.link { + color: $primary-color; + text-decoration: none; + font-weight: 500; + transition: all 0.3s; + + &:hover { + color: $primary-light; + text-decoration: underline; + } +} + +// ===== 表单底部 ===== +.form-footer { + text-align: center; + margin-top: 28px; + color: $text-secondary; + font-size: 14px; + + .auth-link { + color: $primary-color; + text-decoration: none; + font-weight: 600; + margin-left: 6px; + transition: all 0.3s; + + &:hover { + color: $primary-light; + text-decoration: underline; + } + } +} + +// ===== 响应式设计 ===== +@media (max-width: 768px) { + .auth-card { + flex-direction: column; + min-height: auto; + margin: 20px 0; + } + + .decoration-area { + padding: 48px 24px; + border-right: none; + border-bottom: 1px solid $border-color; + } + + .tech-circle { + width: 160px; + height: 160px; + + .circle-inner { + width: 80px; + height: 80px; + + &::after { + width: 45px; + height: 45px; + } + } + + .circle-ring { + width: 120px; + height: 120px; + } + + .circle-ring-2 { + width: 150px; + height: 150px; + } + } + + .decoration-text { + h2 { + font-size: 26px; + } + + p { + font-size: 14px; + } + } + + .form-area { + padding: 48px 32px; + } + + .auth-header { + h1 { + font-size: 28px; + } + + .subtitle { + font-size: 14px; + } + } + + .code-input-wrapper { + flex-direction: column; + gap: 12px; + + .code-btn { + width: 100%; + } + } +} + +@media (max-width: 480px) { + .auth-wrapper { + padding: 16px; + } + + .auth-card { + border-radius: 20px; + } + + .form-area { + padding: 36px 24px; + } + + .auth-header { + margin-bottom: 32px; + } +} diff --git a/src/pages/auth/permission/index.vue b/src/pages/auth/permission/index.vue index adb798b..c4b3df4 100644 --- a/src/pages/auth/permission/index.vue +++ b/src/pages/auth/permission/index.vue @@ -11,8 +11,8 @@
找回您的账户访问权限
重置密码
设置新密码
+