login.html 4.17 KB
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TPSHOP | 后台登陆</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.4 -->
    <link href="__PUBLIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="__PUBLIC__/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- iCheck -->
    <link href="__PUBLIC__/plugins/iCheck/square/blue.css" rel="stylesheet" type="text/css" />
    <style>#imgVerify{width: 120px;margin: 0 auto; text-align: center;display: block;}	</style>
  </head>
  <body class="login-page">
    <div class="login-box">
      <div class="login-logo">
        <a href="#"><b>TPshop</b></a>
      </div>
      <div class="login-box-body">
        <p class="login-box-msg">管理后台</p>
        <form action="{:U('User/login')}" method="post">
          <div class="form-group has-feedback">
            <input type="text" name="username" class="form-control" placeholder="账号" />
            <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="password" name="password" class="form-control" placeholder="密码" />
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
          	<opinioncontrol realtime="true" opinion_name="vertify_code" default="true">
                <div class="row" style="padding-right: 65px;">
                    <div class="col-xs-8">
                        <input style="width: 135px" type="text" name="vertify" class="form-control" placeholder="验证码"/>
                    </div>
                    <div class="col-xs-4">
                        <img id="imgVerify" src="{:U('User/vertify')}" onclick="fleshVerify();"/>
                    </div>
                </div>
            </opinioncontrol>
          </div>
          <div class="row">
            <div class="col-xs-8">
              <div class="checkbox icheck">
                <label><input type="checkbox"> 记住密码  </label>
              </div>
            </div><!-- /.col -->
            <div class="col-xs-4">
              <div class="checkbox icheck">
                <label><a href="#">找回密码</a></label>
              </div>
            </div><!-- /.col -->
          </div> 
          <div class="form-group">
          		<button type="submit" class="btn btn-primary btn-block btn-flat">立即登陆 </button>  
          </div>    
        </form>
      </div>
      
	    <div class="margin text-center">
	        <div class="copyright">
	            2014-{:date('Y')} &copy; <a href="http://www.99soubao.com/tpshop.html">TPSHOP v2.0.0</a>
	            <br/>
	            <a href="http://www.99soubao.com">深圳搜豹网络有限公司</a>出品
	        </div>
	    </div>
    </div><!-- /.login-box -->

    <!-- jQuery 2.1.4 -->
    <script src="__PUBLIC__/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="__PUBLIC__/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- iCheck -->
    <script src="__PUBLIC__/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
    <script>
      $(function () {
        $('input').iCheck({
          checkboxClass: 'icheckbox_square-blue',
          radioClass: 'iradio_square-blue',
          increaseArea: '20%' // optional
        });
      });
            
      function fleshVerify() {
          //重载验证码
          document.getElementById('imgVerify').src = '{:U("User/vertify")}';
      }
      ;
      jQuery.fn.center = function () {
          this.css("position", "absolute");
          this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
          $(window).scrollTop()) - 30 + "px");
          this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
          $(window).scrollLeft()) + "px");
          return this;
      }
    </script>

  </body>

</html>