登录注册、手机号、邮箱
This commit is contained in:
@@ -1,25 +1,187 @@
|
||||
<template>
|
||||
<div class="register-container">
|
||||
<div class="register-box">
|
||||
<div class="register-header">
|
||||
<div class="logo">
|
||||
<img src="@/assets/logo.png" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="title">注册账户</h1>
|
||||
<p class="subtitle">创建您的校园新闻管理系统账户</p>
|
||||
</div>
|
||||
|
||||
<div class="register-form">
|
||||
<!-- 注册表单内容 -->
|
||||
<div class="form-placeholder">
|
||||
<p>注册功能开发中...</p>
|
||||
<!-- 左侧励志区域 -->
|
||||
<div class="register-left">
|
||||
<div class="left-content">
|
||||
<div class="quote-text">
|
||||
<span class="quote-mark">“</span>
|
||||
<div class="quote-content">
|
||||
<p>不负时代韶华，</p>
|
||||
<p>争做时代新人。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 右侧注册表单区域 -->
|
||||
<div class="register-right">
|
||||
<div class="register-form-container">
|
||||
<!-- Logo和标题区域 -->
|
||||
<div class="register-header">
|
||||
<div class="logo-section">
|
||||
<div class="logo">
|
||||
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
|
||||
</div>
|
||||
<h1 class="platform-title">红色思政学习平台</h1>
|
||||
</div>
|
||||
<h2 class="register-title">{{ registerTypeTitle }}</h2>
|
||||
|
||||
<!-- 注册方式切换 -->
|
||||
<div class="register-type-tabs">
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: registerType === RegisterType.USERNAME }"
|
||||
@click="switchRegisterType(RegisterType.USERNAME)"
|
||||
>
|
||||
用户名
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: registerType === RegisterType.PHONE }"
|
||||
@click="switchRegisterType(RegisterType.PHONE)"
|
||||
>
|
||||
手机号
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: registerType === RegisterType.EMAIL }"
|
||||
@click="switchRegisterType(RegisterType.EMAIL)"
|
||||
>
|
||||
邮箱
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 注册表单 -->
|
||||
<el-form
|
||||
ref="registerFormRef"
|
||||
:model="registerForm"
|
||||
:rules="registerRules"
|
||||
class="register-form"
|
||||
@submit.prevent="handleRegister"
|
||||
>
|
||||
<!-- 用户名注册 -->
|
||||
<template v-if="registerType === RegisterType.USERNAME">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="registerForm.username"
|
||||
placeholder="请输入用户名"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 手机号注册 -->
|
||||
<template v-if="registerType === RegisterType.PHONE">
|
||||
<el-form-item prop="phone">
|
||||
<el-input
|
||||
v-model="registerForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="smsCode">
|
||||
<div class="phone-input-wrapper">
|
||||
<el-input
|
||||
v-model="registerForm.smsCode"
|
||||
placeholder="请输入手机验证码"
|
||||
class="form-input phone-input"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="smsCountdown > 0"
|
||||
@click="handleSendSmsCode"
|
||||
class="code-button"
|
||||
>
|
||||
{{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 邮箱注册 -->
|
||||
<template v-if="registerType === RegisterType.EMAIL">
|
||||
<el-form-item prop="email">
|
||||
<el-input
|
||||
v-model="registerForm.email"
|
||||
placeholder="请输入邮箱"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="emailCode">
|
||||
<div class="phone-input-wrapper">
|
||||
<el-input
|
||||
v-model="registerForm.emailCode"
|
||||
placeholder="请输入邮箱验证码"
|
||||
class="form-input phone-input"
|
||||
/>
|
||||
<el-button
|
||||
:disabled="emailCountdown > 0"
|
||||
@click="handleSendEmailCode"
|
||||
class="code-button"
|
||||
>
|
||||
{{ emailCountdown > 0 ? `${emailCountdown}s` : '获取验证码' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<!-- 通用字段 -->
|
||||
<!-- <el-form-item prop="studentId">
|
||||
<el-input
|
||||
v-model="registerForm.studentId"
|
||||
placeholder="请输入学号"
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
v-model="registerForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码（至少6个字符）"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="registerForm.confirmPassword"
|
||||
type="password"
|
||||
placeholder="请再次输入密码"
|
||||
show-password
|
||||
class="form-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="registerLoading"
|
||||
@click="handleRegister"
|
||||
class="register-button"
|
||||
>
|
||||
注册
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="agree">
|
||||
<p class="agreement-text">
|
||||
<el-checkbox v-model="registerForm.agree">注册即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
|
||||
</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</div>
|
||||
<!-- 底部信息 -->
|
||||
<div class="register-footer">
|
||||
<p>
|
||||
已有账户？
|
||||
<el-link type="primary" @click="goToLogin">立即登录</el-link>
|
||||
<p class="login-link">
|
||||
已有账号？<span class="login-link-text" @click="goToLogin">立即登录</span>
|
||||
</p>
|
||||
<p class="copyright">
|
||||
Copyright ©红色思政智能体平台
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,75 +189,622 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
||||
import type { RegisterParam } from '@/types';
|
||||
import { RegisterType } from '@/types';
|
||||
import { authApi } from '@/apis/system/auth';
|
||||
|
||||
// 响应式引用
|
||||
const registerFormRef = ref<FormInstance>();
|
||||
const registerLoading = ref(false);
|
||||
const smsCountdown = ref(0);
|
||||
const emailCountdown = ref(0);
|
||||
let smsTimer: number | null = null;
|
||||
let emailTimer: number | null = null;
|
||||
|
||||
// Composition API
|
||||
const router = useRouter();
|
||||
|
||||
// 注册方式
|
||||
const registerType = ref<RegisterType>(RegisterType.USERNAME);
|
||||
|
||||
// 表单数据
|
||||
const registerForm = reactive<RegisterParam>({
|
||||
registerType: RegisterType.USERNAME,
|
||||
username: '',
|
||||
studentId: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
smsCode: '',
|
||||
emailCode: '',
|
||||
smsSessionId: '',
|
||||
emailSessionId: '',
|
||||
agree: false
|
||||
});
|
||||
|
||||
// 根据注册方式显示不同的标题
|
||||
const registerTypeTitle = computed(() => {
|
||||
switch (registerType.value) {
|
||||
case RegisterType.USERNAME:
|
||||
return '用户名注册';
|
||||
case RegisterType.PHONE:
|
||||
return '手机号注册';
|
||||
case RegisterType.EMAIL:
|
||||
return '邮箱注册';
|
||||
default:
|
||||
return '账号注册';
|
||||
}
|
||||
});
|
||||
|
||||
// 切换注册方式
|
||||
const switchRegisterType = (type: RegisterType) => {
|
||||
registerType.value = type;
|
||||
registerForm.registerType = type;
|
||||
// 清空表单验证
|
||||
registerFormRef.value?.clearValidate();
|
||||
};
|
||||
|
||||
// 自定义验证器
|
||||
const validatePass = (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'));
|
||||
} else if (value.length < 6) {
|
||||
callback(new Error('密码至少6个字符'));
|
||||
} else {
|
||||
if (registerForm.confirmPassword !== '') {
|
||||
registerFormRef.value?.validateField('confirmPassword');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateConfirmPass = (rule: any, value: string, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== registerForm.password) {
|
||||
callback(new Error('两次输入的密码不一致'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validatePhone = (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.PHONE) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入手机号'));
|
||||
} else if (!/^1[3-9]\d{9}$/.test(value)) {
|
||||
callback(new Error('请输入有效的手机号'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateEmail = (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.EMAIL) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入邮箱'));
|
||||
} else if (!/^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value)) {
|
||||
callback(new Error('请输入有效的邮箱地址'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateUsername = (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.USERNAME) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入用户名'));
|
||||
} else if (value.length < 3 || value.length > 20) {
|
||||
callback(new Error('用户名长度为3-20个字符'));
|
||||
} else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
|
||||
callback(new Error('用户名只能包含字母、数字和下划线'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
// 表单验证规则
|
||||
const registerRules: FormRules = {
|
||||
username: [
|
||||
{ validator: validateUsername, trigger: 'blur' }
|
||||
],
|
||||
studentId: [
|
||||
{ required: true, message: '请输入学号', trigger: 'blur' },
|
||||
{ min: 5, max: 20, message: '学号长度为5-20个字符', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ validator: validatePhone, trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ validator: validateEmail, trigger: 'blur' }
|
||||
],
|
||||
smsCode: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.PHONE) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入手机验证码'));
|
||||
} else if (value.length !== 6) {
|
||||
callback(new Error('验证码为6位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
emailCode: [
|
||||
{
|
||||
validator: (rule: any, value: string, callback: any) => {
|
||||
if (registerType.value === RegisterType.EMAIL) {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入邮箱验证码'));
|
||||
} else if (value.length !== 6) {
|
||||
callback(new Error('验证码为6位'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{ required: true, validator: validatePass, trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, validator: validateConfirmPass, trigger: 'blur' }
|
||||
],
|
||||
agree: [
|
||||
{
|
||||
validator: (rule: any, value: boolean, callback: any) => {
|
||||
if (!value) {
|
||||
callback(new Error('请同意《红色思政智能体平台》用户协议'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 发送手机验证码
|
||||
const handleSendSmsCode = async () => {
|
||||
// 先验证手机号
|
||||
try {
|
||||
await registerFormRef.value?.validateField('phone');
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendSmsCode(registerForm.phone!);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
registerForm.smsSessionId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送');
|
||||
|
||||
// 开始倒计时
|
||||
smsCountdown.value = 60;
|
||||
smsTimer = window.setInterval(() => {
|
||||
smsCountdown.value--;
|
||||
if (smsCountdown.value <= 0 && smsTimer) {
|
||||
clearInterval(smsTimer);
|
||||
smsTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 发送邮箱验证码
|
||||
const handleSendEmailCode = async () => {
|
||||
// 先验证邮箱
|
||||
try {
|
||||
await registerFormRef.value?.validateField('email');
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await authApi.sendEmailCode(registerForm.email!);
|
||||
if (result.code === 200 && result.data) {
|
||||
// 保存sessionId
|
||||
registerForm.emailSessionId = result.data.sessionId;
|
||||
ElMessage.success(result.data.message || '验证码已发送到邮箱');
|
||||
|
||||
// 开始倒计时
|
||||
emailCountdown.value = 60;
|
||||
emailTimer = window.setInterval(() => {
|
||||
emailCountdown.value--;
|
||||
if (emailCountdown.value <= 0 && emailTimer) {
|
||||
clearInterval(emailTimer);
|
||||
emailTimer = null;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
ElMessage.error(result.message || '发送验证码失败');
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('发送验证码失败:', error);
|
||||
ElMessage.error(error.message || '发送验证码失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 注册处理
|
||||
const handleRegister = async () => {
|
||||
if (!registerFormRef.value) return;
|
||||
|
||||
// 检查是否同意用户协议
|
||||
if (!registerForm.agree) {
|
||||
ElMessage.warning('请先同意《红色思政智能体平台》用户协议');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const valid = await registerFormRef.value.validate();
|
||||
if (!valid) return;
|
||||
|
||||
registerLoading.value = true;
|
||||
|
||||
// 调用注册API
|
||||
const result = await authApi.register(registerForm);
|
||||
|
||||
if (result.code === 200) {
|
||||
ElMessage.success('注册成功！请登录');
|
||||
|
||||
// 注册成功后跳转到登录页
|
||||
setTimeout(() => {
|
||||
router.push('/login');
|
||||
}, 1500);
|
||||
} else {
|
||||
ElMessage.error(result.message || '注册失败，请重试');
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('注册失败:', error);
|
||||
ElMessage.error(error.message || '注册失败，请重试');
|
||||
} finally {
|
||||
registerLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
function goToLogin() {
|
||||
router.push('/login');
|
||||
}
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
import { onUnmounted } from 'vue';
|
||||
onUnmounted(() => {
|
||||
if (smsTimer) {
|
||||
clearInterval(smsTimer);
|
||||
}
|
||||
if (emailTimer) {
|
||||
clearInterval(emailTimer);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.register-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
max-width: 1142px;
|
||||
margin: auto auto;
|
||||
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
|
||||
border-radius: 30px;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.register-box {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
.register-left {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 113px 120px;
|
||||
border-radius: 30px 0 0 30px;
|
||||
overflow: hidden;
|
||||
background: url(/schoolNewsWeb/src/assets/imgs/login-bg.png);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.left-content {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
color: #FFF2D3;
|
||||
|
||||
.quote-mark {
|
||||
font-family: 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 71.096px;
|
||||
line-height: 0.74;
|
||||
display: block;
|
||||
margin-left: 1.48px;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
margin-top: 46.66px;
|
||||
|
||||
p {
|
||||
font-family: 'Taipei Sans TC Beta', 'PingFang SC', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 50px;
|
||||
line-height: 1.42;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-right {
|
||||
flex: 1;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
border-radius: 0 30px 30px 0;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.register-form-container {
|
||||
width: 287px;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.register-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.logo img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 11px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.logo {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #C62828;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-family: 'Taipei Sans TC Beta', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
line-height: 1.31;
|
||||
color: #141F38;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
.register-title {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #141F38;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
.register-type-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
background: #F2F3F5;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: #E8E9EB;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #C62828;
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-form {
|
||||
.form-placeholder {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: #F2F3F5;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #C62828;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-input-wrapper {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.phone-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.code-button {
|
||||
height: 48px;
|
||||
padding: 0 16px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #B71C1C;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #D9D9D9;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-button {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background: #C62828;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: #FFFFFF;
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:hover {
|
||||
background: #B71C1C;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 1.8;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.register-footer {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
.login-link {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 1.83;
|
||||
color: #141F38;
|
||||
text-align: center;
|
||||
margin: 0 0 16px 0;
|
||||
|
||||
.login-link-text {
|
||||
cursor: pointer;
|
||||
color: #ff0000;
|
||||
&:hover {
|
||||
color: #C62828;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-family: 'PingFang SC', sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 2;
|
||||
color: #D9D9D9;
|
||||
text-align: center;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.register-container {
|
||||
flex-direction: column;
|
||||
border-radius: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.register-left {
|
||||
min-height: 300px;
|
||||
padding: 40px;
|
||||
|
||||
.left-content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
.quote-mark {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.quote-content p {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.register-right {
|
||||
min-height: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.register-form-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user