18.1.1 登录界面设计
登录界面效果图如下图18.1-1:
图18.1-1
界面设计主要是2个输入框,2个按钮, script脚本内容暂时不去管,主要看模板文件和样式。
在views目录下创建Login.vue文件,代码如下:
<template>
<div class="login">
<div class="login_card">
<div class="avatar_box">
<img src="../assets/images/logo1.png"/>
</div>
<!--登录表单-->
<el-form ref="loginForm" :model="formModel" :rules="formRules" label-width="80px" class="login_form">
<el-form-item label="用户名" prop="username">
<el-input v-model="formModel.username" type="text">
<span slot="prefix" class="iconfont iconuser"></span>
</el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="formModel.password" type="password">
<span slot="prefix" class="iconfont iconpassword"></span>
</el-input>
</el-form-item>
<el-form-item class="buttons">
<el-button type="primary" @click="login" :loading="loading">登录</el-button>
<el-button type="info" @click="resetFormFields">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
</script>
<style lang="less" scoped>
.login {
background-color: #194187;
height: 100%;
}
.login_card {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, 50%);
.avatar_box {
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #eee;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
}
.buttons {
display: flex;
justify-content: flex-end;
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.color-main {
color: #409EFF;
}
</style>
上面代码主要看组件的布局,如果您拷贝了上面的代码运行,想先看到效果,可以暂时先把<script>…</script>里的代码去掉,以及方法和对象的引用去掉,等后面再加上。这个登录界面涉及到的知识点如下:
1、用到的组件为:el-form,el-form-item,el-button,el-input,知识点梳理如下:
(1)el-form有一个属性:model,是绑定一个数据模型formModel。
(2)el-input的: v-model双向绑定数据formModel.username
(3)el-input输入框内部图标,是按照插槽方式加入的,代码如下:
<span slot="prefix" class="iconfont iconpassword"></span>。slot="prefix"是把图标放入输入框的左侧。图标的样式是阿里图标,关于阿里图标在Vue的用法,可以百度一下。
(4)el-button的type值是按钮的样式,loading属性是点击时等待动画。
2、style样式,这是本节的重点,如果对css比较熟悉,就略过。
(1).login_card这个box采用绝对布局,position:absolute,left:50%,这样的话box就不在中间了。然后,需要对这个box自身进行位移,transform: translate(-50%, -50%),相对于自身往左移动了50%,这样box就居中了。
(2)嵌套样式。在.login_card的内部嵌套了头像的样式.avadar-box,在.avadar-box内部嵌套了img样式。
----------------------------------------------------------------------------------------------------------------
本内容为《抹平Vue学习曲线》的部分章节,需要阅读完整书籍的,可以跟作者沟通。
----------------------------------------------------------------------------------------------------------------