| | |
| | | <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"> |
| | |
| | | <div class="title_big">欢迎您登录!</div> |
| | | <div class="title_small">装备电缆LIMS实验室管理系统</div> |
| | | <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="elform" :hide-required-asterisk="true"> |
| | | <el-form-item label="用户名" prop="username"> |
| | | <el-form-item label="账号" prop="username"> |
| | | <el-input v-model="ruleForm.username" placeholder="请输入账号" clearable></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="密码" prop="password"> |
| | |
| | | <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 { |
| | | data() { |
| | | return { |
| | | ruleForm: { |
| | | username: "", |
| | | password: "", |
| | | username: "admin", |
| | | password: "admin", |
| | | remumberme: false, |
| | | autoenter: false |
| | | }, |
| | |
| | | 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); |
| | | }) |
| | | 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) { |
| | |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | </script> |