201 lines
4.3 KiB
Vue
201 lines
4.3 KiB
Vue
<script setup>
|
|
import { ref, reactive } from "vue"
|
|
import { useRouter } from "vue-router";
|
|
import { loginAPI } from "@/api/api.js"
|
|
const router = useRouter()
|
|
const show = ref(false)
|
|
const account = ref('')
|
|
const password = ref('')
|
|
const isAccount = ref(false)
|
|
const isPassword = ref(false)
|
|
|
|
const submit = () => {
|
|
|
|
if (!account.value) {
|
|
isAccount.value = true;
|
|
return
|
|
}
|
|
else isAccount.value = false;
|
|
if (!password.value) {
|
|
isPassword.value = true;
|
|
|
|
return
|
|
}
|
|
else isPassword.value = false;
|
|
|
|
|
|
loginAPI({
|
|
account: account.value,
|
|
password: password.value
|
|
}).then(res => {
|
|
console.log(res);
|
|
// localStorage.setItem("TOKEN", 15455465465465)
|
|
// router.replace('/')
|
|
})
|
|
return
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<dv-full-screen-container class="body">
|
|
<div class="login-box">
|
|
<div class="form">
|
|
<div class="content" style="padding-top: 2.5rem">
|
|
<div class="line-box">
|
|
<input
|
|
class="ipt"
|
|
type="text"
|
|
placeholder="请输入账号"
|
|
v-model="account"
|
|
/>
|
|
<div class="line">
|
|
<img
|
|
src="/src/assets/login_img/ZH.png"
|
|
alt=""
|
|
class="accont-icon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="tips">
|
|
<span v-show="isAccount">请输入账号</span>
|
|
</div>
|
|
<div class="line-box">
|
|
<input
|
|
class="ipt"
|
|
placeholder="请输入密码"
|
|
:type="show ? 'text' : 'password'"
|
|
v-model="password"
|
|
/>
|
|
<div class="line">
|
|
<img
|
|
src="/src/assets/login_img/MM.png"
|
|
alt=""
|
|
class="accont-icon"
|
|
style=""
|
|
/>
|
|
<img
|
|
src="/src/assets/login_img/KJ.png"
|
|
v-if="show"
|
|
alt=""
|
|
@click="show = false"
|
|
class="accont-icon"
|
|
/>
|
|
<img
|
|
src="/src/assets/login_img/BKH.png"
|
|
v-else
|
|
@click="show = true"
|
|
class="accont-icon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="tips">
|
|
<span v-show="isPassword">请输入密码</span>
|
|
</div>
|
|
<button class="btn" @click="submit">登录</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dv-full-screen-container>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.body {
|
|
background-image: url("/src/assets/img/bg.png");
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
background-color: rgba($color: #000000, $alpha: 0.8);
|
|
}
|
|
.login-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../../assets/login_img/bg.png);
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.form {
|
|
width: 30%;
|
|
height: 45%;
|
|
position: absolute;
|
|
top: 25%;
|
|
right: 10%;
|
|
box-sizing: border-box;
|
|
background: url(../../assets/login_img/DLBG.png);
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.content {
|
|
width: 60%;
|
|
height: 60%;
|
|
.ipt {
|
|
border: 1px solid #194fa3;
|
|
background-color: #123266;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0.5rem 2.5rem;
|
|
outline: none;
|
|
-webkit-user-select: auto;
|
|
caret-color: #fff;
|
|
color: white;
|
|
}
|
|
.line-box {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
.line {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 0.5rem;
|
|
box-sizing: border-box;
|
|
align-items: center;
|
|
}
|
|
input {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
|
|
input[type="password"]::-ms-reveal {
|
|
display: none;
|
|
}
|
|
|
|
.tips {
|
|
width: 100%;
|
|
height: 1.5rem;
|
|
margin-top: 0.3rem;
|
|
text-align: start;
|
|
color: red;
|
|
span {
|
|
margin-left: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
margin-top: 2rem;
|
|
background-color: #0040a1;
|
|
color: #fff;
|
|
border-radius: 0;
|
|
border: 0.1rem solid #2873ff;
|
|
}
|
|
|
|
.accont-icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
pointer-events: all !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|