vue简约登录注册界面
时间: 2023-05-12 17:05:30 浏览: 77
很高兴回答您的问题。Vue.js 是一个流行的 JavaScript 框架,可以用于构建现代化的 Web 应用程序。对于简约的登录注册界面,您可以使用 Vue.js 和一些 UI 库来实现。例如,您可以使用 Element UI 或 Vuetify 来创建漂亮的表单和按钮。同时,您可以使用 Vue Router 来实现路由和导航。如果您需要更多的帮助和指导,可以参考 Vue.js 的官方文档或在线教程。
相关问题
请你用vue和elementui写一个简约的登录注册页面
好的,我可以为您提供一个简约的登录注册页面的代码,使用Vue和ElementUI实现。以下是代码:
```
<template>
<div class="login-container">
<el-card class="login-card">
<h2 class="login-title">登录</h2>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="register-card">
<h2 class="register-title">注册</h2>
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px" class="register-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
},
loginRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},
registerRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== this.registerForm.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
},
trigger: 'blur'
}
]
}
}
},
methods: {
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// TODO: 登录逻辑
}
});
},
register() {
this.$refs.registerForm.validate(valid => {
if (valid) {
// TODO: 注册逻辑
}
});
}
}
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.login-card,
.register-card {
width: 400px;
margin: 0 20px;
}
.login-title,
.register-title {
text-align: center;
margin-bottom: 20px;
}
.login-form,
.register-form {
margin-top: 20px;
}
</style>
```
希望这个代码能够帮助到您!
ruoyi vue 好看的 登录页面
Ruoyi Vue是一种基于Vue.js框架开发的后台管理系统模板。其登录页面设计简洁而美观,以下是我对Ruoyi Vue登录页面的描述:
Ruoyi Vue登录页面的整体设计简洁大方,色调搭配和谐。页面背景采用了浅色系,给人一种清新明亮的感觉。登录框位于页面正中央,采用了圆角设计,给人一种友好的感觉。
登录框中,账号和密码输入框排列整齐,字体选择了简洁的风格,使得输入时更加清晰可见。输入框的边框采用了淡蓝色的颜色,与页面背景色进行了微妙的搭配,使得整体视觉效果更加协调。
登录按钮位于输入框的下方,按钮的颜色和背景色形成鲜明的对比,吸引用户的注意力。按钮上的文本使用了白色字体,清晰醒目。当鼠标移动到按钮上时,按钮会有微小的变化,增加了交互性。
在页面底部,有“服务条款”和“联系我们”的链接,这些链接采用了灰色字体,不会干扰整体视觉效果。这些链接为用户提供了更多信息,并且显示了Ruoyi Vue对用户体验的关注。
总体来说,Ruoyi Vue的登录页面设计简洁而美观,颜色搭配和谐,给人一种舒适的感觉。这种设计风格符合现代用户对于简约、易用性的追求,并且兼顾了视觉美感。这一页面设计不仅提升了用户的登录体验,也彰显了Ruoyi Vue作为一款优秀后台管理系统模板的高品质。
相关推荐
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)