增加系统锁屏框

Bootstrap.Admin/Bootstrap.Admin.csproj

@@ -112,8 +112,10 @@
     <Content Include="Content\css\bootstrap.min.css" />
     <Content Include="Content\css\font-awesome.min.css" />
     <Content Include="Content\css\jquery.nestable.css" />
+    <Content Include="Content\css\lock.css" />
     <Content Include="Content\css\tasks.css" />
     <Content Include="Content\images\bg.jpg" />
+    <Content Include="Content\images\lock-bg.jpg" />
     <Content Include="Content\js\jquery.nestable.js" />
     <Content Include="Content\css\site-responsive.css" />
     <Content Include="Content\fonts\fontawesome-webfont.svg" />
@@ -162,6 +164,7 @@
     <Content Include="Scripts\Dicts.js" />
     <Content Include="Scripts\Groups.js" />
     <Content Include="Scripts\icon.js" />
+    <Content Include="Scripts\lock.js" />
     <Content Include="Scripts\Login.js" />
     <Content Include="Scripts\Logs.js" />
     <Content Include="Scripts\Menus.js" />
@@ -252,6 +255,7 @@
     <Content Include="Views\Shared\SubNavigation.cshtml" />
     <Content Include="Views\Shared\SubMenu.cshtml" />
     <Content Include="Views\Shared\SubMenuTree.cshtml" />
+    <Content Include="Views\Home\Lock.cshtml" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>

Bootstrap.Admin/Content/css/lock.css

@@ -0,0 +1,74 @@
+.lock-screen {
+    background: #02bac6 url("../../Content/images/lock-bg.jpg");
+    background-size: cover;
+    background-repeat: repeat;
+}
+
+.lock-wrapper {
+    margin: 10% auto;
+    max-width: 330px;
+}
+
+.lock-box {
+    background: rgba(255,255,255,.3);
+    padding: 20px;
+    border-radius: 10px;
+    -webkit-border-radius: 10px;
+    position: relative;
+}
+
+.lock-wrapper img {
+    border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border: 5px solid #fff;
+    width: 250px;
+    height: 250px;
+}
+
+.lock-wrapper h1 {
+    text-align: center;
+    color: #fff;
+    font-size: 18px;
+    text-transform: uppercase;
+    padding: 20px 0 0 0;
+}
+
+.lock-wrapper .locked {
+    margin-bottom: 20px;
+    display: inline-block;
+    color: #026f7a;
+}
+
+.btn-lock, .btn-lock:hover {
+    background: #02b5c2;
+    color: #fff;
+}
+
+.lock-input {
+    width: 83%;
+    border: none;
+    float: left;
+    margin-right: 3px;
+}
+
+#time {
+    width: 100%;
+    color: #fff;
+    font-size: 60px;
+    display: inline-block;
+    text-align: center;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 300;
+}
+
+.btn-lock, .btn-lock:hover {
+    background: #02b5c2;
+    color: #fff;
+}
+
+div.input-group span {
+    top: 0;
+    background: #02b5c2;
+    border-color: #02b5c2;
+    color: #fff;
+}

Bootstrap.Admin/Controllers/HomeController.cs

@@ -24,6 +24,15 @@ namespace Bootstrap.Admin.Controllers
         /// <summary>
         /// 
         /// </summary>
+        /// <returns></returns>
+        [AllowAnonymous]
+        public ActionResult Lock()
+        {
+            return View();
+        }
+        /// <summary>
+        /// 
+        /// </summary>
         /// <param name="userName"></param>
         /// <param name="password"></param>
         /// <param name="remember"></param>

Bootstrap.Admin/Scripts/lock.js

@@ -0,0 +1,24 @@
+$(function () {
+    $('body').addClass('lock-screen');
+
+    function startTime() {
+        var today = new Date();
+        var h = today.getHours();
+        var m = today.getMinutes();
+        var s = today.getSeconds();
+        // add a zero in front of numbers<10
+        m = checkTime(m);
+        s = checkTime(s);
+        document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
+        t = setTimeout(function () { startTime() }, 500);
+    }
+
+    function checkTime(i) {
+        if (i < 10) {
+            i = "0" + i;
+        }
+        return i;
+    }
+
+    startTime();
+});

Bootstrap.Admin/Views/Home/Lock.cshtml

@@ -0,0 +1,31 @@
+@{
+    ViewBag.Title = "系统登陆";
+    Layout = "~/Views/Shared/_Layout.cshtml";
+}
+@section css {
+    <link href="~/Content/css/lock.css" rel="stylesheet" />
+}
+@section javascript {
+    <script src="~/Scripts/lock.js"></script>
+}
+<div class="lock-wrapper">
+    <div id="time"></div>
+    <div class="lock-box text-center">
+        <img src="../../content/images/logo2.jpg" alt="lock avatar" />
+        <h1>Administrator</h1>
+        <span class="locked">系统已锁定</span>
+        <form role="form" class="form-inline">
+            <div class="form-group col-lg-12">
+                <div class="input-group">
+                    <span class="glyphicon glyphicon-lock input-group-addon"></span>
+                    <input type="password" name="password" class="form-control" value="" placeholder="密码" />
+                    <span class="input-group-btn">
+                        <button class="btn btn-lock" type="submit">
+                            <i class="glyphicon glyphicon-arrow-right"></i>
+                        </button>
+                    </span>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>