fix: 优化注册页面，修复心路历程bug。
This commit is contained in:
tianyongbao
@@ -226,9 +226,12 @@ const handleView = (row) => {
|
|||||||
/** 新增按钮操作 */
|
/** 新增按钮操作 */
|
||||||
function handleAdd() {
|
function handleAdd() {
|
||||||
reset()
|
reset()
|
||||||
form.value.createTime = dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
|
|
||||||
open.value = true
|
open.value = true
|
||||||
title.value = '添加心路历程'
|
title.value = '添加心路历程'
|
||||||
|
// 确保表单完全清空后再设置默认时间
|
||||||
|
nextTick(() => {
|
||||||
|
form.value.createTime = dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 修改按钮操作 */
|
/** 修改按钮操作 */
|
||||||
|
|||||||
@@ -1,43 +1,65 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="register">
|
<div class="register">
|
||||||
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
|
<div class="register-container">
|
||||||
<h3 class="title">智聪科技注册平台</h3>
|
<div class="register-form-wrapper">
|
||||||
<el-form-item prop="username">
|
<el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form">
|
||||||
<el-input v-model="registerForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
|
<div class="form-header">
|
||||||
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
<h3 class="title">智聪科技注册平台</h3>
|
||||||
</el-input>
|
<p class="subtitle">创建您的账户，开启智能之旅</p>
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item prop="password">
|
|
||||||
<el-input v-model="registerForm.password" type="password" size="large" auto-complete="off" placeholder="密码" @keyup.enter="handleRegister">
|
<el-form-item prop="username">
|
||||||
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
<el-input v-model="registerForm.username" type="text" size="large" auto-complete="off" placeholder="请输入账号">
|
||||||
</el-input>
|
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
|
||||||
</el-form-item>
|
</el-input>
|
||||||
<el-form-item prop="confirmPassword">
|
</el-form-item>
|
||||||
<el-input v-model="registerForm.confirmPassword" type="password" size="large" auto-complete="off" placeholder="确认密码" @keyup.enter="handleRegister">
|
|
||||||
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
<el-form-item prop="password">
|
||||||
</el-input>
|
<el-input v-model="registerForm.password" type="password" size="large" auto-complete="off" placeholder="请输入密码" @keyup.enter="handleRegister">
|
||||||
</el-form-item>
|
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
||||||
<el-form-item prop="code" v-if="captchaEnabled">
|
</el-input>
|
||||||
<el-input size="large" v-model="registerForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter="handleRegister">
|
</el-form-item>
|
||||||
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
|
||||||
</el-input>
|
<el-form-item prop="confirmPassword">
|
||||||
<div class="register-code">
|
<el-input
|
||||||
<img :src="codeUrl" @click="getCode" class="register-code-img" />
|
v-model="registerForm.confirmPassword"
|
||||||
</div>
|
type="password"
|
||||||
</el-form-item>
|
size="large"
|
||||||
<el-form-item style="width: 100%">
|
auto-complete="off"
|
||||||
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleRegister">
|
placeholder="请确认密码"
|
||||||
<span v-if="!loading">注 册</span>
|
@keyup.enter="handleRegister"
|
||||||
<span v-else>注 册 中...</span>
|
>
|
||||||
</el-button>
|
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
|
||||||
<div style="float: right">
|
</el-input>
|
||||||
<router-link class="link-type" style="font-size: 20px; font-weight: 400" :to="'/login'">使用已有账户登录</router-link>
|
</el-form-item>
|
||||||
</div>
|
|
||||||
</el-form-item>
|
<el-form-item prop="code" v-if="captchaEnabled" class="code-item">
|
||||||
</el-form>
|
<el-input size="large" v-model="registerForm.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter="handleRegister">
|
||||||
|
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
|
||||||
|
</el-input>
|
||||||
|
<div class="register-code">
|
||||||
|
<img :src="codeUrl" @click="getCode" class="register-code-img" />
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item class="submit-item">
|
||||||
|
<el-button :loading="loading" size="large" type="primary" class="register-btn" @click.prevent="handleRegister">
|
||||||
|
<span v-if="!loading">立即注册</span>
|
||||||
|
<span v-else>注册中...</span>
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div class="login-link">
|
||||||
|
<span class="link-text">已有账户？</span>
|
||||||
|
<router-link class="link-type" :to="'/login'">立即登录</router-link>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 底部 -->
|
<!-- 底部 -->
|
||||||
<div class="el-register-footer">
|
<div class="el-register-footer">
|
||||||
<span>Copyright © 2024 qdintc All Rights Reserved.</span>
|
<span>Copyright © 2026 qdintc All Rights Reserved.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -131,61 +153,246 @@ getCode()
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
min-height: 100vh;
|
||||||
// background-image: url('../assets/images/login-background.jpg');
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
background-size: cover;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// 科技感背景动画
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -50%;
|
||||||
|
left: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
||||||
|
background-size: 50px 50px;
|
||||||
|
animation: gridMove 20s linear infinite;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.title {
|
|
||||||
margin: 0px auto 30px auto;
|
@keyframes gridMove {
|
||||||
|
0% {
|
||||||
|
transform: translate(0, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(50px, 50px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-container {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-form-wrapper {
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 50px 45px;
|
||||||
|
width: 460px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #707070;
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 800;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
margin: 12px 0 0 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.register-form {
|
.register-form {
|
||||||
border-radius: 6px;
|
:deep(.el-form-item) {
|
||||||
background: #ffffff;
|
margin-bottom: 24px;
|
||||||
width: 400px;
|
}
|
||||||
padding: 25px 25px 5px 25px;
|
|
||||||
.el-input {
|
:deep(.el-input__wrapper) {
|
||||||
height: 40px;
|
height: 52px;
|
||||||
input {
|
border-radius: 12px;
|
||||||
height: 40px;
|
border: 2px solid #e8e8e8;
|
||||||
|
background: #fafafa;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #667eea;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-focus {
|
||||||
|
border-color: #667eea;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #bbb;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input__icon) {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
.input-icon {
|
.input-icon {
|
||||||
height: 39px;
|
width: 18px;
|
||||||
width: 14px;
|
height: 18px;
|
||||||
margin-left: 0px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.register-tip {
|
|
||||||
font-size: 13px;
|
// 验证码区域
|
||||||
text-align: center;
|
.code-item {
|
||||||
color: #bfbfbf;
|
:deep(.el-form-item__content) {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.register-code {
|
.register-code {
|
||||||
width: 33%;
|
width: 120px;
|
||||||
height: 40px;
|
height: 52px;
|
||||||
float: right;
|
flex-shrink: 0;
|
||||||
img {
|
|
||||||
|
.register-code-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
vertical-align: middle;
|
transition: all 0.3s ease;
|
||||||
|
border: 2px solid #e8e8e8;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #667eea;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-register-footer {
|
|
||||||
height: 40px;
|
// 提交按钮
|
||||||
line-height: 40px;
|
.submit-item {
|
||||||
position: fixed;
|
margin-top: 35px;
|
||||||
bottom: 0;
|
margin-bottom: 20px;
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
.register-btn {
|
||||||
color: #fff;
|
width: 100%;
|
||||||
font-family: Arial;
|
height: 52px;
|
||||||
font-size: 12px;
|
border-radius: 12px;
|
||||||
letter-spacing: 1px;
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.35);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.register-code-img {
|
|
||||||
height: 40px;
|
// 登录链接
|
||||||
padding-left: 12px;
|
.login-link {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
.link-text {
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-type {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #667eea;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, #667eea, #764ba2);
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #764ba2;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部版权
|
||||||
|
.el-register-footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
z-index: 2;
|
||||||
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式优化
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.register-form-wrapper {
|
||||||
|
width: 90%;
|
||||||
|
padding: 40px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-header .title {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user