效果图片

代码块

<template><div class="main"><div class="backImg"></div><div class="login"><div class="title"><span>Login管理系统</span></div><div class="list"><el-inputprefix-icon="el-icon-user"placeholder="请输入账号"v-model="dataFrom.username"></el-input></div><div class="list"><el-inputprefix-icon="el-icon-unlock"placeholder="请输入密码"show-passwordv-model="dataFrom.password"></el-input></div><div class="list"><el-inputprefix-icon="el-icon-document-checked"placeholder="请输入验证码"v-model="dataFrom.code"></el-input><div class="getCode"><span @click="getCode">{{ dataFrom.code }}</span></div></div><div class="btn"><button @click="loginClick">登录</button></div></div></div>
</template>
<script>
export default {data() {return {dataFrom: {username: "xq",password: "xq123",code: "",},};},mounted() {this.getCode();},methods: {loginClick() {if (this.dataFrom.username == "xq" &&this.dataFrom.password == "xq123" &&this.dataFrom.code == this.dataFrom.code) {localStorage.setItem("username", this.dataFrom.username);localStorage.setItem("password", this.dataFrom.password);localStorage.setItem("code", this.dataFrom.code);this.$router.push("./home");}},getCode() {var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";var arr = str.split("");var oldStr = "";for (var i = 0; i < 4; i++) {var n = Math.floor(Math.random() * arr.length);oldStr += arr[n];}this.dataFrom.code = oldStr.substring(oldStr.length - 4);},},
};
</script>
<style scoped>
.backImg {background: url("https://img-blog.csdnimg.cn/2ebd84257f154cb8848aab94dd663bb4.png");background-size: 100% 100%;position: fixed;width: 100%;height: 100%;left: 0;top: 0;
}
.login {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 1px solid #ccc;background: #fff;width: 20%;padding: 20px 20px 25px 20px;
}
.login .title {text-align: center;padding-bottom: 5px;
}
.login .title span {font-size: 30px;color: #000;
}.login .list {display: flex;align-items: center;padding: 8px 0;
}
.login .list input {border-radius: 3px;border: none;outline: none;color: #999;border: 1px solid #bdbdbd;font-size: 14px;line-height: 35px;padding: 0 10px;display: block;box-sizing: border-box;flex: 7;
}.login .list .getCode span {font-size: 20px;background: #f5f7fa;color: #777;border-radius: 4px;line-height: 38px;border: 1px solid #ccc;display: inline-block;margin-left: 10px;width: 80px;text-align: center;user-select: none;cursor: pointer;
}.btn {display: flex;justify-content: flex-end;padding-top: 5px;
}
.btn button {font-size: 13px;color: #fff;background: #46b5ff;outline: none;border: none;line-height: 35px;padding: 0 20px;display: inline-block;flex: 1;cursor: pointer;
}
</style>

uniapp登录界面

<template><view class="main"><view class="backImg"></view><view class="login"><view class="loginTitle"><text>XuQian后台登录</text></view><view class="list"><uni-icons type="person" size="17"></uni-icons><input placeholder="请输入账号" v-model="dataFrom.username"></input></view><view class="list"><uni-icons type="locked" size="17"></uni-icons><input placeholder="请输入密码" password v-model="dataFrom.password"></input></view><view class="getCode"><view class="codeInput"><uni-icons type="notification" size="17"></uni-icons><input placeholder="请输入验证码" v-model="dataFrom.code"></input></view><view class="codeText" @click="getCode"><text>{{ dataFrom.code }}</text></view></view><view class="password"><checkbox-group><checkbox /></checkbox-group><text>记住密码</text></view><view class="loginBtn"><text>登入</text></view></view></view>
</template>
<script>export default {data() {return {dataFrom: {username: "xq",password: "xq123456789",code: ''}}},mounted() {this.getCode()},methods: {getCode() {var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";var arr = str.split("");var oldStr = "";for (var i = 0; i < 5; i++) {var n = Math.floor(Math.random() * arr.length);oldStr += arr[n];}this.dataFrom.code = oldStr.substring(oldStr.length - 5);},}};
</script>
<style scoped>uni-checkbox-group {font-size: 0;}/deep/.uni-checkbox-input {width: 32rpx;height: 32rpx;}/deep/.uni-checkbox-input.uni-checkbox-input-checked::before {font-size: 15px;}.backImg {background: #1E9FFF;position: fixed;width: 100%;height: 100%;left: 0;top: 0;}.login {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 360px;background-color: #fff;border: 1px solid #fff;border-radius: 6rpx;padding: 28rpx 40rpx;box-sizing: border-box;box-shadow: 0 0 8px #eeeeee;letter-spacing: 2rpx;}.login uni-icons {color: #d2d2d2;}.login .loginTitle {text-align: center;margin-bottom: 20rpx;padding: 28rpx 0;}.login .loginTitle text {color: #1E9FFF;font-size: 50rpx;font-weight: bold;}.login .list {display: flex;align-items: center;border: 1px solid #dddddd;padding: 0 15rpx;margin-bottom: 30rpx;border-radius: 10rpx;}.login input {border: none;outline: none;font-size: 28rpx;color: rgb(51, 51, 51);line-height: 70rpx;height: 70rpx;display: block;box-sizing: border-box;flex: 7;border: none;padding: 0 15rpx;}.login .password {margin-bottom: 30rpx;display: flex;align-items: center;}.login .password text {font-size: 28rpx;color: #989898;display: inline-block;padding-left: 10rpx;line-height: 32rpx;}.login .getCode {display: flex;justify-content: space-between;}.login .codeInput {display: flex;align-items: center;border: 1px solid #dddddd;padding: 0 15rpx;margin-bottom: 30rpx;border-radius: 10rpx;}.login .codeText text {font-size: 40rpx;background: #f5f7fa;color: #777;border-radius: 8rpx;line-height: 70rpx;border: 1px solid #e6e6e6;display: inline-block;width: 95px;text-align: center;user-select: none;cursor: pointer;}.login .loginBtn {padding-bottom: 30rpx;}.login .loginBtn text {background-color: #1E9FFF;line-height: 76rpx;color: #fff;text-align: center;font-size: 25rpx;border-radius: 4rpx;display: block;}
</style>

Vue+element-Ui登录界面相关推荐

element ui登录界面_Vue和Element-UI做一个简单的登录页面
如下所示,是vue+ElementUI写的一个登录页面: Login.vue部分 class="demo-ruleForm login-container"> 登陆界面记住 ...
element ui登录界面_vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（四）美化头部和登录界面...
美化头部header.vue 找张头像当用户头像在写点css来美化一下头部,完善一下现在能完成的功能 header.vue :default-active="$route.path&quo ...
vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面话不多说,先上图界面效果图下面直接上代码: <template><div class="loginbody&q ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
Vue实战篇一：使用Vue搭建注册登录界面
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
vue 创建一个登录界面
vue创建一个登录界面 (1)创建登录界面和主页 (2)配置路由 (3)配置main.js (4)配置App.vue (5)登录页面 (6)主页面用到的组件参考链接 (1)创建登录界面和主页打开 ...
基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

Vue+element-Ui登录界面

代码块

uniapp登录界面

Vue+element-Ui登录界面相关推荐

最新文章

热门文章