目录整理

VisualInspection/css/header.css

@@ -1,11 +1,18 @@
 html body {
     height: 100%;
     width: 100%;
+    background: white;
 }
 
 .header_font {
     color: white;
     font-size: 18px;
-    line-height: 60px;
+    line-height: 80px;
     padding-right: 10px
+}
+
+.navbar-left img {
+    height: 32px;
+    margin-top: 24px;
+    margin-right: 10px
 }

VisualInspection/css/user/login.css

@@ -0,0 +1,69 @@
+.col-md-4 {
+    text-align: center;
+}
+
+.panel {
+    margin-top: 150px;
+    padding: 20px;
+}
+
+.panel-heading {
+    text-align: left;
+    background-color: white !important;
+    border-color: white !important;
+}
+
+.panel-heading p {
+    font-size: 20px;
+}
+
+.input_login {
+    box-shadow: none;
+    border-top: none;
+    border-bottom-color: #f5f5f5;
+    border-bottom-width: 1px;
+    border-radius: 0px;
+    border-left: none;
+    border-right: none;
+    background: white;
+    font-size: 15px;
+    box-shadow: none !important;
+}
+
+i {
+    font-size: 35px;
+}
+
+.btn-primary:hover,
+.btn-primary.disabled,
+.btn-primary.disabled.active,
+.btn-primary.disabled:active,
+.btn-primary.disabled:focus,
+.btn-primary.disabled:hover,
+.btn-primary[disabled],
+.btn-primary[disabled].active,
+.btn-primary[disabled]:active,
+.btn-primary[disabled]:focus,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary,
+fieldset[disabled] .btn-primary.active,
+fieldset[disabled] .btn-primary:active,
+fieldset[disabled] .btn-primary:focus,
+fieldset[disabled] .btn-primary:hover {
+    background: #328dc7;
+}
+
+.login_btn {
+    background: #328dc7;
+    color: white;
+    border: none;
+    font-size: 18px;
+    box-shadow: none !important;
+}
+
+.main {
+    background-image: url("/images/bg.jpg");
+    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
+    -moz-background-size: 100% 100%;
+    background-size: 100% 100%;
+}

VisualInspection/js/user/login.js

@@ -1,13 +1,13 @@
 $(document).ready(function() {
 
-    settime();
-});
-
-function settime() {
-    $("#time_p").html(moment().format('YYYY-MM-DD  hh:mm:ss dddd'))
-    setTimeout(settime, 1000);
-
-    $("#main").css("min-height", window.innerHeight - 40)
-
-
-}
+    $('#loadingBtn').on('click', function() {
+        var $btn = $(this);
+        $btn.button('loading');
+
+        // 此处使用 setTimeout 来模拟你的复杂功能逻辑
+        setTimeout(function() {
+            $btn.button('reset');
+            window.location.href = "http://localhost:8080/view/main.html"
+        }, 2000);
+    });
+});

VisualInspection/view/common/commoncsslink.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" type="text/css" href="/node_modules/zui/dist/css/zui.min.css">
+<link rel="stylesheet" type="text/css" href="/css/header.css">
+<link rel="stylesheet" type="text/css" href="/css/foot.css">

VisualInspection/view/common/commonscriptlink.html

@@ -0,0 +1,17 @@
+<script src="/node_modules/zui/dist/lib/jquery/jquery.js"></script>
+<script src="/node_modules/zui/dist/js/zui.min.js"></script>
+<script src="/node_modules/axios/dist/axios.min.js"></script>
+<script src="/js/util/service.js"></script>
+
+<script type="text/javascript">
+    $(document).ready(function() {
+
+        settime();
+    });
+
+    function settime() {
+        $("#time_p").html(moment().format('YYYY-MM-DD  HH:mm:ss dddd'))
+        setTimeout(settime, 1000);
+        $("#main").css("min-height", window.innerHeight - 40)
+    }
+</script>

VisualInspection/view/common/foot.html

@@ -0,0 +1,3 @@
+<footer>
+    <p>技术支持：江苏省新通智能交通科技发展有限公司</p>
+</footer>

VisualInspection/view/common/head.html

