工作152:阅读之后台管理登录样式

<template><div class="login-wrap"><div class="ms-login"><div class="ms-title">后台管理系统</div><el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content"><el-form-item prop="username"><el-input v-model="param.username" placeholder="username"><el-button slot="prepend" icon="el-icon-lx-people"></el-button></el-input></el-form-item><el-form-item prop="password"><el-inputtype="password"placeholder="password"v-model="param.password"@keyup.enter.native="submitForm()"><el-button slot="prepend" icon="el-icon-lx-lock"></el-button></el-input></el-form-item><div class="login-btn"><el-button type="primary" @click="submitForm()">登录</el-button></div><p class="login-tips">Tips : 用户名和密码随便填。</p></el-form></div></div>
</template><script>
export default {data: function() {return {param: {username: 'admin',password: '123123',},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }],},};},methods: {submitForm() {this.$refs.login.validate(valid => {if (valid) {this.$message.success('登录成功');localStorage.setItem('ms_username', this.param.username);this.$router.push('/');} else {this.$message.error('请输入账号和密码');console.log('error submit!!');return false;}});},},
};
</script><style scoped>
.login-wrap {position: relative;width: 100%;height: 100%;background-image: url(../../assets/img/login-bg.jpg);background-size: 100%;
}
.ms-title {width: 100%;line-height: 50px;text-align: center;font-size: 20px;color: #fff;border-bottom: 1px solid #ddd;
}
.ms-login {position: absolute;left: 50%;top: 50%;width: 350px;margin: -190px 0 0 -175px;border-radius: 5px;background: rgba(255, 255, 255, 0.3);overflow: hidden;
}
.ms-content {padding: 30px 30px;
}
.login-btn {text-align: center;
}
.login-btn button {width: 100%;height: 36px;margin-bottom: 10px;
}
.login-tips {font-size: 12px;line-height: 30px;color: #fff;
}
</style>

运行结果

工作152:阅读之后台管理登录样式相关推荐

【JAVA EE#6】【传智书城·源码阅读】后台管理模块：权限控制+页面分析+商品管理+销售榜单+订单管理+公告管理+项目结构思维导图
权限控制普通用户只能访问client文件夹下面的jsp文件,对于没有权限操作的admin文件夹就会提示错误,而超级用户同时可以访问两者,一直很好奇这个权限限制怎么实现的. 原来在存在一个AdminP ...
vue中后台管理登录后的token管理
在做后台管理系统的时候,登录后token管理很重要.上代码,有瑕疵,有待改善,见谅. import Vue from 'vue' import Router from 'vue-router' imp ...
Laravel5.6 实现后台管理登录(自定义用户表登录)
1.添加guard 认证驱动 'guards' => ['web' => ['driver' => 'session','provider' => 'users',],'adm ...
IIS或Apache部署Django项目时，Admin后台管理CSS样式丢失？
运行环境: Windows 10 专业版 64位 Python27 Django1.11 Mysql5.7 IIS 10 或 Apache24 丢失CSS样式后的界面: 正确加载CSS样式的界面: 通 ...
简单的后台管理:登录+注册接口
所需:Express+MySQL数据库 +Vue 首先在Express创建服务端并且连接数据库 // 连接数据库 var mysql = require('mysql'); var connectio ...
layui后台管理登录
1. 登录操作进行验证判断 2. 调用接口发送请求 3. 可存储信息在浏览器缓存此处所用请求方法为js中自己写的方法封装好的 ,感兴趣的可以去看下.layui封装js封装js方法https://bl ...
网站后台管理-登录页面
一.要实现的功能 1.登录页面有用户名和密码的验证,用户名和密码不能为空,长度在一定范围之内. 2.用户登录后,将用户的登录信息保存在session中. 3.注重安全性,不能在地址栏输入地址就能直接访 ...
eladmin 后台管理 -- 登录
后台管理使用微信扫码登录（小程序登录）
后台管理登录页添加一个微信登录按钮,点击弹窗二维码代码实现: /*** 该页面原本是用户协议页(产线页面),目前接入微信授权登录功能* 原因:微信扫码登录,后端生成的二维码仅能跳转当前生产环境小程 ...

工作152:阅读之后台管理登录样式

工作152:阅读之后台管理登录样式相关推荐

最新文章

热门文章