我的第一个项目(二)：使用Vue做一个登录注册界面 |
您所在的位置：网站首页 › 用android做一个登录和注册界面 › 我的第一个项目(二)：使用Vue做一个登录注册界面 |
我的第一个项目(二)：使用Vue做一个登录注册界面
|
好家伙，
顶不住了，太多的bug， 本来是想把背景用canvas做成动态的，但是，出现了各种问题 为了不耽误进度，我们先把一个简单的登录注册界面做出来
来看看效果：
（看上去还不错）
本界面使用Vue2(新建项目的时候记得把less勾上,项目里有用到) 1.项目目录:
2.MyLogin.vue组件代码如下: 
登录名称
登录密码
注册
登录
export default {
name: 'MyLogin',
data() {
return {
username:'',
password: ''
}
},
methods: {
reset() {
this.username = ''
this.password = ''
},
login() {
},
register(){
this.$router.push('/register')
},
}
}
.login-container {
background-color: #35495e;
height: 100%;
.login-box {
width: 400px;
height: 250px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
.form-login {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
}
}
.form-control {
flex: 1;
}
.avatar-box {
position: absolute;
width: 100%;
top: -65px;
left: 0;
.avatar {
width: 120px;
height: 120px;
border-radius: 50% !important;
box-shadow: 0 0 6px #efefef;
}
}
(在绿色部分使用你想要的图片进行替换)
3.MyRegister代码如下: ![span""/span](span"/spanspan../assets/logo.png/spanspan"/span){kind=logo}
账户
密码
手机号
返回登陆界面
注册
export default {
name: 'MyLogin',
data() {
return {
username: '',
password: ''
}
},
methods: {
backlogin() {
this.$router.push('/login')
},
}
}
.login-container {
background-color: #35495e;
height: 100%;
.login-box {
width: 400px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
.form-login {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
}
}
.form-control {
flex: 1;
}
.avatar-box {
position: absolute;
width: 100%;
top: -65px;
left: 0;
.avatar {
width: 120px;
height: 120px;
border-radius: 50% !important;
box-shadow: 0 0 6px #efefef;
}
}
4.路由 你已经是一个成熟的孩子了,要学会自己配路由 import Vue from "vue" import VueRouter from "vue-router" import pathArr from "@/router/pathArr.js"; //导入需要的组件 import Login from "@/components/MyLogin"; import Register from "@/components/MyRegister"; Vue.use(VueRouter) const router = new VueRouter({ routes: [ {path: '/',redirect: '/login'}, //登录路由规则 {path: '/login',component: Login}, //后台主页路由规则 //注册界面路由 {path: '/register',component: Register}, //背景页面 ] })
大致效果如下:
|
【本文地址】
今日新闻 |
推荐新闻 |