| | |
| | | <template> |
| | | <div class="auth-page"> |
| | | <!-- <div class="title">社区警务平台</div> --> |
| | | <!-- <div class="container"> --> |
| | | <!-- <h1 class="text-xs-center">用户登录</h1> --> |
| | | <!-- <div class="loginbody"> |
| | | <div class="auth-page"> |
| | | <!-- <div class="title">社区警务平台</div> --> |
| | | <!-- <div class="container"> --> |
| | | <!-- <h1 class="text-xs-center">用户登录</h1> --> |
| | | <!-- <div class="loginbody"> |
| | | <el-form :model="user" ref="formName" status-icon :rules="rules"> |
| | | <span class="input">用户名:</span> |
| | | <el-form-item prop="username"> |
| | |
| | | </el-form-item> |
| | | </el-form> |
| | | </div>--> |
| | | <!-- </div> --> |
| | | <div class="loginTitle">社区警务可视化管理平台</div> |
| | | <div class="layui-form login_content"> |
| | | <p>用户登录</p> |
| | | <el-form :model="loginForm" ref="formName" status-icon :rules="rules"> |
| | | <el-form-item prop="username"> |
| | | <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入您的用户名" |
| | | autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入您密码" |
| | | autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <!-- <el-button type="primary" @click.enter="onLogin()">登 录</el-button> --> |
| | | <div class="login-btn" @click.enter="onLogin()">登 录</div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="copyright-box"> |
| | | 版权所有:信州分局 <br />技术支持:户政大队/科信大队 |
| | | </div> |
| | | <!-- </div> --> |
| | | <div class="loginTitle">警务作战一体化平台</div> |
| | | <div class="layui-form login_content"> |
| | | <p>用户登录</p> |
| | | <el-form :model="loginForm" ref="formName" status-icon :rules="rules"> |
| | | <el-form-item prop="username"> |
| | | <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入您的用户名" |
| | | autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入您密码" |
| | | autocomplete="off"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <!-- <el-button type="primary" @click.enter="onLogin()">登 录</el-button> --> |
| | | <div class="login-btn" @click.enter="onLogin()">登 录</div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <div class="copyright-box"> |
| | | 版权所有:信州分局 <br />技术支持:户政大队/科信大队 |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import nprogress from 'nprogress' |
| | | |
| | | export default { |
| | | name: 'AppRegister', |
| | | data () { |
| | | return { |
| | | user: { |
| | | username: '', |
| | | password: '' |
| | | }, |
| | | loginForm: { |
| | | //租户ID |
| | | tenantId: "000000", |
| | | //部门ID |
| | | deptId: "", |
| | | //角色ID |
| | | roleId: "", |
| | | //用户名 |
| | | username: "", |
| | | //密码 |
| | | password: "", |
| | | //账号类型 |
| | | type: "account", |
| | | //验证码的值 |
| | | code: "", |
| | | //验证码的索引 |
| | | key: "", |
| | | //预加载白色背景 |
| | | image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", |
| | | }, |
| | | rules: { |
| | | username: [ |
| | | { required: true, message: '用户名不能为空', trigger: 'blur' }, |
| | | { |
| | | min: 3, |
| | | // max: 10, |
| | | message: '用户账号长度至少3位', |
| | | trigger: 'blur' |
| | | } |
| | | ], |
| | | password: [ |
| | | { required: true, message: '密码不能为空', trigger: 'blur' }, |
| | | { |
| | | min: 3, |
| | | // max: 10, |
| | | message: '用户密码长度至少3位', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | }, |
| | | errors: null, |
| | | newAxios: null |
| | | } |
| | | }, |
| | | created () { |
| | | var that = this |
| | | |
| | | document.onkeydown = (e) => { |
| | | const _key = window.event.keyCode |
| | | if (_key === 13) { |
| | | that.onLogin() |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | onLogin () { |
| | | this.$refs.formName.validate((valid) => { |
| | | if (valid) { |
| | | nprogress.start() |
| | | |
| | | const loading = this.$loading({ |
| | | lock: true, |
| | | text: '登录中,请稍后。。。', |
| | | spinner: "el-icon-loading", |
| | | background: 'rgba(0, 0, 0, 0.5)' |
| | | }) |
| | | this.$store.dispatch("LoginByUsername", this.loginForm).then((res) => { |
| | | this.$store.dispatch("GetButtons") |
| | | |
| | | //跳转首页 |
| | | this.$router.push({ path: "/layout/home" }) |
| | | loading.close() |
| | | }).catch((error) => { |
| | | loading.close() |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | name: 'AppRegister', |
| | | data () { |
| | | return { |
| | | user: { |
| | | username: '', |
| | | password: '' |
| | | }, |
| | | loginForm: { |
| | | //租户ID |
| | | tenantId: "000000", |
| | | //部门ID |
| | | deptId: "", |
| | | //角色ID |
| | | roleId: "", |
| | | //用户名 |
| | | username: "", |
| | | //密码 |
| | | password: "", |
| | | //账号类型 |
| | | type: "account", |
| | | //验证码的值 |
| | | code: "", |
| | | //验证码的索引 |
| | | key: "", |
| | | //预加载白色背景 |
| | | image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", |
| | | }, |
| | | rules: { |
| | | username: [ |
| | | { required: true, message: '用户名不能为空', trigger: 'blur' }, |
| | | { |
| | | min: 3, |
| | | // max: 10, |
| | | message: '用户账号长度至少3位', |
| | | trigger: 'blur' |
| | | } |
| | | ], |
| | | password: [ |
| | | { required: true, message: '密码不能为空', trigger: 'blur' }, |
| | | { |
| | | min: 3, |
| | | // max: 10, |
| | | message: '用户密码长度至少3位', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | }, |
| | | errors: null, |
| | | newAxios: null |
| | | } |
| | | }, |
| | | created () { |
| | | var that = this |
| | | |
| | | document.onkeydown = (e) => { |
| | | const _key = window.event.keyCode |
| | | if (_key === 13) { |
| | | that.onLogin() |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | onLogin () { |
| | | this.$refs.formName.validate((valid) => { |
| | | if (valid) { |
| | | nprogress.start() |
| | | |
| | | const loading = this.$loading({ |
| | | lock: true, |
| | | text: '登录中,请稍后。。。', |
| | | spinner: "el-icon-loading", |
| | | background: 'rgba(0, 0, 0, 0.5)' |
| | | }) |
| | | this.$store.dispatch("LoginByUsername", this.loginForm).then((res) => { |
| | | this.$store.dispatch("GetButtons") |
| | | |
| | | //跳转首页 |
| | | this.$router.push({ path: "/layout/home" }) |
| | | loading.close() |
| | | }).catch((error) => { |
| | | loading.close() |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .login-btn { |
| | | background-color: #409eff; |
| | | border-radius: 2px; |
| | | height: 30px; |
| | | cursor: pointer; |
| | | line-height: 30px; |
| | | font-size: 14px; |
| | | background-color: #409eff; |
| | | border-radius: 2px; |
| | | height: 30px; |
| | | cursor: pointer; |
| | | line-height: 30px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .login-btn:hover { |
| | | background-color: #66b1ff; |
| | | background-color: #66b1ff; |
| | | } |
| | | |
| | | .auth-page { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background-image: url(../../../public/img/bg/login-bg.png); |
| | | background-size: 100% 100%; |
| | | margin: 0; |
| | | padding: 0; |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background-image: url(../../../public/img/bg/login-bg.png); |
| | | background-size: 100% 100%; |
| | | margin: 0; |
| | | padding: 0; |
| | | |
| | | .loginTitle { |
| | | color: #00cbdd; |
| | | font-size: 46px; |
| | | letter-spacing: 6px; |
| | | font-weight: 700; |
| | | position: absolute; |
| | | top: 20%; |
| | | right: 25%; |
| | | transform: translateX(50%); |
| | | .loginTitle { |
| | | color: #00cbdd; |
| | | font-size: 46px; |
| | | letter-spacing: 6px; |
| | | font-weight: 700; |
| | | position: absolute; |
| | | top: 20%; |
| | | right: 25%; |
| | | transform: translateX(50%); |
| | | } |
| | | |
| | | .login_content { |
| | | width: 300px; |
| | | position: absolute; |
| | | text-align: center; |
| | | top: 50%; |
| | | right: 25%; |
| | | transform: translateY(-40%) translateX(50%); |
| | | color: #ffffff; |
| | | padding: 30px; |
| | | background: url(../../../public/img/bg/login-content-bg.png), |
| | | url(../../../public/img/bg/left-top.png) no-repeat left top, |
| | | url(../../../public/img/bg/left-bottom.png) no-repeat left bottom, |
| | | url(../../../public/img/bg/right-top.png) no-repeat right top, |
| | | url(../../../public/img/bg/right-bottom.png) no-repeat right bottom; |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%, 25px, 25px, 25px, 25px; |
| | | |
| | | p { |
| | | font-size: 26px; |
| | | margin-bottom: 15px; |
| | | letter-spacing: 4px; |
| | | } |
| | | |
| | | .login_content { |
| | | width: 300px; |
| | | position: absolute; |
| | | text-align: center; |
| | | top: 50%; |
| | | right: 25%; |
| | | transform: translateY(-40%) translateX(50%); |
| | | color: #ffffff; |
| | | padding: 30px; |
| | | background: url(../../../public/img/bg/login-content-bg.png), |
| | | url(../../../public/img/bg/left-top.png) no-repeat left top, |
| | | url(../../../public/img/bg/left-bottom.png) no-repeat left bottom, |
| | | url(../../../public/img/bg/right-top.png) no-repeat right top, |
| | | url(../../../public/img/bg/right-bottom.png) no-repeat right bottom; |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%, 25px, 25px, 25px, 25px; |
| | | |
| | | p { |
| | | font-size: 26px; |
| | | margin-bottom: 15px; |
| | | letter-spacing: 4px; |
| | | } |
| | | |
| | | :deep(.el-button--primary) { |
| | | width: 100%; |
| | | height: 34px; |
| | | border-radius: 2px; |
| | | } |
| | | |
| | | :deep(.el-button) { |
| | | line-height: 14px; |
| | | } |
| | | :deep(.el-button--primary) { |
| | | width: 100%; |
| | | height: 34px; |
| | | border-radius: 2px; |
| | | } |
| | | |
| | | .copyright-box { |
| | | position: absolute; |
| | | color: #fff; |
| | | font-size: 14px; |
| | | bottom: 1%; |
| | | right: 1%; |
| | | text-align: left; |
| | | :deep(.el-button) { |
| | | line-height: 14px; |
| | | } |
| | | } |
| | | |
| | | // .title { |
| | | // width: 1389px; |
| | | // height: 115px; |
| | | // // background-image: url(../../../public/img/bg/login_title@2x.png); |
| | | // background-size: 100% 100%; |
| | | // margin: 99px 264px 0px 266px; |
| | | // font-size: 74px; |
| | | // color: #fff; |
| | | // } |
| | | // .container { |
| | | // position: absolute; |
| | | // top: 0; |
| | | // left: 0; |
| | | // right: 0; |
| | | // bottom: 0; |
| | | // margin: 317px auto; |
| | | // width: 653px; |
| | | // height: 552px; |
| | | // background-image: url(../../../public/img/bg/rectangle11@2x.png); |
| | | // background-size: 100% 100%; |
| | | // border-radius: 10px; |
| | | // letter-spacing: 100; |
| | | .copyright-box { |
| | | position: absolute; |
| | | color: #fff; |
| | | font-size: 14px; |
| | | bottom: 1%; |
| | | right: 1%; |
| | | text-align: left; |
| | | } |
| | | |
| | | // // h1 { |
| | | // // margin: 54px 244px 0px 243px; |
| | | // // width: 166px; |
| | | // // text-align: left; |
| | | // // width: 176px; |
| | | // // height: 30px; |
| | | // // font-size: 42px; |
| | | // // font-family: PangMenZhengDao; |
| | | // // font-weight: 400; |
| | | // // color: #ffffff; |
| | | // // line-height: 30px; |
| | | // // letter-spacing: 2px; |
| | | // // } |
| | | // .title { |
| | | // width: 1389px; |
| | | // height: 115px; |
| | | // // background-image: url(../../../public/img/bg/login_title@2x.png); |
| | | // background-size: 100% 100%; |
| | | // margin: 99px 264px 0px 266px; |
| | | // font-size: 74px; |
| | | // color: #fff; |
| | | // } |
| | | // .container { |
| | | // position: absolute; |
| | | // top: 0; |
| | | // left: 0; |
| | | // right: 0; |
| | | // bottom: 0; |
| | | // margin: 317px auto; |
| | | // width: 653px; |
| | | // height: 552px; |
| | | // background-image: url(../../../public/img/bg/rectangle11@2x.png); |
| | | // background-size: 100% 100%; |
| | | // border-radius: 10px; |
| | | // letter-spacing: 100; |
| | | |
| | | // // .loginbody { |
| | | // // position: absolute; |
| | | // // top: 120px; |
| | | // // left: 0; |
| | | // // right: 0; |
| | | // // bottom: 0; |
| | | // // width: 72%; |
| | | // // // margin: auto; |
| | | // // margin-left: 51px; |
| | | // // h1 { |
| | | // // margin: 54px 244px 0px 243px; |
| | | // // width: 166px; |
| | | // // text-align: left; |
| | | // // width: 176px; |
| | | // // height: 30px; |
| | | // // font-size: 42px; |
| | | // // font-family: PangMenZhengDao; |
| | | // // font-weight: 400; |
| | | // // color: #ffffff; |
| | | // // line-height: 30px; |
| | | // // letter-spacing: 2px; |
| | | // // } |
| | | |
| | | // // .el-form-item { |
| | | // // text-align: center; |
| | | // // .loginbody { |
| | | // // position: absolute; |
| | | // // top: 120px; |
| | | // // left: 0; |
| | | // // right: 0; |
| | | // // bottom: 0; |
| | | // // width: 72%; |
| | | // // // margin: auto; |
| | | // // margin-left: 51px; |
| | | |
| | | // // :deep(.el-input__inner) { |
| | | // // width: 548px; |
| | | // // height: 59px; |
| | | // // background: #0c2d49; |
| | | // // opacity: 0.5; |
| | | // // margin-bottom: 15px; |
| | | // // font-size: 21px; |
| | | // // } |
| | | // // :deep(.el-input--prefix .el-input__inner) { |
| | | // // padding-left: 40px; |
| | | // // } |
| | | // // :deep(.el-input__inner:focus) { |
| | | // // border: 2px solid #22b4cb; |
| | | // // opacity: 0.8; |
| | | // // color: #fff; |
| | | // // } |
| | | // // :deep(.el-form-item__error) { |
| | | // // color: #f00; |
| | | // // line-height: 0; |
| | | // // font-size: 15px; |
| | | // // opacity: 0.8; |
| | | // // letter-spacing: 2px; |
| | | // // font-weight: 700; |
| | | // // } |
| | | // // :deep(.el-input__icon) { |
| | | // // height: 91%; |
| | | // // width: 34px; |
| | | // // } |
| | | // // :deep(.el-icon-user::before), |
| | | // // :deep(.el-icon-lock::before) { |
| | | // // font-size: 22px; |
| | | // // } |
| | | // // :deep(.el-form-item.is-error)v, |
| | | // // :deep(.el-input__validateIcon) { |
| | | // // font-size: 22px; |
| | | // // } |
| | | // // :deep(.el-input__suffix) { |
| | | // // right: -48px; |
| | | // // } |
| | | // // :deep(.el-input input::-webkit-input-placeholder) { |
| | | // // color: #ffffff; |
| | | // // font-size: 21px; |
| | | // // opacity: 0.5; |
| | | // // line-height: 27px; |
| | | // // } |
| | | // // :deep(.el-input input::-moz-input-placeholder) { |
| | | // // color: #ffffff; |
| | | // // font-size: 21px; |
| | | // // opacity: 0.5; |
| | | // // } |
| | | // // :deep(.el-input input::-ms-input-placeholder) { |
| | | // // color: #ffffff; |
| | | // // font-size: 21px; |
| | | // // opacity: 0.5; |
| | | // // line-height: 27px; |
| | | // // } |
| | | // // .el-form-item { |
| | | // // text-align: center; |
| | | |
| | | // // :deep(.el-button) { |
| | | // // width: 548px; |
| | | // // height: 59px; |
| | | // // background: linear-gradient( |
| | | // // 90deg, |
| | | // // rgba(0, 249, 247, 0.54), |
| | | // // rgba(0, 182, 249, 0.54) |
| | | // // ); |
| | | // // box-shadow: 0px 2px 20px 1px rgba(1, 25, 70, 0.46); |
| | | // // font-size: 29px; |
| | | // // margin-top: 25px; |
| | | // // } |
| | | // // } |
| | | // // :deep(.el-input__inner) { |
| | | // // width: 548px; |
| | | // // height: 59px; |
| | | // // background: #0c2d49; |
| | | // // opacity: 0.5; |
| | | // // margin-bottom: 15px; |
| | | // // font-size: 21px; |
| | | // // } |
| | | // // :deep(.el-input--prefix .el-input__inner) { |
| | | // // padding-left: 40px; |
| | | // // } |
| | | // // :deep(.el-input__inner:focus) { |
| | | // // border: 2px solid #22b4cb; |
| | | // // opacity: 0.8; |
| | | // // color: #fff; |
| | | // // } |
| | | // // :deep(.el-form-item__error) { |
| | | // // color: #f00; |
| | | // // line-height: 0; |
| | | // // font-size: 15px; |
| | | // // opacity: 0.8; |
| | | // // letter-spacing: 2px; |
| | | // // font-weight: 700; |
| | | // // } |
| | | // // :deep(.el-input__icon) { |
| | | // // height: 91%; |
| | | // // width: 34px; |
| | | // // } |
| | | // // :deep(.el-icon-user::before), |
| | | // // :deep(.el-icon-lock::before) { |
| | | // // font-size: 22px; |
| | | // // } |
| | | // // :deep(.el-form-item.is-error)v, |
| | | // // :deep(.el-input__validateIcon) { |
| | | // // font-size: 22px; |
| | | // // } |
| | | // // :deep(.el-input__suffix) { |
| | | // // right: -48px; |
| | | // // } |
| | | // // :deep(.el-input input::-webkit-input-placeholder) { |
| | | // // color: #ffffff; |
| | | // // font-size: 21px; |
| | | // // opacity: 0.5; |
| | | // // line-height: 27px; |
| | | // // } |
| | | // // :deep(.el-input input::-moz-input-placeholder) { |
| | | // // color: #ffffff; |
| | | // // font-size: 21px; |
| | | // // opacity: 0.5; |
| | | // // } |
| | | // // :deep(.el-input input::-ms-input-placeholder) { |
| | | // // color: #ffffff; |
| | | // // font-size: 21px; |
| | | // // opacity: 0.5; |
| | | // // line-height: 27px; |
| | | // // } |
| | | |
| | | // // .input { |
| | | // // display: inline-block; |
| | | // // width: 100px; |
| | | // // height: 23px; |
| | | // // font-size: 24px; |
| | | // // font-family: PingFang SC; |
| | | // // color: #ffffff; |
| | | // // margin-bottom: 21px; |
| | | // // } |
| | | // // } |
| | | // } |
| | | // // :deep(.el-button) { |
| | | // // width: 548px; |
| | | // // height: 59px; |
| | | // // background: linear-gradient( |
| | | // // 90deg, |
| | | // // rgba(0, 249, 247, 0.54), |
| | | // // rgba(0, 182, 249, 0.54) |
| | | // // ); |
| | | // // box-shadow: 0px 2px 20px 1px rgba(1, 25, 70, 0.46); |
| | | // // font-size: 29px; |
| | | // // margin-top: 25px; |
| | | // // } |
| | | // // } |
| | | |
| | | // // .input { |
| | | // // display: inline-block; |
| | | // // width: 100px; |
| | | // // height: 23px; |
| | | // // font-size: 24px; |
| | | // // font-family: PingFang SC; |
| | | // // color: #ffffff; |
| | | // // margin-bottom: 21px; |
| | | // // } |
| | | // // } |
| | | // } |
| | | } |
| | | </style> |