feat: 登录界面UI优化 - 科技极简黑蓝紫风格
设计亮点： 1. 左右布局分区 - 左侧：品牌展示区，深空黑渐变背景 - 右侧：登录表单区，黑色主题 2. 配色方案 - 主色调：深空黑(#0a0a0a) + 冰川蓝(#6B8AFF) + 薰衣紫(#A855F7) - 标题：紫色渐变 - 提示文字：蓝色 - 背景光点：蓝紫渐变 3. 交互特效 - 背景50个光点随机分布，hover时联动放大发光 - 品牌区脉冲动画背景光晕 - 图标浮动动画 - 按钮hover光扫过效果 4. 输入框设计 - 极简圆角矩形(12px) - 边框：浅灰透明 - 聚焦：蓝紫渐变光晕 - 背景：深色半透明 5. 按钮设计 - 纯黑底色 + 蓝紫渐变 - 压印线条图案(光扫效果) - hover时提升阴影和上移 6. 品牌元素 - SVG渐变Logo - 产品slogan：AI赋能·智创未来 - 特性标签：智能创作、数字人技术、内容分析 响应式： - 小屏自动切换为上下布局 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,142 +1,188 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<!-- 背景动画 -->
|
||||
<div class="bg-animation">
|
||||
<div class="floating-shapes">
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
<div class="shape shape-4"></div>
|
||||
</div>
|
||||
<!-- 科技感背景光点 -->
|
||||
<div class="bg-stars">
|
||||
<div
|
||||
v-for="(star, index) in stars"
|
||||
:key="index"
|
||||
class="star"
|
||||
:class="{ active: star.active }"
|
||||
:style="{
|
||||
left: star.left + '%',
|
||||
top: star.top + '%',
|
||||
width: star.size + 'px',
|
||||
height: star.size + 'px'
|
||||
}"
|
||||
@mouseenter="activateStar(index)"
|
||||
@mouseleave="deactivateStar(index)"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单卡片 -->
|
||||
<div class="login-card">
|
||||
<div class="card-header">
|
||||
<h1 class="title">欢迎回来</h1>
|
||||
<p class="subtitle">登录您的账户以继续</p>
|
||||
<div class="login-content">
|
||||
<!-- 左侧品牌区 -->
|
||||
<div class="brand-panel">
|
||||
<div class="brand-inner">
|
||||
<div class="brand-icon">
|
||||
<svg width="80" height="80" viewBox="0 0 80 80">
|
||||
<defs>
|
||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6B8AFF;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#A855F7;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="40" cy="40" r="35" fill="none" stroke="url(#grad1)" stroke-width="2"/>
|
||||
<path d="M 40 20 L 40 40 L 55 40" stroke="url(#grad1)" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="brand-title">金牌内容大师</h1>
|
||||
<p class="brand-subtitle">AI赋能 · 智创未来</p>
|
||||
<div class="brand-features">
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">✦</span>
|
||||
<span>智能创作</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">✦</span>
|
||||
<span>数字人技术</span>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<span class="feature-icon">✦</span>
|
||||
<span>内容分析</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-tabs v-model:activeKey="activeTab" centered class="login-tabs">
|
||||
<a-tab-pane key="sms" tab="短信登录">
|
||||
<a-form
|
||||
:model="smsForm"
|
||||
:rules="smsRules"
|
||||
ref="smsFormRef"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item name="mobile" label="手机号">
|
||||
<a-input
|
||||
v-model:value="smsForm.mobile"
|
||||
size="large"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="11"
|
||||
<!-- 右侧登录区 -->
|
||||
<div class="login-panel">
|
||||
<div class="login-card">
|
||||
<div class="card-header">
|
||||
<h2 class="login-title">欢迎登录</h2>
|
||||
<p class="login-subtitle">进入您的创作空间</p>
|
||||
</div>
|
||||
|
||||
<a-tabs v-model:activeKey="activeTab" centered class="login-tabs">
|
||||
<a-tab-pane key="sms" tab="短信登录">
|
||||
<a-form
|
||||
:model="smsForm"
|
||||
:rules="smsRules"
|
||||
ref="smsFormRef"
|
||||
layout="vertical"
|
||||
>
|
||||
<template #prefix>
|
||||
<PhoneOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="mobile" label="手机号">
|
||||
<a-input
|
||||
v-model:value="smsForm.mobile"
|
||||
size="large"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="11"
|
||||
class="tech-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<PhoneOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="code" label="验证码">
|
||||
<div class="code-input">
|
||||
<a-input
|
||||
v-model:value="smsForm.code"
|
||||
size="large"
|
||||
placeholder="请输入验证码"
|
||||
:maxlength="6"
|
||||
>
|
||||
<template #prefix>
|
||||
<SafetyOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="codeCountdown > 0"
|
||||
:loading="sendingCode"
|
||||
@click="sendSmsCode"
|
||||
class="send-code-btn"
|
||||
>
|
||||
{{ codeCountdown > 0 ? `${codeCountdown}s后重发` : '发送验证码' }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item name="code" label="验证码">
|
||||
<div class="code-input">
|
||||
<a-input
|
||||
v-model:value="smsForm.code"
|
||||
size="large"
|
||||
placeholder="请输入验证码"
|
||||
:maxlength="6"
|
||||
class="tech-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<SafetyOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="codeCountdown > 0"
|
||||
:loading="sendingCode"
|
||||
@click="sendSmsCode"
|
||||
class="send-code-btn"
|
||||
>
|
||||
{{ codeCountdown > 0 ? `${codeCountdown}s后重发` : '发送验证码' }}
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
block
|
||||
:loading="loggingIn"
|
||||
@click="handleSmsLogin"
|
||||
class="login-btn"
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
block
|
||||
:loading="loggingIn"
|
||||
@click="handleSmsLogin"
|
||||
class="login-btn"
|
||||
>
|
||||
立即登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
|
||||
<a-tab-pane key="password" tab="密码登录">
|
||||
<a-form
|
||||
:model="passwordForm"
|
||||
:rules="passwordRules"
|
||||
ref="passwordFormRef"
|
||||
layout="vertical"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
<a-form-item name="mobile" label="手机号">
|
||||
<a-input
|
||||
v-model:value="passwordForm.mobile"
|
||||
size="large"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="11"
|
||||
class="tech-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<PhoneOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-tab-pane key="password" tab="密码登录">
|
||||
<a-form
|
||||
:model="passwordForm"
|
||||
:rules="passwordRules"
|
||||
ref="passwordFormRef"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item name="mobile" label="手机号">
|
||||
<a-input
|
||||
v-model:value="passwordForm.mobile"
|
||||
size="large"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="11"
|
||||
>
|
||||
<template #prefix>
|
||||
<PhoneOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="password" label="密码">
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.password"
|
||||
size="large"
|
||||
placeholder="请输入密码"
|
||||
@pressEnter="handlePasswordLogin"
|
||||
class="tech-input"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="input-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item name="password" label="密码">
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.password"
|
||||
size="large"
|
||||
placeholder="请输入密码"
|
||||
@pressEnter="handlePasswordLogin"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
block
|
||||
:loading="loggingIn"
|
||||
@click="handlePasswordLogin"
|
||||
class="login-btn"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<div class="card-footer">
|
||||
<p class="tip">登录即表示您同意我们的服务条款和隐私政策</p>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
block
|
||||
:loading="loggingIn"
|
||||
@click="handlePasswordLogin"
|
||||
class="login-btn"
|
||||
>
|
||||
立即登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
@@ -173,6 +219,9 @@ const codeCountdown = ref(0)
|
||||
// 验证码倒计时
|
||||
let countdownTimer = null
|
||||
|
||||
// 背景光点
|
||||
const stars = ref([])
|
||||
|
||||
// 表单验证规则
|
||||
const smsRules = {
|
||||
mobile: [
|
||||
@@ -196,6 +245,29 @@ const passwordRules = {
|
||||
]
|
||||
}
|
||||
|
||||
// 初始化背景光点
|
||||
onMounted(() => {
|
||||
const starCount = 50
|
||||
for (let i = 0; i < starCount; i++) {
|
||||
stars.value.push({
|
||||
left: Math.random() * 100,
|
||||
top: Math.random() * 100,
|
||||
size: Math.random() * 3 + 1,
|
||||
active: false
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 激活光点
|
||||
function activateStar(index) {
|
||||
stars.value[index].active = true
|
||||
}
|
||||
|
||||
// 停用光点
|
||||
function deactivateStar(index) {
|
||||
stars.value[index].active = false
|
||||
}
|
||||
|
||||
// 发送验证码
|
||||
async function sendSmsCode() {
|
||||
try {
|
||||
@@ -283,120 +355,185 @@ async function handlePasswordLogin() {
|
||||
<style scoped>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
background: #0a0a0a;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景光点 */
|
||||
.bg-stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.star.active {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.5);
|
||||
box-shadow: 0 0 20px rgba(107, 138, 255, 0.6);
|
||||
}
|
||||
|
||||
/* 主内容区 */
|
||||
.login-content {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 左侧品牌区 */
|
||||
.brand-panel {
|
||||
flex: 1;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 60px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景动画 */
|
||||
.bg-animation {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.floating-shapes {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shape {
|
||||
.brand-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: radial-gradient(circle, rgba(107, 138, 255, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
opacity: 0.3;
|
||||
animation: float 20s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.shape-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #ffffff;
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
animation-delay: 0s;
|
||||
right: -100px;
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
.brand-panel::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: #ffd700;
|
||||
top: 50%;
|
||||
right: -150px;
|
||||
animation-delay: -5s;
|
||||
background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
bottom: -50px;
|
||||
left: -50px;
|
||||
animation: pulse 4s ease-in-out infinite 2s;
|
||||
}
|
||||
|
||||
.shape-3 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: #ff6b9d;
|
||||
bottom: -80px;
|
||||
left: 30%;
|
||||
animation-delay: -10s;
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.shape-4 {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: #00f2fe;
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
animation-delay: -15s;
|
||||
.brand-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
margin-bottom: 30px;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
transform: translateY(0);
|
||||
}
|
||||
33% {
|
||||
transform: translate(100px, -100px) rotate(120deg);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-80px, 80px) rotate(240deg);
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 登录卡片 */
|
||||
.brand-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
font-size: 18px;
|
||||
color: #6B8AFF;
|
||||
margin-bottom: 50px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.brand-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #a0a0a0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
color: #A855F7;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 右侧登录区 */
|
||||
.login-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px;
|
||||
background: #0a0a0a;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
max-width: 420px;
|
||||
background: rgba(26, 26, 46, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
border-radius: 24px;
|
||||
padding: 50px 40px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid rgba(107, 138, 255, 0.2);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.title {
|
||||
.login-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: #A855F7;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
color: #6B8AFF;
|
||||
margin: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 标签页样式 */
|
||||
/* 标签页 */
|
||||
.login-tabs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -406,83 +543,155 @@ async function handlePasswordLogin() {
|
||||
}
|
||||
|
||||
.login-tabs :deep(.ant-tabs-tab) {
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
padding: 12px 20px;
|
||||
padding: 10px 24px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.ant-tabs-tab-active) {
|
||||
color: #667eea;
|
||||
color: #A855F7;
|
||||
}
|
||||
|
||||
.login-tabs :deep(.ant-tabs-ink-bar) {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* 表单样式 */
|
||||
:deep(.ant-form-item-label > label) {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e8e8e8;
|
||||
/* 输入框 */
|
||||
.tech-input {
|
||||
border-radius: 12px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(15, 15, 30, 0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper:hover),
|
||||
:deep(.ant-input-affix-wrapper-focused) {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
|
||||
.tech-input:hover {
|
||||
border-color: rgba(107, 138, 255, 0.5);
|
||||
}
|
||||
|
||||
.tech-input:focus,
|
||||
.tech-input-focused {
|
||||
border-color: transparent;
|
||||
background: rgba(15, 15, 30, 0.8);
|
||||
box-shadow: 0 0 0 2px rgba(107, 138, 255, 0.2);
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* 验证码输入组 */
|
||||
:deep(.ant-input-prefix) {
|
||||
color: rgba(107, 138, 255, 0.8);
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-label > label) {
|
||||
font-weight: 500;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
border-radius: 12px;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(15, 15, 30, 0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper:hover) {
|
||||
border-color: rgba(107, 138, 255, 0.5);
|
||||
}
|
||||
|
||||
:deep(.ant-input-affix-wrapper-focused) {
|
||||
border-color: transparent;
|
||||
background: rgba(15, 15, 30, 0.8);
|
||||
box-shadow: 0 0 0 2px rgba(107, 138, 255, 0.2);
|
||||
}
|
||||
|
||||
/* 验证码输入 */
|
||||
.code-input {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.send-code-btn {
|
||||
border-radius: 10px;
|
||||
border-radius: 12px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(135deg, rgba(107, 138, 255, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
|
||||
border: 1px solid rgba(107, 138, 255, 0.3);
|
||||
color: #6B8AFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.send-code-btn:hover {
|
||||
background: linear-gradient(135deg, rgba(107, 138, 255, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
|
||||
border-color: rgba(107, 138, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
height: 48px;
|
||||
height: 52px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #6B8AFF 0%, #A855F7 100%);
|
||||
border: none;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0 4px 20px rgba(107, 138, 255, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.login-btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
|
||||
box-shadow: 0 6px 30px rgba(107, 138, 255, 0.5);
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 底部提示 */
|
||||
.card-footer {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
/* 图标 */
|
||||
.input-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
/* 响应式 */
|
||||
@media (max-width: 992px) {
|
||||
.login-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.brand-panel {
|
||||
padding: 40px 20px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.login-panel {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user