RyanGoodwill/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成了注册页面的绘制，在登录和注册界面上分别添加了相互跳转的链接。

Browse Source 
注册了注册页面的路由
This commit is contained in:
高子兴 2024-06-29 23:25:23 +08:00
parent 4aaf11431c
commit ed09454937
3 changed files with 148 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/router/authentication.js
View File

@ -1,10 +1,10 @@
// ！！！这是一个示例，请根据实际情况修改！！！
import Login from '../views/authentication/Login.vue'
// import Register from '../views/authentication/Register.vue'
import Register from '../views/authentication/Register.vue'
// import Profile from '../views/authentication/Profile.vue'
export default [
{ path: '/login', component: Login },
// { path: '/register', component: Register },
{ path: '/register', component: Register },
// { path: '/profile', component: Profile }
]

66
src/views/authentication/Login.vue
View File

@ -1,5 +1,7 @@
<script setup>
import { ref } from 'vue';
import { ElInput, ElButton, ElCheckbox, ElForm, ElFormItem } from 'element-plus';
import 'element-plus/dist/index.css';
const username = ref('');
const password = ref('');
@ -15,25 +17,29 @@ const handleLogin = () => {
<div class="login-container">
<div class="login-box">
<h2>测盟汇管理系统</h2>
<form @submit.prevent="handleLogin">
<div class="input-group">
<ElForm @submit.prevent="handleLogin">
<ElFormItem>
<label for="username">
<i class="fas fa-user"></i> 账号
</label>
<input v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
</div>
<div class="input-group">
<ElInput v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
</ElFormItem>
<ElFormItem>
<label for="password">
<i class="fas fa-lock"></i> 密码
</label>
<input v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
</div>
<div class="checkbox-group">
<input v-model="rememberMe" type="checkbox" id="rememberMe" />
<label for="rememberMe">记住密码</label>
</div>
<button type="submit" class="login-button">登录</button>
</form>
<ElInput v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
</ElFormItem>
<ElFormItem>
<ElCheckbox v-model="rememberMe" id="rememberMe">记住密码</ElCheckbox>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" native-type="submit" class="login-button">登录</ElButton>
</ElFormItem>
<ElFormItem>
<ElButton type="text" @click="() => $router.push('/register')">注册</ElButton>
</ElFormItem>
</ElForm>
</div>
</div>
</template>
@ -61,45 +67,31 @@ h2 {
margin-bottom: 1rem;
}
.input-group {
.el-form-item {
margin-bottom: 1rem;
text-align: left;
}
.input-group label {
.el-form-item label {
display: block;
margin-bottom: 0.5rem;
}
.input-group input {
.el-input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.checkbox-group input {
margin-right: 0.5rem;
}
.login-button {
.el-button {
width: 100%;
padding: 0.75rem;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
.el-button--primary {
background-color: #007bff;
color: white;
}
.el-button--primary:hover {
background-color: #0056b3;
}
</style>

116
src/views/authentication/Register.vue Normal file
View File

@ -0,0 +1,116 @@
<script setup>
import { ref } from 'vue';
import { ElInput, ElButton, ElForm, ElFormItem, ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
const companyName = ref('');
const contactInfo = ref('');
const password = ref('');
const verificationCode = ref('');
const handleRegister = () => {
console.log('Registering with', { companyName: companyName.value, contactInfo: contactInfo.value, password: password.value, verificationCode: verificationCode.value });
// 处理注册逻辑
};
const sendVerificationCode = () => {
ElMessage.success('验证码已发送');
// 处理发送验证码逻辑
};
</script>
<template>
<div class="register-container">
<div class="register-box">
<h2>企业租户注册</h2>
<ElForm @submit.prevent="handleRegister">
<ElFormItem>
<label for="companyName">企业名称</label>
<ElInput v-model="companyName" type="text" id="companyName" placeholder="请输入企业名称" required />
</ElFormItem>
<ElFormItem>
<label for="contactInfo">企业联系方式</label>
<ElInput v-model="contactInfo" type="text" id="contactInfo" placeholder="请输入企业联系方式" required />
</ElFormItem>
<ElFormItem>
<label for="password">密码</label>
<ElInput v-model="password" type="password" id="password" placeholder="请输入密码" required />
</ElFormItem>
<ElFormItem>
<label for="verificationCode">验证码</label>
<ElInput v-model="verificationCode" type="text" id="verificationCode" placeholder="请输入验证码" required>
<template #append>
<ElButton type="primary" @click="sendVerificationCode" class="verification-button">获取验证码</ElButton>
</template>
</ElInput>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" native-type="submit" class="register-button">注册</ElButton>
</ElFormItem>
<ElFormItem>
<ElButton type="text" @click="() => $router.push('/login')">返回登录</ElButton>
</ElFormItem>
</ElForm>
</div>
</div>
</template>
<style scoped>
.register-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url('background.jpg') no-repeat center center;
background-size: cover;
}
.register-box {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 20%;
}
h2 {
margin-bottom: 1rem;
}
.el-form-item {
margin-bottom: 1rem;
text-align: left;
}
.el-form-item label {
display: block;
margin-bottom: 0.5rem;
}
.el-input {
width: 100%;
}
.verification-button {
width: 120px; /* 确保按钮宽度合适 */
display: flex;
justify-content: center;
align-items: center;
padding: 0; /* 去除默认内边距 */
}
.el-button {
width: 100%;
padding: 0.75rem;
}
.el-button--primary {
background-color: #007bff;
color: white;
}
.el-button--primary:hover {
background-color: #0056b3;
}
</style>