<%@ page import="com.njcn.utils.RSAUtil" %>
<%@ page import="com.njcn.utils.DesUtils" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>登录页面</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="/pqs9900/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/iconfont/iconfont.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        img {
            vertical-align: middle;
        }
        #loginModel {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            height: 440px;
        }

        .container .logo {
            text-align: center;
        }

        .container h3 {
            color: #676a6c;
            font-size: 14px;
            text-align: center;
        }

        .container .form-control {
            padding: 0 12px;
            height: 46px;
            line-height: 46px;
        }

        .container .form-control:focus {
            border: 2px solid #afacab;
            outline: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .container .subBtn {
            padding: 9px 35px 13px;
            border: 0;
            color: #fff;
            font-size: 20px;
            -webkit-transition: all 250ms cubic-bezier(0.1, .57, .1, 1);
            transition: all 250ms cubic-bezier(0.1, .57, .1, 1);
        }

        .container .subBtn:focus {
            background: #2e6da4;
            outline: none;
        }

        #systemInfo {
            text-align: center;
            height: 100px;
        }
        #picInfo{
            height: 300px;
            margin-right: -10px;
        }
        #loginInfo{
            height: 300px;
            /*margin-top: 32px;*/
            margin-left: -15px;
        }
        #systemPng {
            height: 295px;
            border-radius:10px;
            opacity: 0.6;
        }
        #bigTitle{
            font-family: 'SimSun', serif;
            font-size: 50px;
            color: #fff;
            margin-top: 20px;
        }
        #smallTitle{
            font-size: 26px;
            font-family: 'SimSun', serif;
            color: #fff;
        }
        #login{
            position: absolute;
            bottom: 5px;
        }
        #loginInfo .form-group{
            border-radius:5px;
        }
        #usernameDiv{
            margin-top: 45px;
        }

        #fd {
            align-content: center;
            text-align: center;
            font-size: 28px;
            color: red;

        }
        #dtk{
            left:0;
            right:0;
            top:50px;
            margin:auto;
            width: 1000px;/*浮动区域进行限制*/
            height: 100px;
            position: absolute;
        }

    </style>
</head>
<body class="bg-login">
<%--<div id="dtk">
    <div id="fd">
        <label>通告: </label><span> 由于机房将搬迁,网站预计于6月27至28日暂时关闭,给你带来不便敬请谅解!有新的消息将另行通知!</span>
    </div>
</div>--%>
<div id="canvus" class="width100 height100"></div>
<%--登录模块--%>
<section>
    <div class="container" style="z-index:9;" id="loginModel">
        <div class="row">
            <div class="col-md-12" id="systemInfo">
                <h1  id="bigTitle">电能质量监测系统</h1>
                <p id="smallTitle">Power Quality Monitoring System</p>
            </div>
            <div class="col-md-7 mt15" id="picInfo">
                <div class="logo"><img src="${ctx}/images/system.png" id="systemPng"/></div>
            </div>
            <div class="col-md-5 mt15" id="loginInfo">
                <div class="form-group" style="background-color:#FEF2F2;height:30px;line-height:30px;display:none"
                     id="errorD"><img src="${ctx}/images/error.png" style="margin:8px 7px 7px 14px;"><span style="margin-right:5px" id="errorS"></span></div>
                <div class="form-group has-feedback" id="usernameDiv">
                    <span class="icon iconfont icon-ren form-control-feedback loginicon"></span>
                    <input id="username" name="username" type="text" class="form-control" placeholder="请输入用户名"
                           required="required" style="padding-left:40px;color:#125ba6;">
                </div>

                <div class="form-group has-feedback">
                    <span class="icon iconfont icon-mima form-control-feedback loginicon"></span>
                    <input id="password" name="password" type="password" class="form-control" placeholder="请输入密码"
                           required="required" style="padding-left:40px;">
                </div>

                <div class="form-group">
                    <div class="form-group fl has-feedback" style="width:60%;">
                        <span class="icon iconfont icon-yanzhengma form-control-feedback loginicon"></span>
                        <input id="_checkcode" name="checkcode" type="text" class="form-control" placeholder="请输入验证码"
                               required="required" style="padding-left:40px;">
                    </div>
                    <div class="form-group fr " style="width:36%;" id="codeDiv">
                    </div>
                </div>
                <button class="btn btn-lg btn-primary btn-block subBtn themeBGColor" type="button" id="login">登录
                </button>
            </div>
        </div>
        <%-- 准备一个具有一定宽高的DOM元素，用于显示粒子特效 --%>
    </div>
    <input type="hidden" value="${item}" id="item">
</section>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/js/plugin/xss/security.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/xss/aes.js"></script>
<script src="${ctx}/js/particleground.all.js"></script>
<script src="${ctx}/js/ie10-viewport-bug-workaround.js"></script>
<script src="${ctx}/jspJS/crypto-js.js"></script>
<script src="${ctx}/jspJS/sm2.js"></script>
<script src="${ctx}/jspJS/sm3.js"></script>
<script src="${ctx}/jspJS/themeColor.js"></script>
<script src="${ctx}/jspJS/login.js"></script>
<script>
    var width = $(window).width();
    var height = $(window).height();
    var $loginMode = $("#loginModel").eq(0);
    $loginMode.css("width", width * 0.6)
    $loginMode.css("position", "absolute")
    $loginMode.css("top", (height-390) * 0.5)
    $loginMode.css("left", width * 0.2)
    var loginWidth=$("#usernameDiv").width();
    $("#login").css("width",loginWidth);
    $("#systemPng").css("width",width*0.5*0.583)



    /*window.onload = function () {
        var fd = document.getElementById("fd");
        var dtk = document.getElementById("dtk");
        var sttep=parseInt(document.defaultView.getComputedStyle(fd,null).top.slice(0,-2));
        var dtkstart = parseInt(document.defaultView.getComputedStyle(fd,null).bottom.slice(0,-2));
        var dtknum = parseInt(document.defaultView.getComputedStyle(dtk,null).bottom.slice(0,-2));
        setInterval(function () {
            var top = document.defaultView.getComputedStyle(fd,null).top;
            var num = parseInt(top.slice(0,-2));//果有个参数为负值,那么这里的范围为【0，stringValue.length+(-2));
            if(num>=(sttep+dtkstart-dtknum))
                fd.style.cssText = "top:"+((num-1)+"px")+";";
            else{
                fd.style.cssText = "bottom:"+((sttep-1)+"px")+";";
            }
        },50);
    }*/

</script>
</body>
</html>
