muzi
/
macUI
mirror of https://github.com/1099438829/macUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

登录页优化

This commit is contained in:
muzi 2019-03-25 17:49:13 +08:00
parent 16150c9d79
commit b351f314c1
20 changed files with 74 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
css/login.css
View File

@ -1,64 +1,25 @@
@charset "utf-8"; .cm-tab-wrap-hack::after { content: ""; }
/* CSS Document */ .com-user { position: fixed; display: flex; justify-content: center; align-items: center; background: rgb(255, 255, 255) none repeat scroll 0% 0%; }
.com-user, .com-user::after { top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 1000; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, img, dl, dt, dd, table, th, td, blockquote, fieldset, div, strong, label, em{margin:0; padding:0; border:0;} .com-user::after { position: absolute; content: ""; background: rgba(0, 0, 0, 0) url('../img/wallpapers/main.jpg') no-repeat scroll 0% 0% / cover ; margin: -50px; filter: blur(20px); opacity: 0.8; }
ul, ol, li{list-style:none;} .com-user .login-box { width: 200px; }
input, button{margin:0; font-size:12px; vertical-align:middle;} .com-user .login-box img { width: 50px; height: 50px; border-radius: 50%; margin-bottom: 10px; }
body{font:12px '宋体' arial, Helvetica, sans-serif; margin:0; color:#6d6e71;} .com-user .login-box .login { position: absolute; padding: 0px; right: -50px; top: 90px; border-radius: 15px; border: medium none; background: rgba(255, 255, 255, 0.3) none repeat scroll 0% 0%; width: 30px; color: rgb(255, 255, 255); font-size: 18px; outline: medium none; height: 30px; cursor: pointer; }
table{border-collapse:collapse; border-spacing:0;} .com-user .login-box .login:active { background: rgba(255, 255, 255, 0.4) none repeat scroll 0% 0%; }
.com-user .box { z-index: 1001; display: flex; flex-direction: column; position: relative; justify-content: center; align-items: center; }
a{text-decoration:none;} .com-user .third img { width: 32px; height: 32px; cursor: pointer; margin: 10px; }
a:hover{text-decoration:none;} .com-user input { width: 150px; background: rgba(255, 255, 255, 0.3) none repeat scroll 0% 0%; border: medium none rgba(0, 0, 0, 0.3); border-radius: 5px; height: 25px; margin: 10px 0px; outline: medium none; color: rgb(255, 255, 255); text-align: center; }
.cl{height:0; font-size:1px; clear:both; line-height:0;} .com-user .cancel { position: absolute; z-index: 1001; bottom: 150px; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; border: medium none; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; outline: medium none; cursor: pointer; }
.none{display:none} .com-user .cancel img { opacity: 0.8; }
.bbg{background:#ccc} .com-user .cancel span { color: rgb(255, 255, 255); font-size: 12px; margin-top: 10px; }
*:focus{outline:none} body, html { margin: 0px; padding: 0px; font-family: sans-serif; height: 100%; width: 100%; overflow: hidden; }
i,em{font-style:normal;} button { -moz-user-select: none; cursor: default; background-color: rgb(255, 255, 255); outline: medium none; border-width: 1px; border-style: solid; border-radius: 5px; border-color: rgb(200, 200, 200) rgb(194, 194, 194) rgb(172, 172, 172); box-shadow: 0px 1px rgba(0, 0, 0, 0.04); padding: 0px 13px; line-height: 19px; font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif; font-size: 13px; }
.marg{margin:0 auto; width:1000px} button:active { border-color: rgb(36, 127, 255) rgb(18, 94, 237) rgb(0, 61, 219); background-image: -webkit-linear-gradient(top, rgb(76, 152, 254), rgb(5, 100, 227)); color: rgba(255, 255, 255, 0.9); }
.mar_top10{ margin-top:10px} * { box-sizing: border-box; }
.bg_fff{background:#fff} #root, .layout-desktop { height: 100%; width: 100%; }
.bor{border:1px solid #d6bee0} .layout-desktop { background-image: url('../img/wallpapers/main.jpg'); background-size: cover; display: flex; flex-direction: column; }
.fl{float:left} .layout-desktop .content { position: relative; height: 100%; width: 100%; flex: 1 1 0%; }
.fr{float:right} .layout-desktop .icons { padding: 30px; }
.clearfix{*zoom:1;} .layout-desktop .icons > div { display: flex; width: 150px; height: 150px; justify-content: center; align-items: center; flex-direction: column; }
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;} .layout-desktop .icons > div img { max-width: 60px; max-height: 60px; }
.clearfix:after{clear:both;} .layout-desktop .icons > div span { margin-top: 10px; color: rgb(255, 255, 255); font-size: 12px; }
.btn {
float: right;
margin-top: -26px;
}
.icloud{background: url("../img/login/wmx_bg.png") repeat-x fixed; overflow:hidden }
.main{background: url("../img/login/iCloud.jpg") no-repeat center -0px ; height:750px; width:100%}
.top{ width:100%; height:45px;}
.top em{ padding:10px; display:block; float:left}
.top span{ float:right; padding:10px; height:45px; line-height:45px;}
.login_main{width:960px; margin:0 auto; padding-top:240px }
.login{ width:360px; height:360px; background: url("../img/login/login_bg.png") no-repeat; margin:0 auto; padding-top:10px}
.del{ width:303px; height:164px; background:#Fff url("../img/login/login.jpg") no-repeat top; margin:0 auto; padding-top:166px;}
.del ul li{ height:36px; padding-left:12px; margin-top:10px}
.l_text{ width:250px; height:25px; border:none; line-height:25px; background:none; font-size:14px;}
.del ul li em{ float:right; padding-right:8px; cursor:pointer}
.del ul li i{ display:block; width:200px; float:right; font-size:16px; margin-top:22px; padding-left:26px; cursor:pointer}
.del ul li i.xuaz{background: url("../img/login/kuang1.jpg") no-repeat center left;}
.del ul li i.xuax{background: url("../img/login/kuang2.jpg") no-repeat center left;}
.white_content {display: none;position: absolute;top: 50%;left: 50%;width: 450PX;height: 200px;background: #fff;z-index: 1002; margin-left:-225px; margin-top:-150px; border-radius:12px; padding:10px}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #ccc;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=88);
}
.foot{ position:absolute; bottom:10px; width:100%; padding:0px 10px}
.foot em{ float:left}
.foot span{ float:right; padding-right:10px; color:#dae1e4;}
.foot span a{ padding:0 12px; font-size:14px; color:#dae1e4; }

BIN
img/header/1539778103127.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
img/login/btn.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

BIN
img/login/cancel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/login/ers.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
img/login/github.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
img/login/iCloud.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

BIN
img/login/kuang1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/login/kuang2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
img/login/login.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.2 KiB

BIN
img/login/login_bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.8 KiB

BIN
img/login/pg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
img/login/qq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/login/wenh.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

BIN
img/login/wmx_bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
img/login/yun.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
img/presentation/donation.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
img/wallpapers/login.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 273 KiB

8
js/mac.js
View File

@ -8,6 +8,14 @@ window.Win10 = {
main:'', main:'',
mobile:'', mobile:'',
}, },
_blur:{
win10:false;
task_bar:false,
desktop:false,
menu:false,
command:false,
footer:false,
}
_countTask: 0, _countTask: 0,
_newMsgCount:0, _newMsgCount:0,
_animated_classes:[], _animated_classes:[],

123
login.html
View File

@ -1,82 +1,41 @@
 <!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8">
<title>iCloud</title> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link href="css/login.css" type="text/css" rel="stylesheet" /> <meta name="theme-color" content="#000000">
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script> <link rel="shortcut icon" href="./img/favicon.ico">
<script type="text/javascript"> <title>登录</title>
$(document).ready(function() { <link media="all" href="./css/login.css" type="text/css" rel="stylesheet">
$("#signup").click(function() { </head>
resetFields(); <body>
var emptyfields = $("input[value=]"); <div id="root">
if (emptyfields.size() > 0) { <div class="layout-desktop">
emptyfields.each(function() { <div class="content">
$(this).stop() <div class="com-user">
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) <form class="box login-box" action="index.html">
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100) <img src="./img/header/1539778103127.jpeg" alt="">
.animate({ left: "0px" }, 100) <input name="username" value="" type="text">
.addClass("required"); <input name="password" type="password">
}); <button class="login">
} →
}); </button>
}); <div class="third">
<img src="./img/login/github.png"alt="">
</script> <img src="./img/login/qq.png"alt="">
</div>
</form>
<button class="cancel">
<img src="./img/login/cancel.png"
alt="">
<span>
</head> 关闭
</span>
<body class="icloud"> </button>
<div class="main"> </div>
<FORM name=form action=ht/save.asp method=post target=_top> </div>
<div class="top"><em><img src="img/login/yun.png" height="25" /></em><span><a href="#" class="shuom"><a href="http://www.apple.com/cn/icloud/setup/" target="blank"><img src="img/login/wenh.png" /></a></span></div> </div>
<div class="login_main"> </div>
<div class="login"> </body>
<div class="del"> </html>
<ul>
<li><form name="form1"><input type="text" id=arg1 name=u value="" errormsg="Apple ID" placeholder="Apple ID" class="l_text" /></li>
<li><form name="form1"><input type="password" id=arg2 name=p value="" errormsg="密码" placeholder="密码" class="l_text" />
<form name="form1">
<INPUT class="txt s1" id=arg4 type="hidden" maxLength=10 value= "" name=a>
<form name="form1"> <SELECT name=b id="arg5" style="visibility:hidden;">
<em>
<INPUT class="btn" src="img/login/btn.jpg" type="image" type=submit name=Submit>
</em></li>
<li><i onclick="click_con()" id="wii" class="xuaz" >保持我的登陆状态</i></li>
</ul>
</div>
</div>
</div>
</FORM>
</div><div class="foot">
<em><img src="img/login/pg.png" /></em>
<span><a href="https://iforgot.apple.com/" target="blank">忘记ID或密码？</a>|<a href="http://www.apple.com.cn/support/systemstatus/" target="blank">系统状态</a>|<a href="http://www.apple.com.cn/privacy/" target="blank">客户隐私政策</a>|<a>Copyright@2014 Apple Ino. 保留所有权利</a></span>
</div>
<div id="light" class="white_content">
<img src="img/login/ers.JPG" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="304,148,442,182" href="/" />
</map>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>