update login

2025-04-05 17:38:01 +08:00 · 2017-12-24 10:25:01 +08:00 · 2017-12-24 10:25:01 +08:00 · 55667dbd7e
commit 55667dbd7e
parent b96a5630f9
19 changed files with 265 additions and 43 deletions
--- a/OpenAuth.Mvc/OpenAuth.Mvc.csproj
+++ b/OpenAuth.Mvc/OpenAuth.Mvc.csproj
@ -167,6 +167,21 @@
    <Compile Include="Properties\AssemblyInfo.cs" />
  </ItemGroup>
  <ItemGroup>
+    <Content Include="images\login\buttonbg.png" />
+    <Content Include="images\login\cloud.png" />
+    <Content Include="images\login\hand.png" />
+    <Content Include="images\login\left_hand.png" />
+    <Content Include="images\login\light.png" />
+    <Content Include="images\login\loginbg1.png" />
+    <Content Include="images\login\loginbg2.png" />
+    <Content Include="images\login\loginbg3.png" />
+    <Content Include="images\login\logininfo.png" />
+    <Content Include="images\login\loginpassword.png" />
+    <Content Include="images\login\loginsj.png" />
+    <Content Include="images\login\loginuser.png" />
+    <Content Include="images\login\logo.png" />
+    <Content Include="images\login\right_hand.png" />
+    <Content Include="images\login\tou.png" />
    <Content Include="js\categories.js" />
    <Content Include="js\assign.js" />
    <Content Include="js\forms.js" />
--- a/OpenAuth.Mvc/Views/Login/Index.cshtml
+++ b/OpenAuth.Mvc/Views/Login/Index.cshtml
@ -1,6 +1,7 @@
@{
    Layout = null;
 }
+
 <!DOCTYPE html>
 <html>
 <head>
@ -15,24 +16,58 @@
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/login.css" media="all" />
 </head>
-<body>
-    <div class="login">
-        <h1>Openauth.net-管理登录</h1>
-        <form class="layui-form">
-            <div class="layui-form-item">
-                <input class="layui-input" name="username" value="admin" placeholder="用户名" lay-verify="required" type="text" autocomplete="off">
-            </div>
-            <div class="layui-form-item">
-                <input class="layui-input" name="password" value="admin" placeholder="密码" lay-verify="required" type="password" autocomplete="off">
-            </div>
-            <div class="layui-form-item form_code">
-                <input class="layui-input" name="code" value="jgmrj" placeholder="验证码" lay-verify="required" type="text" autocomplete="off">
-                <div class="code"><img src="/images/code.jpg" width="116" height="36"></div>
-            </div>
-            <button class="layui-btn login_btn" lay-submit="" lay-filter="login">登录</button>
-        </form>
+<body class="main" style="background-position: -280.8px 0px;">
+
+    <div id="mainBody">
+        <div id="cloud1" class="cloud" style="background-position: 891.1px 100px;"></div>
+        <div id="cloud2" class="cloud" style="background-position: 401px 460px;"></div>
    </div>
-    <script type="text/javascript" src="/layui/layui.js"></script>
-    <script type="text/javascript" src="/js/login.js"></script>
+
+    <div class="logintop">
+        <span>OpenAuth.Net</span>
+        <ul>
+            <li><a href="http://www.firefox.com.cn/download/" target="_blank"><b><font color="#FFF">推荐Firefox浏览器</font></b></a></li>
+        </ul>
+    </div>
+
+    <div class="loginbody">
+
+        <span class="systemlogo"></span>
+
+        <div class="loginbox" style="position: absolute; left: 294px;">
+            <div style="width:165px; height:96px; position:absolute;top:8px;left:-70px">
+                <div class="tou"></div>
+                <div class="initial_left_hand" id="left_hand"></div>
+                <div class="initial_right_hand" id="right_hand"></div>
+            </div>
+            <form class="layui-form">
+                <ul>
+                    <li>
+                        <input name="username" type="text" class="loginuser" value="admin"
+                               placeholder="请输入用户名/手机号码" lay-verify="required">
+                    </li>
+                    <li>
+                        <input name="password" type="password" id="password" value="admin"
+                               class="loginpwd ipt" placeholder="请输入密码" lay-verify="required">
+                    </li>
+                    <li>
+                        <button class="layui-btn loginbtn" lay-submit  lay-filter="login">登录</button>
+
+                        @*<label>
+                                <input name="" type="checkbox" value="" checked="checked">记住密码
+                            </label>
+                            <label>
+                                <a href="#">忘记密码？</a>
+                            </label>*@
+                    </li>
+                </ul>
+            </form>
+        </div>
+
+    </div>
+
+    <div class="loginbm">版权所有 2017  李玉宝 </div>
+<script type="text/javascript" src="/layui/layui.js"></script>
+<script type="text/javascript" src="/js/login.js"></script>
 </body>
 </html>
