u249747
/
CCL


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
							<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>登录</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        html{font-size:10px}
        html,body{
            height: 100%;
            overflow: hidden;
        }
        .flex-wrap{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }
        .flex-con{
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }
        body{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            flex-flow: column;
        }
        header{
            height: 4rem;
            line-height: 4rem;
            background-color: #252736;
        }
        header h2{
            width: 100%;
            height: 100%;
            font-size: 1.8rem;
            color: #fff;
            font-weight: lighter;
            text-align: center;
            position: relative;
        }
        header i{
            display: inline-block;
            width: 4.3rem;
            height: 4.3rem;
            background: url("../img/index/backBtn.png") no-repeat 30%/60%;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        header a{
            display: inline-block;
            font-size: 1.2rem;
            color: #fff;
            position: absolute;
            right: 1.2rem;
            top: 0;
        }
        main{
            height: calc(100% - 4rem);
            padding-top: 2.5rem;
            background: url("../img/login/logoBg.jpg") round;
        }
        .banner{
            width: 10rem;
            height: 12rem;
            margin: 0 auto 4rem;
        }
        .banner img{
            display: block;
            width: 100%;
            height: 100%;
        }
        .inputDiv{
            padding: 0 1.4rem;
        }
        .inputDiv form{
            background-color: #fff;
            border-radius: .5rem;
            overflow: hidden;
        }
        .inputDiv label{
            display: block;
            height: 4.2rem;
            border: 1px solid #dfdfdf;
            padding-left: 1rem;
        }
        .inputDiv label:nth-of-type(1){
            border-bottom: none;
            border-top-left-radius: .3rem;
            border-top-right-radius: .3rem;
        }
        .inputDiv label:nth-of-type(2){
            border-bottom-left-radius: .3rem;
            border-bottom-right-radius: .3rem;
        }
        label>input{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0);
            border: none;
            outline: none;
            font-size: 1.3rem;
            padding-left: 2.3rem;
        }
        .userName{
            background: url("../img/login/un.png") no-repeat 4%/5%;
        }
        .password{
            background: url("../img/login/pw.png") no-repeat 4%/5%;
        }
        .loginBtn{
            width: 100%;
            height: 3.5rem;
            line-height: 3.5rem;
            text-align: center;
            font-size: 1.5rem;
            color: #fff;
            background: url("../img/login/loginBtnBg.png") round;
            background-size: 100%;
            margin: 1.5rem 0;
        }
        .other{
            padding: 0 1.4rem;
            font-size: 1.2rem;
        }
        ::-webkit-input-placeholder{
            color: #b4b4b4;
        }
        .remindImg{
            width: 100%;
            height: 4.5rem;
            background: url("../img/login/remind.png") round;
            background-size: 100%;
            margin-top: .3rem;
        }
        .remindDiv{
            height: 3rem;
            line-height: 3rem;
            text-align: center;
            font-size: 1.2rem;
            color: #fff;
            padding: 0 1rem;
            border-radius: 2rem;
            background-color: rgba(0,0,0,0.7);
            position: fixed;
            bottom: 20%;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            opacity: 0;
            -webkit-transition: .5s;
            transition: .5s;
            z-index: -99;
        }
        .remindDiv.active{
            opacity: 1;
            z-index: 99;
        }
        @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
        @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
        @media screen and (min-width:415px) and (max-width:639px){html{font-size:13px}}
        @media screen and (min-width:640px) and (max-width:719px){html{font-size:18px}}
        @media screen and (min-width:720px) and (max-width:749px){html{font-size:19px}}
        @media screen and (min-width:750px) and (max-width:799px){html{font-size:20px}}
        @media screen and (min-width:800px){html{font-size:25px}}
    </style>
</head>
<body>
<header>
    <h2><i id="backBtn" onclick="toBack()"></i>登录<a href="./register.html">注册</a></h2>
</header>
<main class="flex-con">
    <div class="banner">
        <img src="../img/login/LOGO.png" alt="">
    </div>
    <div class="inputDiv">
        <form action="#">
            <label class="userName"><input type="tel" id="username" value="" placeholder="请输入账号/手机号"></label>
            <label class="password"><input type="password" value="" id="password" placeholder="请输入密码"></label>
        </form>
        <button class="loginBtn">登录</button>
    </div>
    <div class="other clearFix">
        <a href="./findPW.html" class="right">忘记密码？</a>
    </div>
    <div class="remindImg"></div>
    <div class="remindDiv"></div>
</main>
<script src="../js/modules.js"></script>
<script src="../js/publicData.js"></script>
<script>
    window.onload=function () {
        var oLoginBtn=document.getElementsByClassName("loginBtn")[0],
                remindDiv=document.getElementsByClassName("remindDiv")[0];
        var oValue={},remindTi,oRemindTime;
        oLoginBtn.onclick=function () {
            var username=document.getElementById("username").value,
                    password=document.getElementById("password").value;
            oValue.username=username;
            oValue.password=password;
            Ajax("post",pageUrl+"/Api/Index/login",oValue,function (data) {
                if(data.status==200){
//                    sessionStorage.setItem("userData",JSON.stringify(data.data));
                    location.href="../index.html";
                }else {
                    remindMes(data.message)
                }
            })
        }
        function remindMes(val) {
            if(oRemindTime) clearTimeout(oRemindTime);
            remindDiv.innerText=val;
            addCls(remindDiv,'active');
            oRemindTime=setTimeout(function () {
                removeCls(remindDiv,'active');
                oRemindTime=undefined;
            },2000)
        }
    }

    function toBack() {
        window.history.back();
    }
</script>
</body>
</html>