|
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>
|
||||||