202 lines
5.0 KiB
HTML
202 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<!-- 网站主语言 -->
|
|
<html lang="zh-cn">
|
|
|
|
<head>
|
|
<!-- 网站采用的字符编码 -->
|
|
<meta charset="utf-8">
|
|
<!-- 网站标题 -->
|
|
<title>登录</title>
|
|
<!-- 引入bootstrap的css文件 -->
|
|
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="../static/bootstrap/css/style.css">
|
|
<script src="../static/js/script.js" defer></script>
|
|
<!-- 引入vuejs -->
|
|
<script type="text/javascript" src="../static/js/vue-2.5.16.js"></script>
|
|
<script type="text/javascript" src="../static/js/axios-0.18.0.min.js"></script>
|
|
</head>
|
|
<style>
|
|
body{
|
|
{#background-image:url("../static/img/33.jpg") ;#}
|
|
{#background-size:1920px,900px;#}
|
|
|
|
}
|
|
.login{
|
|
|
|
|
|
|
|
}
|
|
.containe{
|
|
|
|
position: absolute;
|
|
left: 40%;
|
|
top: 20%;
|
|
width: 400px;
|
|
height: 400px;
|
|
box-shadow: 0 0 20px pink;
|
|
opacity: 0.5;
|
|
border: 6px solid ;
|
|
|
|
}
|
|
.form-group{overflow: hidden;
|
|
width: 300px;
|
|
position: relative;
|
|
font-weight: bold;
|
|
font-size: larger;
|
|
margin-left: 30px;
|
|
color: white;
|
|
|
|
}
|
|
#submit_login{
|
|
width: 70px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin-left: 144px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.custom-control-label{
|
|
position: relative;
|
|
margin-left: 130px;
|
|
font-weight: bold;
|
|
color: white;
|
|
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
|
|
}
|
|
|
|
span{
|
|
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: linear-gradient(to right,transparent, #03e9f4);
|
|
top: 0;
|
|
left: -100%;
|
|
animation: animate5 1s linear infinite;
|
|
|
|
}
|
|
.span1{
|
|
width: 4px;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 100%;
|
|
background: linear-gradient(to bottom,transparent, #03e9f4);
|
|
animation: animate4 1s linear infinite;
|
|
animation-delay: 0.25s;
|
|
}
|
|
.span2{
|
|
width: 4px;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background: linear-gradient(to top,transparent, #03e9f4);
|
|
animation: animate7 1s linear infinite;
|
|
animation-delay: 0.75s;
|
|
}
|
|
|
|
.span3{
|
|
width: 100%;
|
|
height: 4px;
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 100%;
|
|
background: linear-gradient(to left,transparent, #03e9f4);
|
|
animation: animate6 1s linear infinite;
|
|
animation-delay: 0.5s;
|
|
}
|
|
@keyframes animate4 {
|
|
0% {
|
|
top: -100%;
|
|
}
|
|
50%,100% {
|
|
top: 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes animate5 {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
50%,100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
@keyframes animate6 {
|
|
0% {
|
|
left: 100%;
|
|
}
|
|
50%,100% {
|
|
left: -100%;
|
|
}
|
|
}
|
|
|
|
@keyframes animate7 {
|
|
0% {
|
|
top: 100%;
|
|
}
|
|
50%,100% {
|
|
top: -100%;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<div id="app">
|
|
<body><div style="position: relative ;z-index: -1">
|
|
<canvas id="canvas" ></canvas></div>
|
|
|
|
<div class="containe" style="z-index: 9999 ;float: left" >
|
|
|
|
|
|
<form class="login" id="login_form" method="POST" >
|
|
{% csrf_token %}
|
|
|
|
<div class="form-group">
|
|
<label for="id_login">账号: </label>
|
|
<input type="text" name="mobile" placeholder="请输入手机号" autofocus="autofocus" required id="id_login" class="form-control" v-model="mobile" @blur="check_mobile"/>
|
|
<small class="form-text text-muted ml-1">还没有账号？<a href="{% url 'users:register' %}" style="color: white; ">注册新账号</a>
|
|
</small>
|
|
</div>
|
|
<div class="form-group mb-1">
|
|
<label for="id_password">密码:</label>
|
|
<input type="password" name="password" placeholder="请输入密码" required id="id_password" class="form-control" v-model="password" @blur="check_password"/>
|
|
<small class="form-text text-muted ml-1"><a class="secondaryAction layui-text" href="./forget_password.html" >忘记密码?</a>
|
|
</small>
|
|
</div><div class="custom-control custom-checkbox mb-2">
|
|
<input type="checkbox" name="remember" id="id_remember" checked class="custom-control-input" v-model="remembered"/>
|
|
<label for="id_remember" class="custom-control-label">保持登录</label>
|
|
</div>
|
|
<button class="primaryAction btn btn-primary" type="submit" id="submit_login" @click="on_submit">
|
|
<span></span>
|
|
<span class="span1"></span>
|
|
<span class="span2"></span>
|
|
<span class="span3"></span>
|
|
|
|
|
|
登录
|
|
|
|
|
|
|
|
|
|
|
|
</button>
|
|
</form>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<!-- 引入js -->
|
|
<script type="text/javascript" src="../static/js/host.js"></script>
|
|
<script type="text/javascript" src="../static/js/common.js"></script>
|
|
<script type="text/javascript" src="../static/js/login.js"></script>
|
|
</body>
|
|
|
|
</html> |