@@ -1,7 +1,20 @@
-<link rel="stylesheet" type="text/css" href="/node_modules/zui/dist/css/zui.min.css">
+<div class="navbar-header navbar-inverse" style="width:100%">
+    <div class="container-fluid">
+        <ul class="nav navbar-nav navbar-left">
+            <li>
+                <img src="/images/logo.png" />
+            </li>
+            <li>
+                <p class="header_font">江苏沿海高速视频稽查考核管理系统</p>
+            </li>
+        </ul>
 
 
-<script src="/node_modules/zui/dist/lib/jquery/jquery.js"></script>
-<script src="/node_modules/zui/dist/js/zui.min.js"></script>
-<script src="/node_modules/axios/dist/axios.min.js"></script>
-<script src="/js/util/service.js"></script>
+
+        <ul class="nav navbar-nav navbar-right">
+            <li>
+                <p id="time_p" class="header_font"></p>
+            </li>
+        </ul>
+    </div>
+</div>

VisualInspection/view/login.html → VisualInspection/view/main.html

@@ -3,29 +3,27 @@
 
 <head>
     <meta charset="utf-8">
-    <title>登陆</title>
+    <title>登录</title>
 
     <link rel="stylesheet" type="text/css" href="/node_modules/zui/dist/css/zui.min.css">
     <link rel="stylesheet" type="text/css" href="/css/header.css">
     <link rel="stylesheet" type="text/css" href="/css/foot.css">
-
+    <link rel="stylesheet" type="text/css" href="/css/user/login.css">
 </head>
 
 <body>
 
-    <div class="navbar-header navbar-inverse" style="width:100%">
-        <div class="container-fluid">
 
-            <ul class="nav navbar-nav navbar-right">
-                <li>
-                    <p id="time_p" class="header_font">2017-05-09</p>
-                </li>
-            </ul>
-        </div>
-    </div>
 
-    <div id="main" class="container-fluid">
-        dsef
+    <div id="main" class="container-fluid main">
+        <div class="row">
+            <div class="col-md-4"></div>
+            <div class="col-md-4">
+
+
+            </div>
+            <div class="col-md-4"></div>
+        </div>
     </div>
 
 
@@ -34,7 +32,6 @@
         <p>技术支持：江苏省新通智能交通科技发展有限公司</p>
     </footer>
 
-
     <script src="/node_modules/zui/dist/lib/jquery/jquery.js"></script>
     <script src="/node_modules/zui/dist/js/zui.min.js"></script>
     <script src="/node_modules/moment/min/moment.min.js"></script>

VisualInspection/view/user/login.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>登录</title>
+    <link rel="import" href="/view/common/commoncsslink.html?__inline">
+    <link rel="stylesheet" type="text/css" href="/css/user/login.css">
+</head>
+
+<body>
+    <link rel="import" href="/view/common/head.html?__inline">
+
+    <div id="main" class="container-fluid main">
+        <div class="row">
+            <div class="col-md-4"></div>
+            <div class="col-md-4">
+                <div class="panel">
+                    <div class="panel-heading">
+                        <p>登录</p>
+                    </div>
+                    <div class="panel-body">
+                        <div class="row">
+                            <div class="input-group">
+                                <span class="input-group-addon fix-border input_login"><i class="icon icon-envelope icon-1x"></i></span>
+                                <input type="text" class="form-control input_login" placeholder="用户账号">
+                            </div>
+                        </div>
+                        <div class="row" style="margin-top:20px">
+                            <div class="input-group">
+                                <span class="input-group-addon fix-border input_login"><i class="icon icon-lock icon-1x"></i></span>
+                                <input type="password" class="form-control input_login" placeholder="密码">
+                            </div>
+                        </div>
+                        <div class="row" style="margin-top:20px">
+                            <button id="loadingBtn" type="button" class="btn btn-primary  btn-block login_btn" data-loading-text="正在登录...">登录</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4"></div>
+        </div>
+    </div>
+
+
+    <link rel="import" href="/view/common/foot.html?__inline">
+    <link rel="import" href="/view/common/commonscriptlink.html?__inline">
+    <script src="/node_modules/moment/min/moment.min.js"></script>
+    <script src="/node_modules/moment/locale/zh-cn.js"></script>
+    <script src="/js/user/login.js"></script>
+</body>
+
+
+</html>