--- a/OpenAuth.Mvc/css/login.css
+++ b/OpenAuth.Mvc/css/login.css
@ -1,9 +1,92 @@
-body{overflow:hidden;}
+/* CSS Document */
+*{font-size:9pt;border:0;margin:0;padding:0;}
+body{font-family:'΢<><CEA2><EFBFBD>ź<EFBFBD>'; margin:0 auto;min-width:980px;}
+ul{display:block;margin:0;padding:0;list-style:none;}
+li{display:block;margin:0;padding:0;list-style: none;}
+imgs{border:0;}
+dl,dt,dd,span{margin:0;padding:0;display:block;}
+a,a:focus{text-decoration:none;color:#000;outline:none;blr:expression(this.onFocus=this.blur());}
+a:hover{color:#00a4ac;text-decoration:none;}
+table{border-collapse:collapse;border-spacing: 0;}
+cite{font-style:normal;}
+h2{font-weight:normal;}

-.video-player{background-color: transparent;display: block;position: absolute;z-index: 1;top:0;}
-.video_mask{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:90; background-color:rgba(0,0,0,0.5); }
-.login{ height:260px;width:260px;padding: 20px;background-color:rgba(0,0,0,0.5);border-radius: 4px;position:absolute;left: 50%;top: 50%; margin:-150px 0 0 -150px;z-index:99;}
-.login h1{ text-align:center; color:#fff; font-size:24px; margin-bottom:20px; }
-.form_code{ position:relative; }
-.form_code .code{ position:absolute; right:0; top:1px; cursor:pointer; }
-.login_btn{ width:100%; }
+/*cloud*/
+#mainBody {width:100%;height:100%;position:absolute;z-index:-1;}
+.cloud {position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(/images/login/cloud.png) no-repeat;z-index:1;opacity:0.5;}
+#cloud2 {z-index:2;}
+
+
+/*login*/
+.logintop{height:47px; position:absolute; top:0; background:url(/images/login/loginbg1.png) repeat-x;z-index:100; width:100%;}
+.logintop span{color:#fff; line-height:47px; background:url(/images/login/loginsj.png) no-repeat 21px 18px; text-indent:44px; color:#afc5d2; float:left;}
+.logintop ul{float:right; padding-right:30px;}
+.logintop ul li{float:left; margin-left:20px; line-height:47px;}
+.logintop ul li a{color:#afc5d2;}
+.logintop ul li a:hover{color:#fff;}
+.loginbody{background:url(/images/login/loginbg3.png) no-repeat center center; width:100%; height:585px; overflow:hidden; position:absolute; top:47px;}
+.systemlogo{background:url(/images/login/logo.png) no-repeat center;width:100%; height:70px; margin-top:40px;}
+.loginbox{width:692px; height:336px; background:url(/images/login/logininfo.png) no-repeat; margin-top:30px;}
+.loginbox ul{margin-top:88px; margin-left:285px;}
+.loginbox ul li{margin-bottom:25px;}
+.loginbox ul li label{color:#687f92; padding-left:25px;}
+.loginbox ul li label a{color:#687f92;}
+.loginbox ul li label a:hover{color:#3d96c9;}
+.loginbox ul li label input{margin-right:5px;}
+.loginuser{width:299px; height:48px; background:url(/images/login/loginuser.png) no-repeat; border:none; line-height:48px; padding-left:44px; font-size:14px; font-weight:bold; color:#90a2bc;}
+.loginpwd{width:299px; height:48px; background:url(/images/login/loginpassword.png) no-repeat; border:none;line-height:48px; padding-left:44px; font-size:14px; color:#90a2bc;}
+.loginbtn{width:111px;height:35px; background:url(/images/login/buttonbg.png) repeat-x; font-size:14px; font-weight:bold; color:#fff;cursor:pointer;line-height:35px;}
+.loginbm{height:50px; line-height:50px; text-align:center; background:url(/images/login/loginbg2.png) repeat-x;position:fixed;_position:absolute;*position:absolute;bottom:0;width:100%; color:#0b3a58;}
+.loginbm a{font-weight:bold;color:#0b3a58;}
+.loginbm a:hover{color:#fff;}
+
+.main {background-color:#1c77ac; background-image:url(/images/login/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;}
+.logintop span{
+    font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;color:#DDD;font-size: 12px;
+}
+.ipt:focus{
+    border-color: #66afe9;
+    outline: 0;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
+}
+.tou{
+    background: url("/images/login/tou.png") no-repeat;
+    width: 97px;
+    height: 92px;
+    position: absolute;
+    top: -87px;
+    left: 140px;
+}
+.left_hand{
+    background: url("/images/login/left_hand.png") no-repeat;
+    width: 32px;
+    height: 37px;
+    position: absolute;
+    top: -38px;
+    left: 150px;
+}
+.right_hand{
+    background: url("/images/login/right_hand.png") no-repeat;
+    width: 32px;
+    height: 37px;
+    position: absolute;
+    top: -38px;
+    right: -64px;
+}
+.initial_left_hand{
+    background: url("/images/login/hand.png") no-repeat;
+    width: 30px;
+    height: 20px;
+    position: absolute;
+    top: -12px;
+    left: 100px;
+}
+.initial_right_hand{
+    background: url("/images/login/hand.png") no-repeat;
+    width: 30px;
+    height: 20px;
+    position: absolute;
+    top: -12px;
+    right: -112px;
+}
--- a/OpenAuth.Mvc/images/login/buttonbg.png
+++ b/OpenAuth.Mvc/images/login/buttonbg.png
--- a/OpenAuth.Mvc/images/login/cloud.png
+++ b/OpenAuth.Mvc/images/login/cloud.png
--- a/OpenAuth.Mvc/images/login/hand.png
+++ b/OpenAuth.Mvc/images/login/hand.png
--- a/OpenAuth.Mvc/images/login/left_hand.png
+++ b/OpenAuth.Mvc/images/login/left_hand.png
--- a/OpenAuth.Mvc/images/login/light.png
+++ b/OpenAuth.Mvc/images/login/light.png
--- a/OpenAuth.Mvc/images/login/loginbg1.png
+++ b/OpenAuth.Mvc/images/login/loginbg1.png
--- a/OpenAuth.Mvc/images/login/loginbg2.png
+++ b/OpenAuth.Mvc/images/login/loginbg2.png
--- a/OpenAuth.Mvc/images/login/loginbg3.png
+++ b/OpenAuth.Mvc/images/login/loginbg3.png
--- a/OpenAuth.Mvc/images/login/logininfo.png
+++ b/OpenAuth.Mvc/images/login/logininfo.png
--- a/OpenAuth.Mvc/images/login/loginpassword.png
+++ b/OpenAuth.Mvc/images/login/loginpassword.png
--- a/OpenAuth.Mvc/images/login/loginsj.png
+++ b/OpenAuth.Mvc/images/login/loginsj.png
@ -0,0 +1,9 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
+<html><head>
+<title>404 Not Found</title>
+</head><body>
+<h1>Not Found</h1>
+<p>The requested URL /esc/img/login/loginsj.png was not found on this server.</p>
+<p>Additionally, a 404 Not Found
+error was encountered while trying to use an ErrorDocument to handle the request.</p>
+</body></html>
--- a/OpenAuth.Mvc/images/login/loginuser.png
+++ b/OpenAuth.Mvc/images/login/loginuser.png
--- a/OpenAuth.Mvc/images/login/logo.png
+++ b/OpenAuth.Mvc/images/login/logo.png
@ -0,0 +1,9 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
+<html><head>
+<title>404 Not Found</title>
+</head><body>
+<h1>Not Found</h1>
+<p>The requested URL /esc/img/login/logo.png was not found on this server.</p>
+<p>Additionally, a 404 Not Found
+error was encountered while trying to use an ErrorDocument to handle the request.</p>
+</body></html>
--- a/OpenAuth.Mvc/images/login/right_hand.png
+++ b/OpenAuth.Mvc/images/login/right_hand.png
--- a/OpenAuth.Mvc/images/login/tou.png
+++ b/OpenAuth.Mvc/images/login/tou.png
--- a/OpenAuth.Mvc/js/login.js
+++ b/OpenAuth.Mvc/js/login.js
@ -1,21 +1,92 @@
 layui.config({
-	base : "/js/"
-}).use(['form','layer'],function(){
-	var form = layui.form,
+    base: "/js/"
+}).use(['form', 'layer'], function () {
+    var form = layui.form,
 		layer = parent.layer === undefined ? layui.layer : parent.layer,
 		$ = layui.jquery;
-	//video背景
-	$(window).resize(function(){
-		if($(".video-player").width() > $(window).width()){
-			$(".video-player").css({"height":$(window).height(),"width":"auto","left":-($(".video-player").width()-$(window).width())/2});
-		}else{
-			$(".video-player").css({"width":$(window).width(),"height":"auto","left":-($(".video-player").width()-$(window).width())/2});
-		}
-	}).resize();
-	
-	//登录按钮事件
-	form.on("submit(login)",function(data){
-	    window.location.href = "/Login/LoginByDev";
-		return false;
-	})
+
+    // Cloud Float...
+    var $main = $cloud = mainwidth = null;
+    var offset1 = 450;
+    var offset2 = 0;
+    var offsetbg = 0;
+
+    $(document).ready(
+        function () {
+            $main = $("#mainBody");
+            $body = $("body");
+            $cloud1 = $("#cloud1");
+            $cloud2 = $("#cloud2");
+
+            mainwidth = $main.outerWidth();
+
+        }
+    );
+
+    setInterval(function flutter() {
+        if (offset1 >= mainwidth) {
+            offset1 = -580;
+        }
+
+        if (offset2 >= mainwidth) {
+            offset2 = -580;
+        }
+
+        offset1 += 1.1;
+        offset2 += 1;
+        $cloud1.css("background-position", offset1 + "px 100px")
+
+        $cloud2.css("background-position", offset2 + "px 460px")
+    }, 70);
+    setInterval(function bg() {
+        if (offsetbg >= mainwidth) {
+            offsetbg = -580;
+        }
+
+        offsetbg += 0.9;
+        $body.css("background-position", -offsetbg + "px 0")
+    }, 90);
+    $(function () {
+        //得到焦点
+        $("#password").focus(function () {
+            $("#left_hand").animate({
+                left: "150",
+                top: " -38"
+            }, {
+                step: function () {
+                    if (parseInt($("#left_hand").css("left")) > 140) {
+                        $("#left_hand").attr("class", "left_hand");
+                    }
+                }
+            }, 2000);
+            $("#right_hand").animate({
+                right: "-64",
+                top: "-38px"
+            }, {
+                step: function () {
+                    if (parseInt($("#right_hand").css("right")) > -70) {
+                        $("#right_hand").attr("class", "right_hand");
+                    }
+                }
+            }, 2000);
+        });
+        //失去焦点
+        $("#password").blur(function () {
+            $("#left_hand").attr("class", "initial_left_hand");
+            $("#left_hand").attr("style", "left:100px;top:-12px;");
+            $("#right_hand").attr("class", "initial_right_hand");
+            $("#right_hand").attr("style", "right:-112px;top:-12px");
+        });
+
+        $('.loginbox').css({ 'position': 'absolute', 'left': ($(window).width() - 692) / 2 });
+        $(window).resize(function () {
+            $('.loginbox').css({ 'position': 'absolute', 'left': ($(window).width() - 692) / 2 });
+        })
+    });
+
+    //登录按钮事件
+    form.on("submit(login)", function (data) {
+        window.location.href = "/Login/LoginByDev";
+        return false;
+    })
 })