登录页
1、素材搜集:在网上下载几张科技感强的机器人图片,学校官网找到校徽logo。
2、页面布局设想:全局平铺图片,图片需要非常高清。登录框在整个页面垂直居中,登录框内部有标题,用户输入、密码输入、按钮,这些item全部按列排并居中,学校logo放置右上角。
3、css效果:登录框背景色为白色并且模糊化处理,标题文字加阴影效果,用户与密码引入矢量图标库表示。
4、element ui效果:使用element-ui的带校验效果的组件,对输入框校验,必须输入用户名与密码,且用户名必须在3-15字符之间。
5、js:使用axios将表单的数据传输至后端
<template>
<div>
<el-container>
<el-main class="login">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form">
<h2>工业机器人故障排除系统</h2>
<el-form-item prop="username" class="item">
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
<el-input v-model="ruleForm.username" class="input"></el-input>
</el-form-item>
<el-form-item prop="password" class="item">
<i class="fa fa-key" aria-hidden="true"></i>
<el-input type="password" v-model="ruleForm.password" class="input"></el-input>
</el-form-item>
<el-form-item class="item">
<el-button type="primary" @click="submitForm('ruleForm')" class="btn">登录</el-button>
<el-button @click="resetForm('ruleForm')" class="btn">注册</el-button>
</el-form-item>
<div class="logo"><img src="../../public/img/logo.jpg" alt="" class="img-logo"></div>
</el-form>
</el-main>
</el-container>
</div>
</template>
<style scoped>
.input,.btn {
/* 取消默认边框 */
border:none;
/* 去掉点击input时的外边框 */
outline: none;
}
.login {
width: 100vw;
height: 100vh;
/* 弹性盒 */
display: flex;
/* justify-content 属性定义了浏览器之间,
如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。 */
justify-content: center;
/* align-items:在弹性盒中,它控制十字轴上项目的对齐方式 */
align-items: center;
background: url(../../public/img/dot_robot.jpg) fixed no-repeat;
background-size: cover;
}
.form {
width: 550px;
height: 300px;
padding: 30px;
display: flex;
/* justify-content 属性定义了浏览器之间,
如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。 */
justify-content: center;
/* align-items:在弹性盒中,它控制十字轴上项目的对齐方式 */
align-items: center;
flex-direction: column;
text-align: center;
position: relative;
bottom: 57px;
z-index: 100;
background: inherit;
border-radius: 18px;
overflow: hidden;
}
.form::before {
content: "";
width: calc(100% + 20px);
height: calc(100% + 20px);
background: inherit;
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3);
position: absolute;
top: -10px;
left: -10px;
z-index: -1;
filter: blur(6px);
overflow: hidden;
}
.form h2 {
margin-bottom: 30px;
margin-top: 80px;
font-size: 40px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
color: rgb(0, 0, 0);
/* 字母间距 */
letter-spacing: 2px;
}
.form .item i {
font-size: 30px;
margin-right: 15px;
color: rgb(0, 96, 209);
}
.form .item .input {
margin: 6px 0;
width: 300px;
height: 20px;
font-size: 22px;
/* 字母间距 */
letter-spacing: 1px;
color: rgb(4, 15, 114);
background-color: rgba(0, 0, 0, 0);
border-radius: 4px;
}
.form .input::placeholder {
font-size: 18px;
color: rgb(3, 118, 250);
}
.form .btn {
margin: 10px 27px 27px 30px;
border-radius: 4px;
width: 100px;
height: 36px;
line-height: 12px;
font-size: 16px;
/* 字母间距 */
letter-spacing: 7px;
/* background-color: rgba(6, 45, 102, 0.4); */
background: rgb(0, 119, 255);
color: white;
position: relative;
overflow: hidden;
/* 鼠标覆盖上btn时,箭头变小手 */
cursor: pointer;
}
.logo {
width: 100%;
height: 10px;
}
.logo img {
width: 160px;
position: absolute;
right: 10px;
/* bottom: 4px; */
top: 6px;
}
</style>
#-----------------------------------------------------------------------------------
问题与笔记:
background-image 与 <img …>标签的使用有什么不同?
本次的登录页背景是 全局平铺图片,使用了css中的background设置,在右击图片的时候,不会出现“图片另存为”,而使用<img …>标签会出现图片另存为。
待补充…