233 lines
8.3 KiB
HTML
233 lines
8.3 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>安全生产管理系统</title>
|
||
<link rel="icon" href="/static/safesite/favicon.ico" type="image/x-icon" />
|
||
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
|
||
<meta name="author" content="Vincent Garreau" />
|
||
<meta name="viewport"
|
||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<link rel="stylesheet" media="screen" href="/static/safesite/mystatic/css/style.css">
|
||
<link rel="stylesheet" type="text/css" href="/static/safesite/mystatic/css/reset.css" />
|
||
<script type="text/javascript" src="/static/safesite/easyui/jquery.min.js"></script>
|
||
<style>
|
||
.login_qrcode {
|
||
display: none;
|
||
position: absolute;
|
||
top: 218px;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.login_qrcode .txt_scan {
|
||
color: #454545;
|
||
font-size: 16px;
|
||
left: 18px;
|
||
position: absolute;
|
||
top: 11px;
|
||
left: 25%;
|
||
}
|
||
|
||
.login_qrcode .login_close {
|
||
background: url("../images/login_close.png") no-repeat;
|
||
cursor: pointer;
|
||
height: 12px;
|
||
left: 216px;
|
||
position: absolute;
|
||
top: 15px;
|
||
width: 12px;
|
||
}
|
||
|
||
.login_qrcode .gzcode {
|
||
height: 200px;
|
||
left: 23px;
|
||
position: absolute;
|
||
top: 36px;
|
||
width: 200px;
|
||
}
|
||
|
||
.login_qrcode .gzcode2 {
|
||
height: 200px;
|
||
left: 223px;
|
||
position: absolute;
|
||
top: 36px;
|
||
width: 200px;
|
||
}
|
||
|
||
.login_qrcode p {
|
||
color: #454545;
|
||
font-size: 12px;
|
||
left: 21px;
|
||
line-height: 14px;
|
||
position: absolute;
|
||
top: 245px;
|
||
left: 25%;
|
||
}
|
||
|
||
.login_qrcode_container {
|
||
height: 297px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
width: 460px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.login_mask {
|
||
background: rgba(0, 0, 0, 0.4);
|
||
bottom: 0;
|
||
display: none;
|
||
left: 0;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.guanzhu {
|
||
background: url(/static/safesite/mystatic/images/wechat.png) no-repeat;
|
||
color: #1486c4;
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
padding-left: 40px;
|
||
padding-top: 10px;
|
||
text-decoration: none;
|
||
margin-left: 50px;
|
||
margin-top: 40px;
|
||
height: 50px;
|
||
}
|
||
|
||
.wchatClose {
|
||
background: url(/static/safesite/mystatic/images/login_close.png) no-repeat;
|
||
cursor: pointer;
|
||
height: 12px;
|
||
left: 436px;
|
||
position: absolute;
|
||
top: 15px;
|
||
width: 12px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="particles-js" style="margin-top: 0px;">
|
||
|
||
<div class="login" style="right:10%">
|
||
<div class="login-top">
|
||
企业安全生产管理系统
|
||
</div>
|
||
<form id="dlform" action="{% url 'login' %}" method="post">
|
||
{% csrf_token %}
|
||
<div class="login-center clearfix">
|
||
<div class="login-center-img"><img src="/static/safesite/mystatic/images/name.png" /></div>
|
||
<div class="login-center-input">
|
||
<input type="text" name="username" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''"
|
||
onblur="this.placeholder='请输入您的用户名'" />
|
||
<div class="login-center-input-text">用户名</div>
|
||
</div>
|
||
</div>
|
||
<div class="login-center clearfix">
|
||
<div class="login-center-img"><img src="/static/safesite/mystatic/images/password.png" /></div>
|
||
<div class="login-center-input">
|
||
<input type="password" name="password" value="" placeholder="请输入您的密码"
|
||
onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'" />
|
||
<div class="login-center-input-text">密码</div>
|
||
</div>
|
||
</div>
|
||
<p style="color:red;text-align: center">{{msg}}</p>
|
||
<div class="login-button">
|
||
登录
|
||
</div>
|
||
</form>
|
||
<div style="width: 100%;height: 100px;">
|
||
<a href="javascript:;" onclick="showWechatQRcode();" class="guanzhu" title="关注微信公众号">关注微信公众号---打开小程序</a>
|
||
</div>
|
||
<div class="sk-rotating-plane"></div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div class="login_qrcode" id="J_login_qrcode">
|
||
<div class="login_qrcode_container">
|
||
<span class="txt_scan">扫码关注微信公众号、小程序</span> <span onclick="hideWechatQRcode();" class="wchatClose"></span>
|
||
<img class='gzcode' src="/static/safesite/mystatic/images/weixin.jpg">
|
||
<img class="gzcode2" src="/static/safesite/mystatic/images/weixinmp.jpg">
|
||
<p>
|
||
请点开微信，扫码，关注公众号、小程序
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="login_mask" id="J_login_mask"></div>
|
||
<script src="/static/safesite/mystatic/js/particles.min.js"></script>
|
||
<script src="/static/safesite/mystatic/js/app.js"></script>
|
||
<script type="text/javascript">
|
||
document.onkeydown = function (e) {
|
||
if (!e) e = window.event;//考虑浏览器兼容性
|
||
if ((e.keyCode || e.which) == 13) {
|
||
document.querySelector(".login-button").click()
|
||
}
|
||
|
||
}
|
||
function showWechatQRcode() {
|
||
$("#J_login_qrcode").show();
|
||
$("#J_login_mask").show();
|
||
}
|
||
function hideWechatQRcode() {
|
||
$("#J_login_qrcode").hide();
|
||
$("#J_login_mask").hide();
|
||
}
|
||
function showHelpCon() {
|
||
$("#J_login_helpcon").show();
|
||
$("#J_login_mask").show();
|
||
}
|
||
function hideHelpCon() {
|
||
$("#J_login_helpcon").hide();
|
||
$("#J_login_mask").hide();
|
||
}
|
||
function hasClass(elem, cls) {
|
||
cls = cls || '';
|
||
if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
|
||
return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
|
||
}
|
||
|
||
function addClass(ele, cls) {
|
||
if (!hasClass(ele, cls)) {
|
||
ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
|
||
}
|
||
}
|
||
|
||
function removeClass(ele, cls) {
|
||
if (hasClass(ele, cls)) {
|
||
var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
|
||
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
|
||
newClass = newClass.replace(' ' + cls + ' ', ' ');
|
||
}
|
||
ele.className = newClass.replace(/^\s+|\s+$/g, '');
|
||
}
|
||
}
|
||
document.querySelector(".login-button").onclick = function () {
|
||
addClass(document.querySelector(".login"), "active")
|
||
setTimeout(function () {
|
||
addClass(document.querySelector(".sk-rotating-plane"), "active")
|
||
document.querySelector(".login").style.display = "none"
|
||
}, 800)
|
||
$("#dlform").submit();
|
||
// setTimeout(function(){
|
||
// removeClass(document.querySelector(".login"), "active")
|
||
// removeClass(document.querySelector(".sk-rotating-plane"), "active")
|
||
// document.querySelector(".login").style.display = "block"
|
||
// alert("登录成功")
|
||
// },5000)
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |