frontend refactor login page
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
primary-color: #4da30d
|
||||
primary-color-light: #5fc910
|
||||
primary-color-dark: #377508
|
||||
accent-color: #e7000b
|
||||
@@ -20,7 +20,15 @@ export default defineConfigWithVueTs(
|
||||
|
||||
pluginVue.configs['flat/essential'],
|
||||
vueTsConfigs.recommended,
|
||||
|
||||
|
||||
{
|
||||
name: 'app/vue-rules',
|
||||
rules: {
|
||||
'vue/block-lang': 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
...pluginVitest.configs.recommended,
|
||||
files: ['src/**/__tests__/*'],
|
||||
|
||||
+2
-76
@@ -1,85 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import { RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
/* 应用全局样式可以在这里添加 */
|
||||
</style>
|
||||
|
||||
@@ -1,73 +1,16 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
/* 项目主题色 CSS 变量 */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
--primary-color: #4da30d;
|
||||
--primary-color-light: #5fc910;
|
||||
--primary-color-dark: #377508;
|
||||
--accent-color: #e7000b;
|
||||
}
|
||||
|
||||
/* 基础样式 */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
color 0.5s,
|
||||
background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
font-family:
|
||||
Inter,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
@@ -79,8 +22,6 @@ body {
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
Before Width: | Height: | Size: 276 B |
@@ -1,36 +1,9 @@
|
||||
@import './base.css';
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* 应用全局样式 */
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup>
|
||||
import logoImg from '@/assets/logo.png'
|
||||
|
||||
const props = defineProps({
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium', // small, medium, large
|
||||
},
|
||||
showAppName: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showSlogan: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const sizeClasses = {
|
||||
small: 'h-8',
|
||||
medium: 'h-12',
|
||||
large: 'h-16',
|
||||
}
|
||||
|
||||
const textSizeClasses = {
|
||||
small: 'text-xl',
|
||||
medium: 'text-2xl',
|
||||
large: 'text-3xl',
|
||||
}
|
||||
|
||||
const sloganSizeClasses = {
|
||||
small: 'text-xs',
|
||||
medium: 'text-sm',
|
||||
large: 'text-base',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-3">
|
||||
<img :src="logoImg" alt="DataFlow Logo" :class="['object-contain', sizeClasses[size]]" />
|
||||
|
||||
<div v-if="showAppName || showSlogan" class="flex flex-col">
|
||||
<span
|
||||
v-if="showAppName"
|
||||
class="text-[#4da30d] font-bold leading-tight"
|
||||
:class="textSizeClasses[size]"
|
||||
>
|
||||
DataFlow
|
||||
</span>
|
||||
<span
|
||||
v-if="showSlogan"
|
||||
class="text-gray-600 leading-tight"
|
||||
:class="sloganSizeClasses[size]"
|
||||
>
|
||||
数据管理平台
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+86
-150
@@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import Brand from '@/components/Brand.vue'
|
||||
|
||||
// 表单数据
|
||||
const formState = reactive({
|
||||
username: '',
|
||||
@@ -71,161 +73,95 @@ const goToRegister = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1 class="login-title">用户登录</h1>
|
||||
<p class="login-subtitle">欢迎回到 DataFlow</p>
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row min-h-screen">
|
||||
<!-- 左侧图片区域 -->
|
||||
<div class="w-full lg:w-1/2 relative overflow-hidden bg-linear-to-br from-[#4da30d] to-[#377508] min-h-[200px] lg:min-h-screen">
|
||||
<img
|
||||
src="@/assets/images/bg.jpeg"
|
||||
alt="Background"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/20"></div>
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="login-form"
|
||||
@finish="handleSubmit"
|
||||
>
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input
|
||||
v-model:value="formState.username"
|
||||
size="large"
|
||||
placeholder="请输入用户名"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!-- 右侧表单区域 -->
|
||||
<div class="w-full lg:w-1/2 flex items-center bg-white p-6 md:p-8 lg:pl-12 lg:pr-12">
|
||||
<div class="w-full max-w-md">
|
||||
<!-- Brand Logo -->
|
||||
<div class="mb-8">
|
||||
<Brand size="large" show-app-name />
|
||||
</div>
|
||||
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input-password
|
||||
v-model:value="formState.password"
|
||||
size="large"
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<!-- 表单标题 -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-2">用户登录</h1>
|
||||
<p class="text-gray-600">欢迎回到 DataFlow</p>
|
||||
</div>
|
||||
|
||||
<a-form-item>
|
||||
<div class="login-options">
|
||||
<a-checkbox v-model:checked="formState.remember">
|
||||
记住我
|
||||
</a-checkbox>
|
||||
<a-button type="link" class="forgot-password">
|
||||
忘记密码？
|
||||
<!-- 登录表单 -->
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
@finish="handleSubmit"
|
||||
>
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input
|
||||
v-model:value="formState.username"
|
||||
size="large"
|
||||
placeholder="请输入用户名"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input-password
|
||||
v-model:value="formState.password"
|
||||
size="large"
|
||||
placeholder="请输入密码"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<div class="flex justify-between items-center">
|
||||
<a-checkbox v-model:checked="formState.remember">
|
||||
记住我
|
||||
</a-checkbox>
|
||||
<a-button type="link" class="p-0 h-auto text-[#4da30d] hover:text-[#5fc910]">
|
||||
忘记密码？
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="mt-6">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
class="h-12 text-base font-medium bg-[#4da30d] hover:bg-[#5fc910] border-none"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<span class="text-gray-600 text-sm">还没有账户？</span>
|
||||
<a-button type="link" class="text-[#4da30d] hover:text-[#5fc910]" @click="goToRegister">
|
||||
立即注册
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
class="login-button"
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="login-footer">
|
||||
<span class="login-footer-text">还没有账户？</span>
|
||||
<a-button type="link" @click="goToRegister">
|
||||
立即注册
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.form-icon {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.login-options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.login-footer {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.login-footer-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 576px) {
|
||||
.login-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+108
-159
@@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import Brand from '@/components/Brand.vue'
|
||||
|
||||
// 表单数据
|
||||
const formState = reactive({
|
||||
username: '',
|
||||
@@ -86,167 +88,114 @@ const goToLogin = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="register-container">
|
||||
<div class="register-card">
|
||||
<div class="register-header">
|
||||
<h1 class="register-title">用户注册</h1>
|
||||
<p class="register-subtitle">创建您的 DataFlow 账户</p>
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row min-h-screen">
|
||||
<!-- 左侧图片区域 -->
|
||||
<div
|
||||
class="w-full lg:w-1/2 relative overflow-hidden bg-linear-to-br from-[#4da30d] to-[#377508] min-h-[200px] lg:min-h-screen"
|
||||
>
|
||||
<img
|
||||
src="@/assets/images/bg.jpeg"
|
||||
alt="Background"
|
||||
class="absolute inset-0 w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-black/20"></div>
|
||||
</div>
|
||||
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
class="register-form"
|
||||
@finish="handleSubmit"
|
||||
>
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input
|
||||
v-model:value="formState.username"
|
||||
size="large"
|
||||
placeholder="请输入用户名"
|
||||
:maxlength="20"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input
|
||||
v-model:value="formState.email"
|
||||
size="large"
|
||||
type="email"
|
||||
placeholder="请输入邮箱地址"
|
||||
>
|
||||
<template #prefix>
|
||||
<MailOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input-password
|
||||
v-model:value="formState.password"
|
||||
size="large"
|
||||
placeholder="请输入密码（至少6位）"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="确认密码" name="confirmPassword">
|
||||
<a-input-password
|
||||
v-model:value="formState.confirmPassword"
|
||||
size="large"
|
||||
placeholder="请再次输入密码"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="form-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
class="register-button"
|
||||
>
|
||||
注册
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="register-footer">
|
||||
<span class="register-footer-text">已有账户？</span>
|
||||
<a-button type="link" @click="goToLogin">
|
||||
立即登录
|
||||
</a-button>
|
||||
<!-- 右侧表单区域 -->
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-begain bg-white p-6 md:p-8 lg:p-12">
|
||||
<div class="w-full max-w-md p-4 border border-gray-300 rounded-md overflow-hidden shadow-md">
|
||||
<!-- Brand Logo -->
|
||||
<div class="mb-8">
|
||||
<Brand class="justify-center" size="large" :show-app-name="false" />
|
||||
</div>
|
||||
</a-form>
|
||||
|
||||
<!-- 表单标题 -->
|
||||
<div class="mb-8 text-center">
|
||||
<h1 class="text-3xl font-bold text-gray-800 mb-2">用户注册</h1>
|
||||
<p class="text-gray-600">创建您的账户</p>
|
||||
</div>
|
||||
|
||||
<!-- 注册表单 -->
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
layout="vertical"
|
||||
@finish="handleSubmit"
|
||||
>
|
||||
<a-form-item label="用户名" name="username">
|
||||
<a-input
|
||||
v-model:value="formState.username"
|
||||
size="large"
|
||||
placeholder="请输入用户名"
|
||||
:maxlength="20"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input
|
||||
v-model:value="formState.email"
|
||||
size="large"
|
||||
type="email"
|
||||
placeholder="请输入邮箱地址"
|
||||
>
|
||||
<template #prefix>
|
||||
<MailOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="密码" name="password">
|
||||
<a-input-password
|
||||
v-model:value="formState.password"
|
||||
size="large"
|
||||
placeholder="请输入密码（至少6位）"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="确认密码" name="confirmPassword">
|
||||
<a-input-password
|
||||
v-model:value="formState.confirmPassword"
|
||||
size="large"
|
||||
placeholder="请再次输入密码"
|
||||
:maxlength="50"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="text-gray-400" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="mt-6">
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
block
|
||||
class="h-12 text-base font-medium bg-[#4da30d] hover:bg-[#5fc910] border-none"
|
||||
>
|
||||
注册
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<span class="text-gray-600 text-sm">已有账户？</span>
|
||||
<a-button type="link" class="text-[#4da30d] hover:text-[#5fc910]" @click="goToLogin">
|
||||
立即登录
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.register-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.register-card {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.register-header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.register-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.form-icon {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.register-button {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.register-footer {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.register-footer-text {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 576px) {
|
||||
.register-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.register-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user