注册界面编写
This commit is contained in:
parent
840170b66e
commit
b79b3d2449
|
|
@ -14,12 +14,13 @@ const router = createRouter( {
|
||||||
path: '',
|
path: '',
|
||||||
name: 'welcome-login',
|
name: 'welcome-login',
|
||||||
component: () => import('@/views/welcome/LoginPage.vue')
|
component: () => import('@/views/welcome/LoginPage.vue')
|
||||||
|
},{
|
||||||
|
path: 'register',
|
||||||
|
name: 'welcome-register',
|
||||||
|
component: () => import('@/views/welcome/RegisterPage.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}, {
|
}, {
|
||||||
/*
|
|
||||||
添加路由
|
|
||||||
*/
|
|
||||||
path: '/index',
|
path: '/index',
|
||||||
name: 'index',
|
name: 'index',
|
||||||
component: () => import('@/views/IndexView.vue')
|
component: () => import('@/views/IndexView.vue')
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,12 @@
|
||||||
<div style="margin-top: 5px" >在这里你可以同性交友,因为都是男的,没有学java的女生</div>
|
<div style="margin-top: 5px" >在这里你可以同性交友,因为都是男的,没有学java的女生</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-card">
|
<div class="right-card">
|
||||||
<router-view/>
|
<!--添加淡入淡出的效果-->
|
||||||
|
<router-view v-slot="{ Component }">
|
||||||
|
<transition name="el-fade-in-linear" mode="out-in">
|
||||||
|
<component :is="Component" />
|
||||||
|
</transition>
|
||||||
|
</router-view>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,9 +2,7 @@
|
||||||
import { User , Lock} from '@element-plus/icons-vue'
|
import { User , Lock} from '@element-plus/icons-vue'
|
||||||
import {reactive, ref} from "vue";
|
import {reactive, ref} from "vue";
|
||||||
import {login} from "@/net";
|
import {login} from "@/net";
|
||||||
/*
|
|
||||||
导入路由
|
|
||||||
*/
|
|
||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
|
|
||||||
const formRef = ref()
|
const formRef = ref()
|
||||||
|
|
@ -80,7 +78,7 @@ function userLogin(){
|
||||||
<span style="font-size: 13px ; color: gray">没有账户?</span>
|
<span style="font-size: 13px ; color: gray">没有账户?</span>
|
||||||
</el-divider>
|
</el-divider>
|
||||||
<div>
|
<div>
|
||||||
<el-button style="width: 270px" type="warning" plain>立即注册</el-button>
|
<el-button @click="router.push('/register')" style="width: 270px" type="warning" plain>立即注册</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
<script setup>
|
||||||
|
import {reactive} from "vue";
|
||||||
|
import {EditPen, Lock, Message, User} from "@element-plus/icons-vue";
|
||||||
|
import router from "@/router";
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
password_repeat: '',
|
||||||
|
email: '',
|
||||||
|
code: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const rule = {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div style="text-align: center;margin: 0 20px">
|
||||||
|
<div style="margin-top: 100px">
|
||||||
|
<div style="font-size: 25px; font-weight: bold">注册用户</div>
|
||||||
|
<div style="font-size: 14px ; color: gray">欢迎注册我们的学习平台,请在下方填写相关信息</div>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 50px">
|
||||||
|
<el-form :model="form" :rule="rule">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="form.username" maxlength="10" type="text" placeholder="用户名">
|
||||||
|
<template #prefix >
|
||||||
|
<el-icon><User/></el-icon>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="form.password" maxlength="10" type="password" placeholder="密码">
|
||||||
|
<template #prefix >
|
||||||
|
<el-icon><Lock/></el-icon>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="form.password_repeat" maxlength="10" type="password" placeholder="重复密码">
|
||||||
|
<template #prefix >
|
||||||
|
<el-icon><Lock/></el-icon>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model="form.email" maxlength="10" type="email" placeholder="电子邮件地址">
|
||||||
|
<template #prefix >
|
||||||
|
<el-icon><Message/></el-icon>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-row :gutter="10" style="width: 100%;">
|
||||||
|
<el-col :span="17">
|
||||||
|
<el-input v-model="form.code" maxlength="6" type="text" placeholder="请输入验证码">
|
||||||
|
<template #prefix>
|
||||||
|
<el-icon><EditPen/></el-icon>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-button type="success">获取验证码</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 80px">
|
||||||
|
<el-button style="width: 270px" type="warning" plain>立即注册</el-button>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 20px">
|
||||||
|
<span style="font-size: 15px;line-height: 15px;color: gray">已有账户?</span>
|
||||||
|
<el-link style="translate: 0 -1px" @click="router.push('/')">立即登录</el-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue