diff --git a/css/login.css b/css/login.css
index e69de29..9449b6e 100644
--- a/css/login.css
+++ b/css/login.css
@@ -0,0 +1,170 @@
+html,body{
+    height: 100%;
+    width: 100%;
+}
+body{
+    min-width: 580px;
+    overflow: scroll;
+}
+.login-model {
+    height: 100%;
+    min-height: 700px;
+    width: 100%;
+    overflow: scroll;
+    /*min-width: 814px;*/
+    background: url("../image/syslogin_bgIcon.png") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+}
+.top-tit{
+    padding-top: 102px;
+    height: 140px;
+    /*line-height: 62px;*/
+    text-align: center;
+    color: #fff;
+    font-size: 32px;
+}
+.float-left{
+    float: left;
+}
+.login-content{
+    height: 412px;
+    width: 580px;
+    margin: 100px auto 0;
+    background: #fff;
+    border-radius: 20px;
+}
+.posrel{
+    position: relative;
+}
+.posabl{
+    position: absolute;
+}
+.boxshadow {
+    box-shadow: 1px 3px 10px 6px rgba(50, 50, 50, 0.2);
+}
+.login-contop{
+    height: 100px;
+    width: 100px;
+    border-radius: 50%;
+    background-color: #fff;
+    top:-50px;
+    left: 50%;
+    margin-left: -50px;
+    background-image: url("../image/logo-loginGreen.png");
+    background-repeat: no-repeat;
+    background-position: 21px 24.5px;
+    background-size: 58px 51px;
+}
+.user-cont{
+    margin: 0 auto;
+    padding-top: 95px;
+    width: 332px;
+    height: 136px;
+    /*border: 1px solid #ddd;*/
+}
+.psw-cont{
+    margin: 0 auto;
+    width: 332px;
+    height: 40px;
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
+.cont-user,.cont-psw{
+    height: 42px;
+    line-height: 40px;
+    width: 332px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+.user-bg{
+    height: 40px;
+    width: 40px;
+    background-color: #ddd;
+    background-image: url("../image/login_usericon.png");
+    background-size: 19px 17px;
+    background-repeat: no-repeat;
+    background-position: 10px 11.5px;
+    float: left;
+}
+.psw-bg{
+    height: 40px;
+    width: 40px;
+    background-color: #ddd;
+    background-image: url("../image/login_pwsicon.png");
+    background-size: 16px 20px;
+    background-repeat: no-repeat;
+    background-position: 12px 10px;
+    float: left;
+}
+.login-control{
+    height: 40px;
+    line-height: 40px;
+    width: 290px;
+    outline: none;
+    border: none !important;
+    border-top-right-radius:4px;
+    border-bottom-right-radius:4px;
+    padding-left: 12px;
+}
+.ver-cont{
+    width: 222px;
+    height: 42px;
+    margin-left: 124px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+.ver-bg{
+    height: 40px;
+    width: 40px;
+    background-color: #ddd;
+    background-image: url("../image/login_vericon.png");
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    background-position: 12px 12px;
+    float: left;
+}
+.ver-control{
+    height: 40px;
+    line-height: 40px;
+    width: 180px;
+    outline: none;
+    border: none !important;
+    border-top-right-radius:4px;
+    border-bottom-right-radius:4px;
+    padding-left: 12px;
+}
+.imgWrap{
+    height: 42px;
+    width: 98px;
+    background: #ddd;
+    border-radius: 4px;
+    margin-left: 10px;
+}
+.imgWrap img {
+    width: 100%;
+    height: 100%;
+}
+.login_error_ifo{
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    color: #f00;
+    text-align: center;
+    margin-bottom: 8px;
+}
+.login-foot{
+    width: 100%;
+    height: 40px;
+}
+.login-foot .btn{
+    height: 40px;
+    width: 148px;
+    background: #26be96;
+    border-radius: 20px;
+    color: #fff;
+    font-size:18px;
+    margin: 0 auto;
+    display: block;
+}
\ No newline at end of file
diff --git a/image/login_pwsicon.png b/image/login_pwsicon.png
new file mode 100644
index 0000000..5507edf
--- /dev/null
+++ b/image/login_pwsicon.png
diff --git a/image/login_usericon.png b/image/login_usericon.png
new file mode 100644
index 0000000..cf0977b
--- /dev/null
+++ b/image/login_usericon.png
diff --git a/image/login_vericon.png b/image/login_vericon.png
new file mode 100644
index 0000000..eb129f1
--- /dev/null
+++ b/image/login_vericon.png
diff --git a/image/logo-loginGreen.png b/image/logo-loginGreen.png
new file mode 100644
index 0000000..078d87e
--- /dev/null
+++ b/image/logo-loginGreen.png
diff --git a/js/login.js b/js/login.js
index 0f2f32a..48e2c39 100644
--- a/js/login.js
+++ b/js/login.js
@@ -1,3 +1,224 @@
 /**
  * Created by chenbiao on 2017/11/20.
  */
+
+/**
+ *  输入框内容检测插件
+ */
+var $imageCodeValue = $('#login_imgCode_value');
+var $imageCode = $('#login_imgCode');
+var flagAjax = false;
+jQuery.fn.inputCheck = function(properties){
+    var defaults = {
+        callback:function(){}
+    }
+    jQuery.extend(defaults,properties);
+    var result = new Object(),realLength = 0, len = this.val().length, charCode = -1;
+    var regexp = {
+        china: /[\u4E00-\u9FA5]/, // 中文
+        decimal: /^\d+(\.\d+)?$/, // 小数
+        number: /^[0-9]*[1-9][0-9]*$/,
+        password:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/,
+        phone: /^1[3,5,7,8]\d{9}$/, // 手机号码
+        tel: /^0\d{2,3}-?\d{7,8}$/, // 电话号码
+        specialPhone: /^(10086|10000|10010)$/, //特殊的电话号码
+        businessPhone: /^(((400)-(\d{3})-(\d{4}))|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{3,7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/, //400的号码验证
+        email: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+
+        peopleId: /\d{17}[\d|x]|\d{15}/,
+        username: /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9_\u4E00-\u9FA5]{5,15}$/,
+        date: /^((((19|20)\d{2})-(0?(1|[3-9])|1[012])-(0?[1-9]|[12]\d|30))|(((19|20)\d{2})-(0?[13578]|1[02])-31)|(((19|20)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))-0?2-29))$/,
+        nbsp: /\s/ //判断空格
+    }
+
+    //计算输入框内容的长度，一个中文等于两个字符
+    for (var i = 0; i < len; i++) {
+        charCode = this.val().charCodeAt(i);
+        if (charCode >= 0 && charCode <= 128) realLength += 1;
+        else realLength += 2;
+    }
+
+    result.china = regexp.china.test(this.val())  ? true : false;
+    result.decimal = regexp.decimal.test(this.val())  ? true : false;
+    result.password = regexp.password.test(this.val())  ? true : false;
+    result.number = regexp.number.test(this.val())  ? true : false;
+    result.phone = regexp.phone.test(this.val()) || regexp.tel.test(this.val()) || regexp.specialPhone.test(this.val()) || regexp.businessPhone.test(this.val())  ? true : false;
+    result.email = regexp.email.test(this.val())  ? true : false;
+
+    result.nbsp = regexp.nbsp.test(this.val())  ? true : false;
+    result.peopleId = regexp.peopleId.test(this.val())  ? true : false;
+    result.username = regexp.username.test(this.val())  ? true : false;
+    result.date = regexp.date.test(this.val())  ? true : false;
+    result.length = realLength/2;
+    defaults.callback(result);
+};
+//邮箱验证
+function username(obj) {
+    var _this = obj;
+    _this.inputCheck({
+        callback : function(result){
+            if(!result.email){
+                _this.next().removeClass('display-hide');
+                flagAjax = false;
+            }else{
+                _this.next().addClass('display-hide');
+                flagAjax = true;
+            }
+        }
+    });
+}
+$('#userName').on("blur", function() { //验证邮箱地址
+    username($(this));
+});
+//密码验证
+function password(obj){
+    var _this = obj;
+    _this.inputCheck({
+        callback : function(result){
+            if(!result.password){
+                _this.next().removeClass('display-hide');
+                flagAjax = false;
+            }else{
+                _this.next().addClass('display-hide');
+                flagAjax = true;
+            }
+        }
+    });
+}
+$('#password').on("blur", function() { //验证邮箱地址
+    password($(this));
+});
+//验证码验证
+//function verification(obj) {
+//  var _this = obj;
+//  if(_this.val() !== '1234'){
+//      _this.prev().addClass('glyphicon glyphicon-remove');
+//      return false;
+//  }else{
+//      _this.prev().removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
+//  }
+//}
+//$('#login_imgCode_value').on("input blur", function() { //验证邮箱地址
+//  verification($(this));
+//});
+//点击登陆
+$('#login-btn').on('click',function () {
+    var obj1 = $('#userName');
+    var obj2 = $('#password');
+    username(obj1);
+    password(obj2);
+    //verification($('#login_imgCode_value'));
+    if(flagAjax){
+        var Username= $('#userName').val();
+        var Password= $('#password').val();
+        var imageCode = $imageCodeValue.val();
+        // alert("username is "+username+"password is"+password+"code is "+imageCode);
+
+
+        var opts = {};
+        opts.method = "POST";
+        opts.url = dataUrl.util.getLogin();
+        opts.success = loginSuccess;
+
+        var data = {};
+        data.clientType = sysComm.clientType;
+        data.sysCode = sysComm.sysCode;
+        data.grantType = sysComm.grantType;
+        data.username = Username;
+        data.password = Password;
+        data.imgCode = imageCode;
+        data.expiresIn = 60 * 60 * 12;//默认12小时
+        opts.data = JSON.stringify(data);
+        sysAjax(opts);
+
+    }
+
+    // window.location.href='index.html';
+});
+//回车事件
+$('#login_imgCode_value').keyup(function(event){
+    if(event.keyCode ==13){
+        // $('#login-btn').onClick()
+        $('#login-btn').trigger("click");
+    }
+});
+$('#login_imgCode_value').on('input',function () {
+    var val = $('#login_imgCode_value').val();
+    if(val){
+        $('.verification-logo').addClass('glyphicon glyphicon-remove');
+    }else{
+        $('.verification-logo').removeClass('glyphicon glyphicon-remove');
+    }
+
+});
+$('.verification-logo').on('click',function () {
+    $("#login_imgCode_value").val("");
+    $('.verification-logo').removeClass('glyphicon glyphicon-remove');
+});
+getImgCode();
+
+//点击换验证码
+$('#login_imgCode').on('click', function () {
+    getImgCode();
+});
+function getImgCode() {
+    var opt = {
+        method: "get",
+        url: dataUrl.util.getLoginImageCode(),
+        success: imgCodeSuccess
+    }
+    sysAjax(opt);
+}
+function imgCodeSuccess(res) {
+    if (res.code === '8888') {
+        var imageCodeStr = res.data.imageCodeStr;
+        var base64ImgStr = 'data:image/jpeg;base64,' + imageCodeStr;
+        fn.setToken(res.data.authTokenid);
+        $imageCode.attr('src', base64ImgStr);
+    }
+
+}
+//登录成功的函数
+function loginSuccess(res) {
+    if (res.code === '8888') {
+        // var data = JSON.parse(res.data);
+        fn.setToken(res.data.accessToken);
+        fn.setUserName(res.data.userName);
+        fn.setUserId(res.data.userId);
+        fn.setOpImgPath(res.data.imgPath);
+        /**将系统编码及名称放入session.*/
+        sessionStorage.setItem("sysCode", res.data.sysCode);
+        sessionStorage.setItem("sysName", res.data.sysName);
+        //alert("success");
+        fn.setUserAccount(res.data.userName);
+        window.location.href = "index.html";
+    } else if (res.code == "2000" || res.code === '1004') {
+        //账号密码不匹配
+        $('#login_error_ifo').text("账号密码不匹配");
+        //$error.text("账号或密码错误!");
+        getImgCode();
+    } else if (res.code == "2001") {
+        //账号无有效角色，非有效用户
+        $('#login_error_ifo').text("账号无效");
+        //$error.text("账号无有效角色，非有效用户!");
+        getImgCode();
+    } else if (res.code == "2002") {
+        //验证码错误
+        // $('.verification-logo').addClass('glyphicon glyphicon-remove');
+        $('#login_error_ifo').text("验证码错误");
+        //return false;
+        // $imageCodeValue.focus();
+        getImgCode();
+    } else if(res.code == "2010"){
+        $('#login_error_ifo').text("用户没有关联停车场");
+        getImgCode();
+    }
+    else {
+        console.log(res.code);
+        $('.verification-logo').removeClass('glyphicon glyphicon-remove').addClass('glyphicon glyphicon-ok');
+        $('#login_error_ifo').text("系统错误");
+        // $error.text(res.msg);
+        getImgCode();
+    }
+
+}
\ No newline at end of file
diff --git a/login.html b/login.html
index a1f88f2..cb58cef 100644
--- a/login.html
+++ b/login.html
@@ -6,21 +6,60 @@
     <meta name="renderer" content="ie-comp">
     <meta name="renderer" content="ie-stand">
     <meta name="google" content="notranslate" />
-    <title>首页</title>
+    <meta http-equiv="pragma" content="no-cache">
+    <meta http-equiv="cache-control" content="no-cache">
+    <meta http-equiv="expires" content="0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <title>登录</title>
     <link rel="stylesheet" href="css/libCss/common.css">
     <link rel="stylesheet" href="css/libCss/bootstrap.min.css">
     <link rel="stylesheet" href="css/login.css">
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head>
 </head>
 <body>
-<header>header</header>
-<nav>nav</nav>
-<section>header</section>
-
+<div class="login-model">
+<!-- top-tit -->
+    <div class="top-tit">欢迎登录企业云接口平台</div>
+<!-- content sta-->
+    <div class="login-content boxshadow posrel clearfix">
+        <div class="login-contop posabl"></div>
+        <!-- user -->
+        <div class="user-cont">
+            <div class="cont-user clearfix">
+                <span class="user-bg"></span>
+                <input class="login-control" type="text" autocomplete="off" placeholder="请输入用户名" name="username" id="userName" maxlength="25">
+            </div>
+        </div>
+        <!-- psw -->
+        <div class="psw-cont">
+            <div class="cont-psw clearfix">
+                <span class="psw-bg"></span>
+                <input class="login-control" type="text" autocomplete="off" placeholder="请输入6-20位字母和数字组成的密码" name="password" id="password" maxlength="25">
+            </div>
+        </div>
+        <!-- yanzhengma -->
+        <div class="clearfix">
+            <div class="ver-cont posrel float-left">
+                <i class="verification-logo"></i>
+                <span class="ver-bg float-left"></span>
+                <input class="ver-control verification-input float-left" type="text" autocomplete="off" placeholder="请输入验证码" name="" maxlength="4" id="login_imgCode_value">
+            </div>
+            <span class="imgWrap float-left">
+                    <img src="" id="login_imgCode">
+            </span>
+        </div>
+        <!--error -->
+        <div class="login_error_ifo"></div>
+        <!--btn login-->
+        <div class="login-foot">
+            <button type="button" class="btn uppercase" id="login-btn">登录</button>
+        </div>
+    </div>
+</div>
 <script type="text/javascript" src="js/libJs/jquery.min.js"></script>
 <script type="text/javascript" src="js/libJs/bootstrap.min.js"></script>
 <script type="text/javascript">
-    document.write("<s" + "cript type='text/javascript' src='../assets/pages/scripts/login.js?ver" + Math.random() + "'></s" + "cript>");
+    document.write("<s" + "cript type='text/javascript' src='js/login.js?ver" + Math.random() + "'></s" + "cript>");
 </script>
 </body>
 </html>
\ No newline at end of file