| | |
| | | <style scoped> |
| | | .enter { |
| | | width: 100vw; |
| | | height: 100vh; |
| | | display: flex; |
| | | background-image: url("../../assets/404_images/login-form-bg.png"); |
| | | background-size: 100% 100%; |
| | | } |
| | | |
| | | .left { |
| | | width: calc(100% - 500px); |
| | | height: 100%; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .left img { |
| | | width: 100%; |
| | | min-height: 100%; |
| | | } |
| | | |
| | | .right { |
| | | width: 600px; |
| | | overflow-y: auto; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .title_big { |
| | | color: #004EA2; |
| | | font-size: 40px; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .title_small { |
| | | color: #004EA2; |
| | | font-size: 24px; |
| | | } |
| | | |
| | | .elform { |
| | | margin-top: 50px; |
| | | } |
| | | |
| | | .sao { |
| | | font-size: 14px; |
| | | color: #004EA2; |
| | | width: 100%; |
| | | text-align: right; |
| | | } |
| | | .enter { |
| | | width: 100vw; |
| | | height: 100vh; |
| | | display: flex; |
| | | background-image: url("../../assets/404_images/login-form-bg.png"); |
| | | background-size: 100% 100%; |
| | | } |
| | | |
| | | .left { |
| | | width: calc(100% - 500px); |
| | | height: 100%; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .left img { |
| | | width: 100%; |
| | | min-height: 100%; |
| | | } |
| | | |
| | | .right { |
| | | width: 600px; |
| | | overflow-y: auto; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .title_big { |
| | | color: #004EA2; |
| | | font-size: 40px; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .title_small { |
| | | color: #004EA2; |
| | | font-size: 24px; |
| | | } |
| | | |
| | | .elform { |
| | | margin-top: 50px; |
| | | } |
| | | |
| | | .sao { |
| | | font-size: 14px; |
| | | color: #004EA2; |
| | | width: 100%; |
| | | text-align: right; |
| | | } |
| | | </style> |
| | | |
| | | |
| | | <style> |
| | | .enter .el-form-item__label { |
| | | font-size: 20px; |
| | | color: #333; |
| | | line-height: 48px; |
| | | } |
| | | |
| | | .enter .el-form-item { |
| | | margin-bottom: 30px; |
| | | } |
| | | |
| | | .enter .el-input__inner { |
| | | height: 48px; |
| | | } |
| | | |
| | | .enter .el-button { |
| | | background-color: #1763EB; |
| | | color: #fff; |
| | | border: 0; |
| | | border-radius: 16px; |
| | | width: 100%; |
| | | height: 48px; |
| | | } |
| | | |
| | | .enter input::-webkit-input-placeholder, |
| | | .enter textarea::-webkit-input-placeholder { |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .enter input::-moz-placeholder, |
| | | .enter textarea::-moz-placeholder { |
| | | font-size: 10px; |
| | | } |
| | | |
| | | .enter input:-ms-input-placeholder, |
| | | .enter textarea:-ms-input-placeholder { |
| | | font-size: 10px; |
| | | } |
| | | |
| | | .enter input:-moz-placeholder, |
| | | .enter textarea:-moz-placeholder { |
| | | font-size: 10px; |
| | | } |
| | | .copyright{ |
| | | width: 100%; |
| | | position: relative; |
| | | top: 140px; |
| | | } |
| | | .copyright p{ |
| | | padding: 2px 0px; |
| | | font-size: 5px; |
| | | text-align: center; |
| | | color: lightgray; |
| | | } |
| | | .copyright >p:nth-child(3){ |
| | | text-decoration: underline; |
| | | } |
| | | .enter .el-form-item__label { |
| | | font-size: 20px; |
| | | color: #333; |
| | | line-height: 48px; |
| | | } |
| | | |
| | | .enter .el-form-item { |
| | | margin-bottom: 30px; |
| | | } |
| | | |
| | | .enter .el-input__inner { |
| | | height: 48px; |
| | | } |
| | | |
| | | .enter .el-button { |
| | | background-color: #1763EB; |
| | | color: #fff; |
| | | border: 0; |
| | | border-radius: 16px; |
| | | width: 100%; |
| | | height: 48px; |
| | | } |
| | | |
| | | .enter input::-webkit-input-placeholder, |
| | | .enter textarea::-webkit-input-placeholder { |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .enter input::-moz-placeholder, |
| | | .enter textarea::-moz-placeholder { |
| | | font-size: 10px; |
| | | } |
| | | |
| | | .enter input:-ms-input-placeholder, |
| | | .enter textarea:-ms-input-placeholder { |
| | | font-size: 10px; |
| | | } |
| | | |
| | | .enter input:-moz-placeholder, |
| | | .enter textarea:-moz-placeholder { |
| | | font-size: 10px; |
| | | } |
| | | .copyright{ |
| | | width: 100%; |
| | | position: relative; |
| | | top: 140px; |
| | | } |
| | | .copyright p{ |
| | | padding: 2px 0px; |
| | | font-size: 5px; |
| | | text-align: center; |
| | | color: lightgray; |
| | | } |
| | | .copyright >p:nth-child(3){ |
| | | text-decoration: underline; |
| | | } |
| | | </style> |
| | | |
| | | |
| | | <template> |
| | | <div class="enter"> |
| | | <div class="left"> |
| | |
| | | <el-form-item style="margin-bottom: 8px;"> |
| | | <el-col :span="12"><el-checkbox v-model="ruleForm.remumberme">记住密码</el-checkbox></el-col> |
| | | <el-col :span="12" style="text-align: right;"><el-checkbox |
| | | v-model="ruleForm.autoenter">自动登录</el-checkbox></el-col> |
| | | v-model="ruleForm.autoenter">自动登录</el-checkbox></el-col> |
| | | </el-form-item> |
| | | <el-form-item style="margin-bottom: 15px;"> |
| | | <el-button type="primary" @click="submitForm('ruleForm')" :loading="btnload">立即登录</el-button> |
| | |
| | | </el-form> |
| | | <div class="sao">微信扫码登录</div> |
| | | <div class="copyright"> |
| | | <p>江东金具设备有限公司</p> |
| | | <p>版权所有Copyright ©️ 2012-2021 ZTT.All Rights Reserved.</p> |
| | | <p>[苏ICP备10047815号-1]</p> |
| | | <!-- <p>有限公司</p> |
| | | <p>版权所有Copyright ©️ </p> |
| | | <p>[苏ICP备10047815号-1]</p> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | <script> |
| | | import { get } from "@/api/util/requestUtil.js" |
| | | export default { |
| | |
| | | var user = JSON.parse(localStorage.getItem('user')) |
| | | if (user != null && user != undefined) { |
| | | if (this.ruleForm.remumberme==true) { |
| | | this.ruleForm.username = user.username |
| | | this.ruleForm.password = user.password |
| | | this.ruleForm.username = user.username; |
| | | this.ruleForm.password = user.password; |
| | | } |
| | | if (this.ruleForm.autoenter==true) { |
| | | this.submitForm('ruleForm') |
| | | this.submitForm('ruleForm'); |
| | | } |
| | | } |
| | | }, |
| | |
| | | this.btnload = true |
| | | this.$refs[formName].validate((valid) => { |
| | | if (valid) { |
| | | this.$store.dispatch('user/login', this.ruleForm).then(async () => { |
| | | this.$store.dispatch('user/login', this.ruleForm).then(async (res) => { |
| | | let name = ""; |
| | | await get(this.$url.info).then(res => { |
| | | this.user = res.data; |
| | | name = res.data.name; |
| | | sessionStorage.setItem("user", JSON.stringify(res.data)); |
| | | sessionStorage.setItem("flushPage",0); |
| | | }) |
| | | localStorage.setItem('rememberme', this.ruleForm.remumberme); |
| | | localStorage.setItem('autoenter', this.ruleForm.autoenter); |
| | | if (this.ruleForm.remumberme==true||this.ruleForm.autoenter==true) { |
| | | localStorage.setItem("user", JSON.stringify({ |
| | | username: this.ruleForm.username, |
| | | password: this.ruleForm.password, |
| | | name: name, |
| | | })); |
| | | } |
| | | this.$message.success("登录成功") |
| | | this.btnload = false |
| | | this.$router.push({ path: this.redirect || '/' }) |
| | | this.loading = false |
| | | }).catch(() => { |
| | | this.loading = false |
| | | }).catch((error) => { |
| | | this.$message.error(error.message) |
| | | this.btnload = false |
| | | }) |
| | | } else { |
| | | this.btnload = false |
| | | this.$message.error('登录失败!') |
| | | this.$message.error('账号或密码未输入!') |
| | | return false; |
| | | } |
| | | }) |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | </script> |