<template><div class="login-wrap"><div class="ms-login"><div class="ms-title">后臺(tái)管理系統(tǒng)</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: '請(qǐng)輸入用戶名', trigger: 'blur' }],password: [{ required: true, message: '請(qǐng)輸入密碼', 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('請(qǐng)輸入賬號(hào)和密碼');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>

運(yùn)行結(jié)果

總結(jié)

以上是生活随笔為你收集整理的工作152:阅读之后台管理登录样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。