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

修改css界面

This commit is contained in:
muzi_ys 2018-12-20 00:36:56 +08:00
parent 9b80bf57f6
commit b888d4c9be
23 changed files with 179 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
css/macdefault.css
View File

@ -75,9 +75,7 @@ body {
height: 30px; height: 30px;
line-height:30px; line-height:30px;
/* IE9+ */ /* IE9+ */
background-color: rgba(255,255,255,0.4); background:rgba(255,255,255,0.5);
/* IE6-IE8 */
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#68FFFFFF,endColorStr=#68FFFFFF);
z-index: 19930813; z-index: 19930813;
} }
@ -133,8 +131,8 @@ body {
float: left; float: left;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
padding-left: 15px; padding-left: 5px;
padding-right: 15px; padding-right: 5px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
@ -202,24 +200,24 @@ body {
top:-70%; top:-70%;
} }
#win10-menu .blocks::-webkit-scrollbar,.list::-webkit-scrollbar,#win10_command_center::-webkit-scrollbar { #win10-menu .list::-webkit-scrollbar,#win10_command_center::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
#win10-menu .blocks::-webkit-scrollbar-track,.list::-webkit-scrollbar-track,#win10_command_center::-webkit-scrollbar-track { #win10-menu .list::-webkit-scrollbar-track,#win10_command_center::-webkit-scrollbar-track {
background-color: rgba(74, 84, 78, 0.41); background-color: rgba(74, 84, 78, 0.41);
} }
#win10-menu .blocks::-webkit-scrollbar-thumb,.list::-webkit-scrollbar-thumb,#win10_command_center::-webkit-scrollbar-thumb { #win10-menu .list::-webkit-scrollbar-thumb,#win10_command_center::-webkit-scrollbar-thumb {
background-color: #6a6a6a; background-color: #6a6a6a;
} }
#win10-menu .blocks::-webkit-scrollbar-button ,.list::-webkit-scrollbar-button ,#win10_command_center::-webkit-scrollbar-button { #win10-menu .list::-webkit-scrollbar-button ,#win10_command_center::-webkit-scrollbar-button {
/*background-color: #6a6a6a;*/ /*background-color: #6a6a6a;*/
} }
#win10-menu .list,.blocks{ #win10-menu .list{
float: left; float: left;
width: 180px; width: 180px;
height:100%; height:100%;
@ -283,10 +281,6 @@ body {
cursor: pointer; cursor: pointer;
} }
#win10-menu .blocks{
max-width: 650px;
width:calc(100% - 260px);
}
#win10-menu-switcher{ #win10-menu-switcher{
position: absolute; position: absolute;
@ -327,6 +321,9 @@ body {
color: grey; color: grey;
} }
#win10 #win10-shortcuts { #win10 #win10-shortcuts {
height: calc(100% - 40px); height: calc(100% - 40px);
position: relative; position: relative;
@ -517,9 +514,9 @@ body {
#win10_btn_group_middle .btn.active{ #win10_btn_group_middle .btn.active{
/* background: #F6F6F6; */ /* background: #F6F6F6; */
-webkit-box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.8); -moz-box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.8); box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.8);
} }
#win10_btn_group_middle .btn:hover{ #win10_btn_group_middle .btn:hover{
@ -546,7 +543,7 @@ body {
.win10-open-iframe .layui-layer-title{ .win10-open-iframe .layui-layer-title{
box-sizing: border-box; box-sizing: border-box;
background-color: #F6F6F6; background: rgba(250, 250, 250, 0.9);
padding-right: 160px; padding-right: 160px;
border-radius:4px 4px 0px 0px; border-radius:4px 4px 0px 0px;
color: #333; color: #333;
@ -760,53 +757,34 @@ body {
height: calc(100% - 40px); height: calc(100% - 40px);
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 40px;
z-index: 0; z-index: 0;
background-color: transparent; background-color: transparent;
} }
/*--------------尾部--------------------*/ /*--------------尾部--------------------*/
#footer{
.dock { height: 60px;
width: 100%; width: 100%;
bottom: 0px; position: absolute;
position: absolute; bottom: 0px;
left: 0px; text-align: center;
height: 65px;
text-align: center;
z-index:1000;
} }
.dock-container {
position: absolute; #footer .dock{
height: 60px; /*width: 72%; */
border-radius: 5px; height: 100%;
line-height: 60px;
display: inline-block;
border-radius: 5px 5px 0 0;
background-color: rgba(255,255,255,0.45) ;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ background-color: rgba(255,255,255,0.45) ;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
padding:0 20px; -webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
-webkit-border-top-left-radius: 5px 5px 0 0;
-webkit-border-top-right-radius: 5px 5px 0 0;
} }
.dock a.dock-item {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 60px;
color: #fff;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item span {
display: none;
padding:3px 0px;
border-radius: 5px;
background-color: rgba(0,0,0,0.45);
}
.dock-item img {
border: none;
margin: 5px;
width: 100%;
}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */ @media \0screen\,screen\9 {/* 只支持IE6、7、8 */
.dock{ #footer .dock{
/*width: 72%; */ /*width: 72%; */
height: 100%; height: 100%;
line-height: 60px; line-height: 60px;
@ -817,11 +795,51 @@ body {
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */ position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */ *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
} }
.dock ul{ .demo ul{
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */ position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
} }
} }
#footer .dock ul{
display: inline-block;
}
#footer .dock img{
z-index:222;
width: 50px;
height: 50px;
}
#footer .dock ul li{
float: left;
width: 60px;
margin: 5px auto;
/*过渡的时间 效果*/
-webkit-transition: 0.15s linear;
}
#footer .dock .dock-tips{
color:#333;
font-size:0.4em;
border-radius: 5px;
background: rgba(255,255,255,0.5);
height: 20px;
line-height: 20px;
display: none;
padding:0px 5px;
margin-top: -30px;
margin-bottom: 10px;
flex-direction: column;
align-items: center;
}
#footer .dock .dock-tips .arrow{
opacity: 0.5;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid rgba(255,255,255,0.5);
border-bottom:5px solid transparent;
width:0;
height:0;
}
/*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/ /*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/
.win10-open-iframe .black-green, #win10 .black-green{background:#009688!important;} .win10-open-iframe .black-green, #win10 .black-green{background:#009688!important;}
@ -887,13 +905,6 @@ body {
top: 0; top: 0;
} }
#win10-menu .blocks{
overflow-x: hidden;
position: absolute;
width:calc(100% - 31px);
left: 0;
top: 0;
}
#win10-menu .menu_group { #win10-menu .menu_group {
width: 90%; width: 90%;
@ -915,22 +926,12 @@ body {
.win10-open-iframe .layui-layer-setwin a { .win10-open-iframe .layui-layer-setwin a {
width: 32px; width: 32px;
} }
#footer{
.dock{ bottom:0;
width: 100%;
height:60px;
border-radius: 0px;
} }
.dock .dock-container{
#footer .dock{
width: 100%; width: 100%;
border-radius: 0px; border-radius: 0px;
} }
.dock a.dock-item{
width: 100%;
margin-left: 25px;
float:left;
position: static;
}
} }

86
demo.html
View File

@ -5,14 +5,18 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>mac桌面</title> <title>mac桌面</title>
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'> <link rel='Shortcut Icon' type='image/x-icon' href='./macimg/apple.ico'>
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
<link href="./css/animate.css" rel="stylesheet"> <link href="./css/animate.css" rel="stylesheet">
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="./css/macdefault.css" rel="stylesheet"> <link href="./css/macdefault.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/interface.js"></script>
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
<script type="text/javascript" src="./js/mac.js"></script> <script type="text/javascript" src="./js/mac.js"></script>
<style>
* {
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
}
</style>
<script> <script>
Win10.onReady(function () { Win10.onReady(function () {
@ -26,24 +30,24 @@
'animated flip', 'animated flip',
'animated bounceIn', 'animated bounceIn',
], 0.01); ], 0.01);
setTimeout(function () {
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
Win10.enableFullScreen();
})
}, 1500);
setTimeout(function () { setTimeout(function () {
Win10.newMsg('官方交流一群', '欢迎各位大侠加入讨论：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=4Er0u8i">[点击加入]205546163</a>') layer.open({
}, 2500); type: 2,
title: '最新资讯',
setTimeout(function () { area: ['300px', '380px'],
layer.open({ shade:0,
type: 2,
title: '最新资讯',
area: ['300px', '380px'],
shade:0,
skin:'win10-open-iframe', skin:'win10-open-iframe',
offset: 'rb', offset: 'rb',
content: 'broadcast.html' content: '//win10ui.yuri2.cn/src/broadcast.html'
}) })
},2000); },2000)
}); });
</script> </script>
</head> </head>
<body> <body>
@ -97,7 +101,8 @@
<div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-tile.html','磁贴代码生成器')">磁贴代码生成器</div> <div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-tile.html','磁贴代码生成器')">磁贴代码生成器</div>
<div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-menu.html','菜单代码生成器')">菜单代码生成器</div> <div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-menu.html','菜单代码生成器')">菜单代码生成器</div>
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div> <div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-window-close fa-fw"></i>关闭</div>
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
</div> </div>
</div> </div>
<div id="win10_command_center" class="hidden_right"> <div id="win10_command_center" class="hidden_right">
@ -114,29 +119,34 @@
</div> </div>
<div id="win10_btn_group_middle" class="btn_group"></div> <div id="win10_btn_group_middle" class="btn_group"></div>
<div id="win10_btn_group_right" class="btn_group"> <div id="win10_btn_group_right" class="btn_group">
<div class="btn" id="win10_btn_time"> <div class="btn" id="win10_btn_time"></div>
<!--0:00<br/>-->
<!--1993/8/13-->
</div>
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div> <div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div>
<div class="btn" id="win10_btn_show_desktop"></div> <div class="btn" id="win10_btn_show_desktop"></div>
</div> </div>
</div> </div>
<!--bottom dock --> <div id="footer">
<div class="dock" id="dock"> <div class="dock">
<div class="dock-container"> <ul>
<a class="dock-item" href="#"><span>finder</span><img src="./img/icon/finder.png" alt="finder" /></a> <li><span class="dock-tips">finder<span class="arrow"></span></span><a href="#"> <img src="./img/icon/finder.png"></a></li>
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a> <li><span class="dock-tips">computer<span class="arrow"></span></span><a onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>我的电脑')"> <img src="./img/icon/computer.png"></a></li>
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a> <li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img src="./img/icon/gamecenter.png"></a></li>
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a> <li><span class="dock-tips">icloud<span class="arrow"></span></span><a href="#"> <img src="./img/icon/icloud.png"></a></li>
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a> <li><span class="dock-tips">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li>
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a> <li><span class="dock-tips">trashicon<span class="arrow"></span></span><a href="#"> <img src="./img/icon/trashicon.png"></a></li>
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a> <li><span class="dock-tips">appstore<span class="arrow"></span></span><a href="#"> <img src="./img/icon/appstore.png"></a></li>
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a> <li><span class="dock-tips">iTunes<span class="arrow"></span></span><a href="#"> <img src="./img/icon/iTunes.png"></a></li>
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a> <li><span class="dock-tips">imusic<span class="arrow"></span></span><a href="#"> <img src="./img/icon/imusic.png"></a></li>
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a> <li><span class="dock-tips">preview<span class="arrow"></span></span><a href="#"> <img src="./img/icon/preview.png"></a></li>
</div> <li><span class="dock-tips">mail<span class="arrow"></span></span><a href="#"> <img src="./img/icon/mail.png"></a></li>
</div> <li><span class="dock-tips">notes.png<span class="arrow"></span></span><a href="#"> <img src="./img/icon/notes.png"></a></li>
<li><span class="dock-tips">messages<span class="arrow"></span></span><a href="#"> <img src="./img/icon/messages.png"></a></li>
<li><span class="dock-tips">maps<span class="arrow"></span></span><a href="#"> <img src="./img/icon/maps.png"></a></li>
<li><span class="dock-tips">ibooks<span class="arrow"></span></span><a href="#"> <img src="./img/icon/ibooks.png"></a></li>
<li><span class="dock-tips">facetime<span class="arrow"></span></span><a href="#"> <img src="./img/icon/facetime.png"></a></li>
<li><span class="dock-tips">launchpad<span class="arrow"></span></span><a href="#"> <img src="./img/icon/launchpad.png"></a></li>
</ul>
</div>
</div>
</div> </div>
</body> </body>
</html> </html>

BIN
img/icon/appstore.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
img/icon/computer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
img/icon/facetime.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 392 KiB

BIN
img/icon/file.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
img/icon/finder.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
img/icon/gamecenter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 720 KiB

BIN
img/icon/iTunes.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 50 KiB

BIN
img/icon/ibooks.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 596 KiB

BIN
img/icon/icloud.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 179 KiB

BIN
img/icon/imusic.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 111 KiB

BIN
img/icon/kyzg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
img/icon/launchpad.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
img/icon/mail.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 83 KiB

BIN
img/icon/maps.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 477 KiB

BIN
img/icon/messages.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 596 KiB

BIN
img/icon/notes.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 615 KiB

BIN
img/icon/prefapp.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
img/icon/preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 81 KiB

BIN
img/icon/trashicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 13 KiB

64
index.html
View File

@ -5,13 +5,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>mac桌面</title> <title>mac桌面</title>
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'> <link rel='Shortcut Icon' type='image/x-icon' href='./macimg/apple.ico'>
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
<link href="./css/animate.css" rel="stylesheet"> <link href="./css/animate.css" rel="stylesheet">
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
<link href="./css/macdefault.css" rel="stylesheet"> <link href="./css/macdefault.css" rel="stylesheet">
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/interface.js"></script>
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
<script type="text/javascript" src="./js/mac.js"></script> <script type="text/javascript" src="./js/mac.js"></script>
<style> <style>
* { * {
@ -33,20 +32,22 @@
], 0.01); ], 0.01);
setTimeout(function () { setTimeout(function () {
Win10.newMsg('官方交流一群', '欢迎各位大侠加入讨论：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=4Er0u8i">[点击加入]205546163</a>') Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
}, 2500); Win10.enableFullScreen();
})
}, 1500);
setTimeout(function () { setTimeout(function () {
layer.open({ layer.open({
type: 2, type: 2,
title: '最新资讯', title: '最新资讯',
area: ['300px', '380px'], area: ['300px', '380px'],
shade:0, shade:0,
skin:'win10-open-iframe', skin:'win10-open-iframe',
offset: 'rb', offset: 'rb',
content: 'broadcast.html' content: '//win10ui.yuri2.cn/src/broadcast.html'
}) })
},2000); },2000)
}); });
</script> </script>
@ -68,9 +69,8 @@
<div id="win10-menu" class="hidden"> <div id="win10-menu" class="hidden">
<div class="list win10-menu-hidden animated animated-slideOutLeft"> <div class="list win10-menu-hidden animated animated-slideOutLeft">
<div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div> <div class="item" onclick="Win10.aboutUs()"><i class="icon fa fa-star fa-fw"></i>关于</div>
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-window-close fa-fw"></i>关闭</div> <div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
</div> </div>
<div id="win10-menu-switcher"></div>
</div> </div>
<div id="win10_command_center" class="hidden_right"> <div id="win10_command_center" class="hidden_right">
<div class="title"> <div class="title">
@ -86,27 +86,23 @@
</div> </div>
<div id="win10_btn_group_middle" class="btn_group"></div> <div id="win10_btn_group_middle" class="btn_group"></div>
<div id="win10_btn_group_right" class="btn_group"> <div id="win10_btn_group_right" class="btn_group">
<div class="btn" id="win10_btn_time"> <div class="btn" id="win10_btn_time"></div>
<!--0:00<br/>-->
<!--1993/8/13-->
</div>
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div> <div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div>
<div class="btn" id="win10_btn_show_desktop"></div> <div class="btn" id="win10_btn_show_desktop"></div>
</div> </div>
</div> </div>
<div class="dock" id="dock"> <div id="footer">
<div class="dock-container"> <div class="dock">
<a class="dock-item" href="#" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>UI官网')" ><span>finder</span><img src="./img/icon/finder.png" alt="finder" /></a> <ul>
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a> <li><span class="dock-tips">finder<span class="arrow"></span></span><a href="#"> <img src="./img/icon/finder.png"></a></li>
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a> <li><span class="dock-tips">computer<span class="arrow"></span></span><a onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>我的电脑')"> <img src="./img/icon/computer.png"></a></li>
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a> <li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img src="./img/icon/gamecenter.png"></a></li>
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a> <li><span class="dock-tips">icloud<span class="arrow"></span></span><a href="#"> <img src="./img/icon/icloud.png"></a></li>
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a> <li><span class="dock-tips">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li>
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a> <li><span class="dock-tips">trashicon<span class="arrow"></span></span><a href="#"> <img src="./img/icon/trashicon.png"></a></li>
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a> <li><span class="dock-tips">appstore<span class="arrow"></span></span><a href="#"> <img src="./img/icon/appstore.png"></a></li>
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a> </ul>
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a> </div>
</div>
</div> </div>
</div> </div>
</body> </body>

57
js/mac.js
View File

@ -608,47 +608,30 @@ window.Win10 = {
}, },
//渲染DOCK //渲染DOCK
renderDocks:function () { renderDocks:function () {
var cell_width=50; var cell_width=74;
var width=document.body.clientWidth ; var width=document.body.clientWidth ;
var docks=$(".dock .dock-container a");
var max_num=parseInt((width-40)/(cell_width+25))-1;
for (var i = 0; i <= docks.length; i++) {
if (i>=max_num) {
docks.eq(i).hide();
}else{
docks.eq(i).show();
}
}
if(width>768){ if(width>768){
$('#dock').Fisheye({ $("#footer .dock li a img").hover(
maxWidth: 70, function(){
items: 'a', $(this).parent('a').prev().css('display','flex');
itemsText: 'span', },
container: '.dock-container', function(){
itemWidth: 50, $(this).parent('a').prev().css('display','none');
proximity: 80, }
alignment : 'left', );
valign: 'bottom', var docks=$("#footer .dock li");
halign : 'center' var max_num=parseInt(width/cell_width)-1;
}) for (var i = 0; i < docks.length; i++) {
}else{ if (i>max_num) {
$('.dock-container').css({'width':width}); docks.eq(i).css('display','none');
for (var i = 0; i < max_num; i++) { }else{
docks.eq(i).css('display','list-item');
docks.on('mouseover', function(e) {
e.preventDefault();
});
docks.on('mouseout', function(e) {
e.preventDefault();
});
docks.on('click', function(e) {
e.preventDefault();
});
docks.unbind("mouseover").unbind('mouseout').unbind('click').css({"width":cell_width});
if(i==0){
docks.eq(i).css("margin-left",0);
} }
} }
}else{
$("#footer .dock li a img").hover(function(){
$(this).parent('a').prev().css('display','none');
});
} }
}, },
commandCenterToggle: function () { commandCenterToggle: function () {