初始提交：彩票推测系统前端代码
This commit is contained in:
lihanqi
924
src/views/Login.vue
Normal file
924
src/views/Login.vue
Normal file
@@ -0,0 +1,924 @@
|
||||
<template>
|
||||
<div class="login-page-container">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<div class="page-title">
|
||||
<h1 class="main-title">用户登录</h1>
|
||||
<p class="subtitle">您的专属彩票数据助理</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<el-card class="login-form-container" shadow="never">
|
||||
<!-- 被踢出提示 -->
|
||||
<el-alert
|
||||
v-if="showKickedOutAlert"
|
||||
title="账号已在其他设备登录"
|
||||
type="warning"
|
||||
description="为保障账号安全，您的账号已在其他设备登录，当前会话已失效。请重新登录。"
|
||||
show-icon
|
||||
:closable="true"
|
||||
@close="showKickedOutAlert = false"
|
||||
style="margin-bottom: 20px"
|
||||
/>
|
||||
|
||||
<div class="login-tabs">
|
||||
<div
|
||||
class="login-tab"
|
||||
:class="{ active: loginType === 'account' }"
|
||||
@click="switchLoginType('account')"
|
||||
>
|
||||
账号登录
|
||||
</div>
|
||||
<div
|
||||
class="login-tab"
|
||||
:class="{ active: loginType === 'phone' }"
|
||||
@click="switchLoginType('phone')"
|
||||
>
|
||||
手机号登录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleLogin" class="login-form">
|
||||
<!-- 账号登录表单 -->
|
||||
<div v-if="loginType === 'account'">
|
||||
<!-- 账号 -->
|
||||
<div class="form-group">
|
||||
<el-input
|
||||
v-model="formData.username"
|
||||
placeholder="请输入账号"
|
||||
:error="errors.username"
|
||||
prefix-icon="User"
|
||||
size="large"
|
||||
clearable
|
||||
/>
|
||||
<div v-if="errors.username" class="error-text">{{ errors.username }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 密码 -->
|
||||
<div class="form-group">
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
placeholder="请输入密码"
|
||||
:error="errors.password"
|
||||
prefix-icon="Lock"
|
||||
size="large"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
:show-password="true"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<div v-if="errors.password" class="error-text">{{ errors.password }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 记住密码 -->
|
||||
<div class="form-options">
|
||||
<el-checkbox v-model="formData.remember" label="记住密码" />
|
||||
<router-link to="/reset-password" class="forgot-password-link">忘记密码?</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 手机号登录表单 -->
|
||||
<div v-else>
|
||||
<!-- 手机号和发送验证码按钮 -->
|
||||
<div class="form-group">
|
||||
<div class="phone-code-row">
|
||||
<el-input
|
||||
v-model="formData.phone"
|
||||
type="tel"
|
||||
placeholder="请输入手机号"
|
||||
prefix-icon="Iphone"
|
||||
size="large"
|
||||
maxlength="11"
|
||||
@input="validatePhoneInput"
|
||||
@blur="validatePhoneOnBlur"
|
||||
clearable
|
||||
class="phone-input"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
:disabled="codeBtnDisabled"
|
||||
@click="sendVerificationCode"
|
||||
class="send-code-btn-inline"
|
||||
size="large"
|
||||
>
|
||||
{{ codeButtonText }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="errors.phone" class="error-text">{{ errors.phone }}</div>
|
||||
<div v-else-if="formData.phone && formData.phone.length > 0 && formData.phone.length < 11" class="tip-text">请输入11位手机号码</div>
|
||||
</div>
|
||||
|
||||
<!-- 验证码 -->
|
||||
<div class="form-group">
|
||||
<el-input
|
||||
v-model="formData.code"
|
||||
placeholder="请输入验证码"
|
||||
prefix-icon="Key"
|
||||
size="large"
|
||||
maxlength="6"
|
||||
/>
|
||||
<div v-if="errors.code" class="error-text">{{ errors.code }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<el-button
|
||||
type="primary"
|
||||
native-type="submit"
|
||||
:loading="loading"
|
||||
class="login-btn"
|
||||
size="large"
|
||||
>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</el-button>
|
||||
|
||||
<!-- 注册链接 -->
|
||||
<div class="register-link">
|
||||
<span>还没有账号？</span>
|
||||
<router-link to="/register" class="link">立即注册</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userStore } from '../store/user'
|
||||
import { lotteryApi } from '../api/index.js'
|
||||
import { useToast } from 'vue-toastification'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElCard, ElInput, ElButton, ElCheckbox, ElAlert } from 'element-plus'
|
||||
import { User, Lock, Iphone, Key } from '@element-plus/icons-vue'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: {
|
||||
ElCard,
|
||||
ElInput,
|
||||
ElButton,
|
||||
ElCheckbox,
|
||||
ElAlert,
|
||||
User,
|
||||
Lock,
|
||||
Iphone,
|
||||
Key
|
||||
},
|
||||
setup() {
|
||||
const toast = useToast()
|
||||
const router = useRouter()
|
||||
return { toast, router }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loginType: 'account', // 默认使用账号登录方式
|
||||
showPassword: false,
|
||||
loading: false,
|
||||
codeCountdown: 0,
|
||||
timer: null,
|
||||
showPhoneError: false,
|
||||
phoneValid: false,
|
||||
showKickedOutAlert: false, // 是否显示被踢出提示
|
||||
|
||||
formData: {
|
||||
username: '',
|
||||
password: '',
|
||||
phone: '',
|
||||
code: '',
|
||||
remember: false
|
||||
},
|
||||
|
||||
errors: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
codeButtonText() {
|
||||
return this.codeCountdown > 0 ? `${this.codeCountdown}秒后重试` : '获取验证码';
|
||||
},
|
||||
codeBtnDisabled() {
|
||||
return this.codeCountdown > 0 || !this.isValidPhone(this.formData.phone);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 检查是否因为被踢出而跳转到登录页
|
||||
if (userStore.isKickedOut) {
|
||||
this.showKickedOutAlert = true
|
||||
// 显示提示后重置状态
|
||||
setTimeout(() => {
|
||||
userStore.resetKickedOutStatus()
|
||||
}, 500)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换登录方式
|
||||
switchLoginType(type) {
|
||||
this.loginType = type;
|
||||
this.errors = {};
|
||||
|
||||
// 切换时重置相关表单数据
|
||||
if (type === 'account') {
|
||||
this.formData.phone = '';
|
||||
this.formData.code = '';
|
||||
} else {
|
||||
this.formData.username = '';
|
||||
this.formData.password = '';
|
||||
}
|
||||
},
|
||||
|
||||
// 手机号格式验证
|
||||
isValidPhone(phone) {
|
||||
return /^1[3-9]\d{9}$/.test(phone);
|
||||
},
|
||||
|
||||
// 手机号输入时验证
|
||||
validatePhoneInput() {
|
||||
// 清除之前的错误
|
||||
this.errors.phone = '';
|
||||
this.showPhoneError = false;
|
||||
this.phoneValid = false;
|
||||
|
||||
const phone = this.formData.phone;
|
||||
|
||||
// 如果输入不是数字，替换非数字字符
|
||||
if (!/^\d*$/.test(phone)) {
|
||||
this.formData.phone = phone.replace(/\D/g, '');
|
||||
}
|
||||
|
||||
// 如果长度达到11位，验证格式
|
||||
if (phone.length === 11) {
|
||||
if (this.isValidPhone(phone)) {
|
||||
this.phoneValid = true;
|
||||
} else {
|
||||
this.errors.phone = '手机号格式不正确';
|
||||
this.showPhoneError = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 手机号失焦时验证
|
||||
validatePhoneOnBlur() {
|
||||
const phone = this.formData.phone;
|
||||
|
||||
if (phone && phone.length > 0) {
|
||||
if (phone.length !== 11) {
|
||||
this.errors.phone = '手机号应为11位数字';
|
||||
this.showPhoneError = true;
|
||||
this.phoneValid = false;
|
||||
} else if (!this.isValidPhone(phone)) {
|
||||
this.errors.phone = '请输入正确的手机号码';
|
||||
this.showPhoneError = true;
|
||||
this.phoneValid = false;
|
||||
} else {
|
||||
this.phoneValid = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 发送验证码
|
||||
async sendVerificationCode() {
|
||||
if (!this.formData.phone) {
|
||||
this.errors.phone = '请输入手机号';
|
||||
this.showPhoneError = true;
|
||||
this.phoneValid = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.isValidPhone(this.formData.phone)) {
|
||||
this.errors.phone = '请输入正确的手机号码';
|
||||
this.showPhoneError = true;
|
||||
this.phoneValid = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.phoneValid = true;
|
||||
|
||||
try {
|
||||
// 开始倒计时 (先启动倒计时，避免API延迟导致用户体验不佳)
|
||||
this.codeCountdown = 60;
|
||||
this.startCodeCountdown();
|
||||
|
||||
const response = await lotteryApi.sendSmsCode(this.formData.phone);
|
||||
|
||||
if (response.success) {
|
||||
this.toast.success('验证码已发送，请注意查收');
|
||||
} else {
|
||||
// 如果发送失败，停止倒计时
|
||||
this.codeCountdown = 0;
|
||||
clearInterval(this.timer);
|
||||
this.toast.error(response.message || '发送验证码失败，请稍后重试');
|
||||
}
|
||||
} catch (error) {
|
||||
// 如果发送出错，停止倒计时
|
||||
this.codeCountdown = 0;
|
||||
clearInterval(this.timer);
|
||||
console.error('发送验证码失败:', error);
|
||||
this.toast.error('发送验证码失败，请稍后重试');
|
||||
}
|
||||
},
|
||||
|
||||
// 开始倒计时
|
||||
startCodeCountdown() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
if (this.codeCountdown > 0) {
|
||||
this.codeCountdown--;
|
||||
} else {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
// 表单验证
|
||||
validateForm() {
|
||||
this.errors = {};
|
||||
|
||||
if (this.loginType === 'account') {
|
||||
// 账号登录验证
|
||||
if (!this.formData.username) {
|
||||
this.errors.username = '请输入账号';
|
||||
}
|
||||
|
||||
if (!this.formData.password) {
|
||||
this.errors.password = '请输入密码';
|
||||
} else if (this.formData.password.length < 6) {
|
||||
this.errors.password = '密码至少6位';
|
||||
}
|
||||
} else {
|
||||
// 手机号登录验证
|
||||
if (!this.formData.phone) {
|
||||
this.errors.phone = '请输入手机号';
|
||||
this.showPhoneError = true;
|
||||
} else if (!this.isValidPhone(this.formData.phone)) {
|
||||
this.errors.phone = '请输入正确的手机号码';
|
||||
this.showPhoneError = true;
|
||||
}
|
||||
|
||||
if (!this.formData.code) {
|
||||
this.errors.code = '请输入验证码';
|
||||
} else if (this.formData.code.length < 4 || this.formData.code.length > 6) {
|
||||
this.errors.code = '验证码格式不正确';
|
||||
}
|
||||
}
|
||||
|
||||
return Object.keys(this.errors).length === 0;
|
||||
},
|
||||
|
||||
// 处理登录
|
||||
async handleLogin() {
|
||||
if (!this.validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
try {
|
||||
let response;
|
||||
|
||||
if (this.loginType === 'account') {
|
||||
// 账号密码登录
|
||||
response = await lotteryApi.userLogin(this.formData.username, this.formData.password);
|
||||
} else {
|
||||
// 手机号验证码登录
|
||||
response = await lotteryApi.userPhoneLogin(this.formData.phone, this.formData.code);
|
||||
}
|
||||
|
||||
if (response.success === true) {
|
||||
// 登录成功，调用getLoginUser获取完整用户信息
|
||||
try {
|
||||
const userInfo = await userStore.fetchLoginUser();
|
||||
if (userInfo) {
|
||||
// 触发Coze SDK重新初始化事件
|
||||
setTimeout(() => {
|
||||
window.dispatchEvent(new CustomEvent('reinitializeCozeSDK'));
|
||||
console.log('已触发Coze SDK重新初始化事件');
|
||||
}, 200);
|
||||
|
||||
// 直接跳转到个人中心
|
||||
setTimeout(() => {
|
||||
this.router.push('/profile');
|
||||
}, 300);
|
||||
} else {
|
||||
this.toast.error('获取用户信息失败，请重新登录');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error);
|
||||
this.toast.error('获取用户信息失败，请重新登录');
|
||||
}
|
||||
} else {
|
||||
// 登录失败
|
||||
this.toast.error(response.message || '登录失败，请检查账号密码');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error);
|
||||
if (error.response && error.response.data) {
|
||||
this.toast.error(error.response.data.message || '登录失败，请检查账号密码');
|
||||
} else {
|
||||
this.toast.error('网络错误，请重试');
|
||||
}
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 组件销毁时清除定时器
|
||||
beforeUnmount() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 登录页面容器 */
|
||||
.login-page-container {
|
||||
min-height: calc(100vh - 70px);
|
||||
background: #f0f2f5;
|
||||
padding: 20px 20px 8px 20px;
|
||||
}
|
||||
|
||||
/* 页面头部 */
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
|
||||
color: white;
|
||||
padding: 35px 20px 25px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(238, 90, 82, 0.3);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 32px;
|
||||
margin: 0 auto 4px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 20px rgba(0,0,0,0.3);
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
color: white;
|
||||
opacity: 0.95;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.4);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 桌面端样式 */
|
||||
@media (min-width: 1024px) {
|
||||
.page-header {
|
||||
padding: 30px 20px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-container {
|
||||
padding: 0;
|
||||
background: white;
|
||||
margin: 0 0 20px 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 登录方式切换标签 */
|
||||
.login-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.login-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 18px 0;
|
||||
font-size: 15px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.login-tab.active {
|
||||
color: #e53e3e;
|
||||
background: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.login-tab:hover:not(.active) {
|
||||
color: #666;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
background: white;
|
||||
border-radius: 0;
|
||||
padding: 28px 24px 20px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 表单组 */
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
background: #f8f9fa;
|
||||
transition: all 0.3s ease;
|
||||
min-height: 56px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.input-wrapper:focus-within {
|
||||
border-color: #e9ecef;
|
||||
background: white;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-wrapper.error {
|
||||
border-color: #dc3545;
|
||||
background: #fff5f5;
|
||||
}
|
||||
|
||||
.input-wrapper.success {
|
||||
border-color: #4caf50;
|
||||
background: #f8fff8;
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
padding: 12px 25px;
|
||||
color: #6c757d;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.icon-img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
padding: 16px 8px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
color: #212529;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 控制浏览器自动填充的样式 */
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 30px white inset !important;
|
||||
-webkit-text-fill-color: #212529 !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* 手机号和验证码按钮同行布局 */
|
||||
.phone-code-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.phone-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 内联发送验证码按钮样式 */
|
||||
.send-code-btn-inline {
|
||||
background: linear-gradient(135deg, #e53e3e, #ff6b6b);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 120px;
|
||||
flex-shrink: 0;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.send-code-btn-inline:hover:not(.is-disabled) {
|
||||
background: linear-gradient(135deg, #d43030, #ff5a5a);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
|
||||
}
|
||||
|
||||
.send-code-btn-inline:active:not(.is-disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.send-code-btn-inline.is-disabled {
|
||||
background: #cccccc !important;
|
||||
border-color: #cccccc !important;
|
||||
color: #888 !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* 提示文本 */
|
||||
.error-text {
|
||||
color: #ff4444;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
color: #888888;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* 隐藏浏览器自带的密码控件 */
|
||||
input::-ms-reveal,
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input::-webkit-credentials-auto-fill-button {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
padding: 0 15px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-icon-img {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 表单选项 */
|
||||
.form-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.checkbox-wrapper input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
color: transparent;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.checkbox-wrapper input:checked + .checkmark {
|
||||
background: #e53e3e;
|
||||
border-color: #e53e3e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 忘记密码链接 */
|
||||
.forgot-password-link {
|
||||
color: #e53e3e;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.forgot-password-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
margin: 24px 0 24px 0;
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
height: 52px;
|
||||
background: linear-gradient(135deg, #e53e3e, #ff6b6b);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(229, 62, 62, 0.25);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.login-btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 30px rgba(229, 62, 62, 0.35);
|
||||
background: linear-gradient(135deg, #d43030, #ff5a5a);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.login-btn:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 10px rgba(229, 62, 62, 0.3);
|
||||
}
|
||||
|
||||
/* Element UI 组件自定义样式 */
|
||||
:deep(.el-input__wrapper) {
|
||||
padding: 6px 16px;
|
||||
box-shadow: none !important;
|
||||
background-color: #f8f9fa;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
:deep(.el-input__wrapper.is-focus) {
|
||||
background-color: #fff;
|
||||
border-color: #e53e3e;
|
||||
box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.1);
|
||||
}
|
||||
|
||||
|
||||
:deep(.el-input__prefix) {
|
||||
margin-right: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner) {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
|
||||
background-color: #e53e3e;
|
||||
border-color: #e53e3e;
|
||||
}
|
||||
|
||||
|
||||
:deep(.el-button.is-disabled) {
|
||||
background: #cccccc;
|
||||
border-color: #cccccc;
|
||||
}
|
||||
|
||||
/* 注册链接 */
|
||||
.register-link {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.register-link .link {
|
||||
color: #e53e3e;
|
||||
text-decoration: none;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.register-link .link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.login-page-container {
|
||||
padding: 10px 10px 5px 10px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 22px 20px 18px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.login-page-container {
|
||||
padding: 5px 5px 3px 5px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 30px 20px 25px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 28px;
|
||||
margin-bottom: 3px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 28px 20px 20px;
|
||||
}
|
||||
|
||||
.login-tab {
|
||||
padding: 16px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
height: 42px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
height: 48px;
|
||||
font-size: 15px;
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
.send-code-btn-inline {
|
||||
font-size: 12px;
|
||||
min-width: 90px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.phone-code-row {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 桌面端样式 - 这部分已在上面定义，这里移除重复定义 */
|
||||
</style>
|
||||
Reference in New Issue
Block a user