123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <template>
- <div class="login_container">
- <div class="login_box">
- <!-- logo -->
- <div class="avatar_box">
- <img src="../assets/logo.png"
- alt="">
- </div>
- <!-- 登录表单区域 -->
- <el-form ref="loginFormRef"
- :model="loginForm"
- :rules="loginFormRules"
- label-width="0px"
- class="login_form">
- <!-- 用户名称 -->
- <el-form-item prop="username">
- <!-- <el-input prefix-icon="iconfont icon-user"></el-input> -->
- <el-input v-model="loginForm.username"
- prefix-icon="el-icon-user"
- type="text"></el-input>
- </el-form-item>
- <!-- 密码 -->
- <el-form-item prop="password">
- <!-- <el-input prefix-icon="iconfont icon-3702mima"></el-input> -->
- <el-input v-model="loginForm.password"
- prefix-icon="el-icon-lock"
- type="password"></el-input>
- </el-form-item>
- <!-- 按钮 -->
- <el-form-item class="btns">
- <el-button type="primary"
- @click="login">登录</el-button>
- <el-button type="info"
- @click="resetLoginForm">重置</el-button>
- </el-form-item>
- </el-form>
- </div>
- </div>
- </template>
- <script>
- export default {
- // name: 'login',
- data () {
- return {
- // 登录表单的登录数据
- loginForm: {
- // 用户名
- username: 'admin',
- // 密码
- password: '123456'
- },
- // 表单验证规则
- loginFormRules: {
- // 验证用户名是否合法
- username: [
- { required: true, message: '请输入登录名称', trigger: 'blur' },
- { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
- ],
- // 验证密码是否合法
- password: [
- { required: true, message: '请输入密码', trigger: 'blur' },
- { min: 6, max: 20, message: '长度在 6到 20 个字符', trigger: 'blur' }
- ]
- }
- }
- },
- methods: {
- // 点击重置按钮 重置登录表单
- resetLoginForm () {
- // console.log(this)
- this.$refs.loginFormRef.resetFields()
- },
- login () {
- this.$refs.loginFormRef.validate(async (valid) => {
- // console.log(valid)
- if (!valid) return this.$message.error('登录失败')
- const { data: res } = await this.$http.post('login', this.loginForm)
- // console.log(res)
- if (res.meta.status !== 200) {
- return this.$message.error('登录失败')
- }
- this.$message.success('登录成功')
- window.localStorage.setItem('token', res.data.token)
- this.$router.push('/home')
- })
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .login_container {
- background-color: #2b4b6b;
- height: 100%;
- }
- .login_box {
- width: 450px;
- height: 300px;
- background-color: #fff;
- border-radius: 3px;
- position: absolute;
- left: 50%;
- top: 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 #ddd;
- position: absolute;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #fff;
- }
- .avatar_box > img {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- background-color: #eee;
- }
- .login_form {
- position: absolute;
- bottom: 0;
- width: 100%;
- padding: 0 20px;
- box-sizing: border-box;
- }
- .btns {
- display: flex;
- justify-content: flex-end;
- }
- </style>
|