目录
1、登录框组件设计
1.1 表单元素组件注册
1.2 登录组件的结构和样式
2、Icon 图标
2.1 拷贝 font 文件夹到 asserts 目录
2.2 引入 font 的 css 样式
2.3 图标的使用
2.4 测试
1、登录框组件设计
需求：
登录框居于屏幕中央显示；
登录框中的表单元素分别有：用户名、密码、验证码、记住我；
效果如图：
注意:
我们使用的是 element-ui 来做界面的, 当时我们创建项目的时候 选择 组件按需导入 因此当我们第一次到某组件时候需要在
src / plugins / element.js 文件中导入该组件 并将组件绑定到 vue 对象
1.1 表单元素组件注册在src / plugins / element.js 文件中, 引入登录组件中用到的表单对象。
element.js 代码如下:
import Vue from 'vue'import { Button, Form, FormItem, Input, Checkbox, Image } from 'element-ui'Vue.use(Button)Vue.use(Form)Vue.use(FormItem)Vue.use(Input)Vue.use(Checkbox)Vue.use(Image) 1.2 登录组件的结构和样式login.vue 中 完成了登录的文本框居中 和 表单元素的添加
<template> <div class="login_container"> <div class="login_box"> <!-- 登录表单区域 --> <el-form size="mini"> <!-- 用户名 --> <el-form-item> <el-input placeholder="用户名"></el-input> </el-form-item> <!-- 密码 --> <el-form-item> <el-input placeholder="密码" show-password></el-input> </el-form-item> <!-- 验证码 --> <el-form-item> <el-input class="code" placeholder="验证码"></el-input> <a> <img /> </a> </el-form-item> <!-- 记住我 --> <el-form-item> <el-checkbox label="记住我" class="rememberMe"></el-checkbox> </el-form-item> <!-- 登录按钮 --> <el-form-item> <el-button type="primary">登录</el-button> </el-form-item> </el-form> </div> <vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="60" shapeType="circle" :particleSize="4" linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="2" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="lizi" style="height:100%" > </vue-particles> </div></template><script>export default {}</script><style scoped>.login_container { background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%); /*background-image: url("../images/bg_login.png");*/ background-repeat: no-repeat; background-size: cover; height: 100%;}.login_box { width: 290px; height: 350px; /* background-color: #fff; */ background-color: #2e527bb3; border-radius: 5px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}.el-form { padding: 32px; position: absolute; bottom: 0; width: 100%; box-sizing: border-box;}.el-button { width: 100%;}.code { width: 45%;}img { /* style="width: 100px; height: 30px; margin-left:5px;vertical-align: middle;" */ display: line-inline; width: 45%; height: 28px; margin-left: 10px; vertical-align: middle; border-radius: 3px;}.rememberMe { color: #fff;}</style> 2、Icon 图标给用户名、密码框的左侧添加 Icon 图标，实现效果：
2.1 拷贝 font 文件夹到 asserts 目录font 文件夹会以 附件或百度网盘的 形式分享
2.2 引入 font 的 css 样式在 main.js 中文件中, 引入 font 的 css 样式
// 导入字体图标import './assets/fonts/iconfont.css' 2.3 图标的使用 <el-input placeholder="用户名" prefix-icon="iconfont icon-user"></el-input><el-input placeholder="密码" show-password prefix-icon="iconfont icon-3702mima"></el-input> 2.4 测试重写编译部署项目，即可看到效果