|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="loginbox">
|
||||
<!-- <div class="left_card">
|
||||
<img style="height:100%;width:100%" src="../../static/icon/登录配图.png" alt="">
|
||||
</div> -->
|
||||
<form>
|
||||
<div class="contain">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<span class="title">用户名</span>
|
||||
|
||||
<el-input
|
||||
class="numkeyboard"
|
||||
size="medium"
|
||||
autocomplete=“off”
|
||||
v-model="username"
|
||||
type="text"
|
||||
placeholder="请输入用户名"
|
||||
></el-input>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; margin-top: 10px">
|
||||
<span class="title">密码</span>
|
||||
<el-input
|
||||
class="numkeyboard no-autofill-pwd"
|
||||
size="medium"
|
||||
auto-complete="new-password"
|
||||
v-model="password"
|
||||
placeholder="请输入密码"
|
||||
type="password"
|
||||
></el-input>
|
||||
</div>
|
||||
<el-row>
|
||||
<button @click="Login" class="Btlogin">登录</button>
|
||||
</el-row>
|
||||
</div>
|
||||
</form>
|
||||
<div class="footer">
|
||||
COPYRIGHT © 2022 杭州研一智控科技有限公司 版权所有
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userLogin } from "@/api/api";
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
data() {
|
||||
return {
|
||||
username:"请输入",
|
||||
password:"",
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.username=undefined
|
||||
console.log(this.username,'登录',this.password)
|
||||
},
|
||||
methods: {
|
||||
go(res) {
|
||||
switch (res) {
|
||||
case "home":
|
||||
this.$router.push("/home");
|
||||
break;
|
||||
}
|
||||
},
|
||||
Login() {
|
||||
console.log(this.username,'登录1',this.password)
|
||||
var that = this;
|
||||
if (that.username == "" || that.password == "") {
|
||||
that.$message({
|
||||
message: "请填写账号，密码",
|
||||
type: "warning",
|
||||
});
|
||||
} else {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: "登陆中...",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
userLogin({ user_name: this.username, password: this.password })
|
||||
.then((response) => {
|
||||
console.log(response.data);
|
||||
let data = response.data;
|
||||
if (data.status == 1) {
|
||||
that.$message.error(data.message);
|
||||
} else {
|
||||
if (data.data.is_enabled == 1) {
|
||||
sessionStorage.LoginUser = JSON.stringify(data.data);
|
||||
this.$emit("send_user", data.data);
|
||||
that.go("home");
|
||||
} else {
|
||||
that.$message.error("账户禁用");
|
||||
}
|
||||
}
|
||||
loading.close();
|
||||
})
|
||||
.catch((error) => {
|
||||
loading.close();
|
||||
that.$message.error(error.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
.no-autofill-pwd {
|
||||
/deep/ .el-input__inner {
|
||||
-webkit-text-security:disc!important;
|
||||
}
|
||||
}
|
||||
.loginbox {
|
||||
width: 1024px;
|
||||
height: 658px;
|
||||
box-shadow: 24px 24px 24px 1px rgba(14, 66, 210, 0.08);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
padding-top:128px;
|
||||
.contain {
|
||||
width:480px;
|
||||
margin:0 auto;
|
||||
// margin:128px auto 0;
|
||||
text-align: left;
|
||||
.title{
|
||||
font-size:28px;
|
||||
margin-bottom:15px;
|
||||
color:#666666;
|
||||
}
|
||||
.numkeyboard{
|
||||
width:480px;
|
||||
.el-input__inner{
|
||||
height:80px !important;
|
||||
}
|
||||
|
||||
}
|
||||
.Btlogin{
|
||||
width:480px;
|
||||
height: 100px;
|
||||
border:0;
|
||||
background: linear-gradient(180deg, #FF7B83 0%, #850006 100%);
|
||||
box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.4);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
opacity: 1;
|
||||
font-size: 40px;
|
||||
color: #FFFFFF;
|
||||
margin-top:50px;
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
margin:62px auto 0;
|
||||
width: 630px;
|
||||
height: 31px;
|
||||
font-size: 24px;
|
||||
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #C3C3C3;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.loginbox .el-input--medium .el-input__inner {
|
||||
width: 480px;
|
||||
height: 80px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: inset 0px 3px 6px 1px rgba(0,0,0,0.16);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
opacity: 1;
|
||||
border: 1px solid #DCDCDC;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #3A3A3A;
|
||||
}
|
||||
</style>
|
||||