mirror of https://github.com/1099438829/macUI.git
升级v1.1.2.5
This commit is contained in:
parent
bbb5436123
commit
4f06ec2e42
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
// 使用 IntelliSense 了解相关属性。
|
||||
// 悬停以查看现有属性的描述。
|
||||
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "pwa-chrome",
|
||||
"request": "launch",
|
||||
"name": "Launch Chrome against localhost",
|
||||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
The Star And Thank Author License (SATA)
|
||||
|
||||
Copyright (c) 2017 muzi_ys(1099438829@qq.com)
|
||||
|
||||
Project Url: https://gitee.com/muziys/macUI
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
And wait, the most important, you shall star/+1/like the project(s) in project url
|
||||
section above first, and then thank the author(s) in Copyright section.
|
||||
|
||||
Here are some suggested ways:
|
||||
|
||||
- Email the authors a thank-you letter, and make friends with him/her/them.
|
||||
- Report bugs or issues.
|
||||
- Tell friends what a wonderful project this is.
|
||||
- And, sure, you can just express thanks in your mind without telling the world.
|
||||
|
||||
Contributors of this project by forking have the option to add his/her name and
|
||||
forked project url at copyright and project url sections, but shall not delete
|
||||
or modify anything else in these two sections.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
|
|
@ -6,7 +6,7 @@ MAC_UI基于WIN10UI打造的mac风格的后台UI,让你轻松搭建一个眼前
|
|||
|
||||
## 版本
|
||||
|
||||
v1.1.2.3
|
||||
v1.1.2.5
|
||||
|
||||
> 该版本为小更新，针对插件开发作了一些准备，添加了一些语法糖（具体改动请参考更新日志）。
|
||||
> 更新方式：基本无须修改html文件，覆盖css和win10.js文件。
|
||||
|
|
@ -15,7 +15,7 @@ v1.1.2.3
|
|||
|
||||
## 预览
|
||||
|
||||
[1] http://mac.apecloud.cn
|
||||
![1] http://mac.apecloud.cn
|
||||
|
||||
|
||||
|
||||
|
|
@ -28,6 +28,7 @@ v1.1.2.3
|
|||
* 极少的API，大部分功能可用html元素定义完成
|
||||
* 响应式兼容，在手机浏览器也有不错的观感
|
||||
* 目前只保证对主流现代浏览器的兼容性支持
|
||||
* 支持 class 配置高斯模糊 blur background_blur
|
||||
|
||||
## 前置组件
|
||||
|
||||
|
|
@ -183,6 +184,8 @@ Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></
|
|||
* orange{background:#F7B824}
|
||||
* red{background:#FF5722}
|
||||
* dark{background:#2F4056}
|
||||
* blur 高斯模糊 前置模糊
|
||||
* backgroud_blur 背景高斯模糊
|
||||
|
||||
#### 右键菜单配置
|
||||
|
||||
|
|
|
|||
|
|
@ -58,6 +58,17 @@ body {
|
|||
transition: -ms-filter 0.3s;
|
||||
}
|
||||
|
||||
#win10 .backgroud_blur {
|
||||
/* Safari for macOS & iOS */
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
/* Google Chrome */
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
transition: filter 0.3s;
|
||||
transition: -webkit-filter 0.3s;
|
||||
transition: -moz-filter 0.3s;
|
||||
transition: -ms-filter 0.3s;
|
||||
}
|
||||
|
||||
#win10 .desktop .background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -96,11 +107,11 @@ body {
|
|||
top: 0;
|
||||
height: 24px;
|
||||
line-height:24px;
|
||||
/* IE9+ */
|
||||
background-color:rgba(255,255,255,0.4);
|
||||
/* IE6-IE8 */
|
||||
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#68FFFFFF,endColorStr=#68FFFFFF);
|
||||
z-index: 19930813;
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
-webkit-box-shadow: 0 0.3125rem 0.07rem -0.3125rem rgba(0, 0, 0, 0.42);
|
||||
-moz-box-shadow: 0 0.3125rem 0.07rem -0.3125rem rgba(0, 0, 0, 0.42);
|
||||
box-shadow: 0 0.3125rem 0.07rem -0.3125rem rgba(0, 0, 0, 0.42);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#win10 .btn_group {
|
||||
|
|
@ -198,6 +209,9 @@ body {
|
|||
top: 24px;
|
||||
left: 0.5rem;
|
||||
background-color: rgba(255,255,255,0.55);
|
||||
box-shadow: 1px 1px 5px #909090;
|
||||
-moz-box-shadow: 1px 1px 5px #909090;/*firefox*/
|
||||
-webkit-box-shadow: 1px 1px 5px #909090;/*safari或chrome*/
|
||||
height: auto;
|
||||
width: 12rem;
|
||||
max-width: 880px;
|
||||
|
|
@ -331,6 +345,7 @@ body {
|
|||
|
||||
#win10 #win10-shortcuts {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -383,9 +398,11 @@ body {
|
|||
right: 0;
|
||||
top: 25px;
|
||||
width: 300px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
/* -webkit-box-shadow: 0 0.3125rem 0.3125rem -0.3125rem rgba(0,0,0,0.117); */
|
||||
-moz-box-shadow: 0 0.3125rem 0.3125rem -0.3125rem rgba(0,0,0,0.117);
|
||||
box-shadow: 0 0.3125rem 0.3125rem -0.3125rem rgba(0,0,0,0.117);
|
||||
height: calc(100% - 25px);
|
||||
transition: all 0.5s;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: #333;
|
||||
|
|
@ -621,7 +638,6 @@ body {
|
|||
}
|
||||
|
||||
#win10_command_center .msgs .msg>.title{
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
|
@ -641,7 +657,6 @@ body {
|
|||
|
||||
#win10_command_center .msgs .msg>.content{
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -774,12 +789,12 @@ body {
|
|||
}
|
||||
|
||||
/*右键菜单*/
|
||||
#win10 .win10-context-menu { left: 0;top: 0;position: fixed; width: 150px; height: auto; background-color: rgba(255, 255, 255,0.75); border: #CCC 1px solid; display: block; border-radius: 5px; z-index: 99999999; }
|
||||
#win10 .win10-context-menu { left: 0;top: 0;position: fixed; width: 150px; height: auto; background-color: rgba(255, 255, 255,0.45); display: block; border-radius: 5px; z-index: 99999999; }
|
||||
#win10 .win10-context-menu ul { margin: 0px; padding: 0px; }
|
||||
#win10 .win10-context-menu ul li {transition: background-color 0.5s;cursor: default;padding: 0px 1em; list-style: none; line-height: 30px; height: 30px; margin: 3px 0; font-size: 13px; }
|
||||
#win10 .win10-context-menu ul li {transition: background-color 0.5s;cursor: default;padding: 0px 1em; list-style: none; line-height: 25px; height: 25px; margin: 3px 0; font-size: 13px; }
|
||||
#win10 .win10-context-menu ul li:hover { background-color: rgba(49,156,241,0.71);cursor: pointer; }
|
||||
#win10 .win10-context-menu ul li a {text-decoration: none; display: block; height: 100%; color: #333; outline: none; }
|
||||
#win10 .win10-context-menu ul hr { margin: 0; height: 0px; border: 0px; border-bottom: rgba(233,233,233) 1px solid;border-top: none }
|
||||
#win10 .win10-context-menu ul hr { margin: 0; height: 0px; border: 0px; border-bottom: rgba(121, 121, 121, 0.24) 1px solid;border-top: none }
|
||||
|
||||
/*块级按钮*/
|
||||
.win10-open-iframe .layui-layer-ico{background-image:none;}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
.cm-tab-wrap-hack::after{content:""}.com-user{position:fixed;display:flex;justify-content:center;align-items:center;background:#fff none repeat scroll 0 0}.com-user,.com-user::after{top:0;left:0;bottom:0;right:0;z-index:1000}.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:.8}.com-user .login-box{width:200px}.com-user .login-box img{width:50px;height:50px;border-radius:50%;margin-bottom:10px}.com-user .login-box .login{position:absolute;padding:0;right:-50px;top:90px;border-radius:15px;border:medium none;background:rgba(255,255,255,.3) none repeat scroll 0 0;width:30px;color:#fff;font-size:18px;outline:medium none;height:30px;cursor:pointer}.com-user .login-box .login:active{background:rgba(255,255,255,.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}.com-user .third img{width:32px;height:32px;cursor:pointer;margin:10px}.com-user input{width:150px;background:rgba(255,255,255,.3) none repeat scroll 0 0;border:medium none rgba(0,0,0,.3);border-radius:5px;height:25px;margin:10px 0;outline:medium none;color:#fff;text-align:center}.com-user .cancel{position:absolute;z-index:1001;bottom:22%;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}.com-user .cancel img{opacity:.8}.com-user .cancel span{color:#fff;font-size:12px;margin-top:10px}body,html{margin:0;padding:0;font-family:sans-serif;height:100%;width:100%;overflow:hidden}button{-moz-user-select:none;cursor:default;background-color:#fff;outline:medium none;border-width:1px;border-style:solid;border-radius:5px;border-color:#c8c8c8 #c2c2c2 #acacac;box-shadow:0 1px rgba(0,0,0,.04);padding:0 13px;line-height:19px;font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif;font-size:13px}button:active{border-color:#247fff #125eed #003ddb;background-image:-webkit-linear-gradient(top,#4c98fe,#0564e3);color:rgba(255,255,255,.9)}*{box-sizing:border-box}#root,.layout-desktop{height:100%;width:100%}.layout-desktop{background-image:url(../img/wallpapers/main.jpg);background-size:cover;display:flex;flex-direction:column}.layout-desktop .content{position:relative;height:100%;width:100%;flex:1 1 0%}.layout-desktop .icons{padding:30px}.layout-desktop .icons>div{display:flex;width:150px;height:150px;justify-content:center;align-items:center;flex-direction:column}.layout-desktop .icons>div img{max-width:60px;max-height:60px}.layout-desktop .icons>div span{margin-top:10px;color:#fff;font-size:12px}
|
||||
131
demo.html
131
demo.html
|
|
@ -9,58 +9,21 @@
|
|||
<link href="./css/animate.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link href="./css/index.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.1.1/layer/layer.js"></script>
|
||||
<script type="text/javascript" src="./js/mac.js"></script>
|
||||
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
|
||||
//设置壁纸
|
||||
Win10.setBgUrl({
|
||||
main:'./img/wallpapers/main.jpg',
|
||||
mobile:'./img/wallpapers/mobile.jpg',
|
||||
});
|
||||
|
||||
Win10.setAnimated([
|
||||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
|
||||
Win10.enableFullScreen();
|
||||
});
|
||||
Win10.newMsg('最新资讯', '最新资讯信息',function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade:0,
|
||||
skin:'win10-open-iframe',
|
||||
offset: 'rb',
|
||||
content: './broadcast.html'
|
||||
});
|
||||
});
|
||||
}, 1500);
|
||||
|
||||
setTimeout(function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade:0,
|
||||
skin:'win10-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
},2000);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="win10">
|
||||
<div id="win10_task_bar" class="backgroud_blur">
|
||||
<div id="win10_btn_group_left" class="btn_group">
|
||||
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
<div class="btn" onclick="Win10.openUrl('./app/safari','<span class=\'icon fa fa-safari\'></span>','safari')"><span class="fa fa-safari"></span></div>
|
||||
</div>
|
||||
<div id="win10_btn_group_middle" class="btn_group"></div>
|
||||
<div id="win10_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="win10_btn_time"></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>
|
||||
</div>
|
||||
<div class="desktop">
|
||||
<div id="win10-shortcuts" class="shortcuts-hidden">
|
||||
<div class="shortcut" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')">
|
||||
|
|
@ -128,7 +91,7 @@
|
|||
<div class="background blur"></div>
|
||||
</div>
|
||||
|
||||
<div id="win10-menu" class="hidden">
|
||||
<div id="win10-menu" class="hidden backgroud_blur">
|
||||
<div class="list win10-menu-hidden animated animated-slideOutLeft">
|
||||
<div class="item"><i class="icon fa fa-wrench fa-fw"></i><span>API测试</span></div>
|
||||
<div class="sub-item" onclick="Win10.openUrl('./child.html','子页')">父子页沟通</div>
|
||||
|
|
@ -143,30 +106,18 @@
|
|||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="win10_command_center" class="hidden_right">
|
||||
<div id="win10_command_center" class="hidden_right backgroud_blur">
|
||||
<div class="command-header">
|
||||
<div class="tab-today active">今天</div>
|
||||
<div class="tab-msg">通知</div>
|
||||
</div>
|
||||
<div class="command-body today" win-render="none"></div>
|
||||
<div class="command-body today"></div>
|
||||
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
|
||||
<div class="command-body msgs"></div>
|
||||
</div>
|
||||
<div id="win10_task_bar">
|
||||
<div id="win10_btn_group_left" class="btn_group">
|
||||
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
<div class="btn" onclick="Win10.openUrl('./app/safari','<span class=\'icon fa fa-safari\'></span>','safari')"><span class="fa fa-safari"></span></div>
|
||||
</div>
|
||||
<div id="win10_btn_group_middle" class="btn_group"></div>
|
||||
<div id="win10_btn_group_right" class="btn_group">
|
||||
<div class="btn" id="win10_btn_time"></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>
|
||||
</div>
|
||||
<!--bottom dock -->
|
||||
<div class="dock" id="dock">
|
||||
<div class="dock-container">
|
||||
<div class="dock-container backgroud_blur">
|
||||
<a class="dock-item" onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <img src="./img/icon/finder.png"></a>
|
||||
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
|
||||
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
|
||||
|
|
@ -181,4 +132,54 @@
|
|||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||
<script type="text/javascript" src="./component/layer-v3.1.1/layer/layer.js"></script>
|
||||
<script type="text/javascript" src="./js/interface.js"></script>
|
||||
<script type="text/javascript" src="./js/mac.min.js"></script>
|
||||
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
|
||||
//设置壁纸
|
||||
Win10.setBgUrl({
|
||||
main: './img/wallpapers/main.jpg',
|
||||
mobile: './img/wallpapers/mobile.jpg',
|
||||
});
|
||||
|
||||
Win10.setAnimated([
|
||||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Win10.enableFullScreen();
|
||||
});
|
||||
Win10.newMsg('最新资讯', '最新资讯信息', function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade: 0,
|
||||
skin: 'win10-open-iframe',
|
||||
offset: 'rb',
|
||||
content: './broadcast.html'
|
||||
});
|
||||
});
|
||||
}, 1500);
|
||||
|
||||
setTimeout(function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade: 0,
|
||||
skin: 'win10-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
95
index.html
95
index.html
|
|
@ -3,54 +3,20 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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"/>
|
||||
<title>mac桌面</title>
|
||||
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
|
||||
<title>macOS</title>
|
||||
<meta name="description" content="mac桌面">
|
||||
<meta name="keywords" content="mac桌面">
|
||||
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
|
||||
<link href="./css/animate.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link href="./css/index.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.1.1/layer/layer.js"></script>
|
||||
<script type="text/javascript" src="./js/mac.js"></script>
|
||||
<link href="./component/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link href="./css/index.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
|
||||
//设置壁纸
|
||||
Win10.setBgUrl({
|
||||
main:'./img/wallpapers/main.jpg',
|
||||
mobile:'./img/wallpapers/mobile.jpg',
|
||||
});
|
||||
|
||||
Win10.setAnimated([
|
||||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
|
||||
Win10.enableFullScreen();
|
||||
})
|
||||
}, 1500);
|
||||
|
||||
setTimeout(function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade:0,
|
||||
skin:'win10-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
},2000);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="win10">
|
||||
<div id="win10_task_bar">
|
||||
<div id="win10_task_bar" class="backgroud_blur">
|
||||
<div id="win10_btn_group_left" class="btn_group">
|
||||
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
|
||||
<div class="btn" onclick="Win10.openUrl('./app/safari','<span class=\'icon fa fa-safari\'></span>','safari')"><span class="fa fa-safari"></span></div>
|
||||
|
|
@ -64,7 +30,7 @@
|
|||
</div>
|
||||
<div class="desktop">
|
||||
<div id="win10-shortcuts" class="shortcuts-hidden">
|
||||
<div class="shortcut" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')">
|
||||
<div class="shortcut" onclick="Win10.openUrl('http://mac.apecloud.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')">
|
||||
<img class="icon" src="./img/icon/computer.png"/>
|
||||
<div class="title">UI官网</div>
|
||||
</div>
|
||||
|
|
@ -99,13 +65,13 @@
|
|||
</div>
|
||||
<div class="background blur"></div>
|
||||
</div>
|
||||
<div id="win10-menu" class="hidden">
|
||||
<div id="win10-menu" class="hidden backgroud_blur">
|
||||
<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.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="win10_command_center" class="hidden_right">
|
||||
<div id="win10_command_center" class="hidden_right backgroud_blur">
|
||||
<div class="command-header">
|
||||
<div class="tab-today active">今天</div>
|
||||
<div class="tab-msg">通知</div>
|
||||
|
|
@ -115,7 +81,7 @@
|
|||
<div class="command-body msgs"></div>
|
||||
</div>
|
||||
<div class="dock" id="dock">
|
||||
<div class="dock-container">
|
||||
<div class="dock-container backgroud_blur">
|
||||
<a class="dock-item" onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <span>finder</span><img src="./img/icon/finder.png"></a>
|
||||
<a class="dock-item" href="#" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')" ><span>UI官网</span><img src="./img/icon/computer.png" alt="UI官网" /></a>
|
||||
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
|
||||
|
|
@ -130,5 +96,42 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||
<script type="text/javascript" src="./component/layer-v3.1.1/layer/layer.js"></script>
|
||||
<script type="text/javascript" src="./js/interface.js"></script>
|
||||
<script type="text/javascript" src="./js/mac.min.js"></script>
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
|
||||
//设置壁纸
|
||||
Win10.setBgUrl({
|
||||
main: './img/wallpapers/main.jpg',
|
||||
mobile: './img/wallpapers/mobile.jpg',
|
||||
});
|
||||
|
||||
Win10.setAnimated([
|
||||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)', function () {
|
||||
Win10.enableFullScreen();
|
||||
})
|
||||
}, 1500);
|
||||
|
||||
setTimeout(function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade: 0,
|
||||
skin: 'win10-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
}, 2000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
$(document).ready((function(){let animating=!1,submitPhase1=1100,submitPhase2=400,logoutPhase1=800,$login=$(".login"),$app=$(".app");function ripple(elem,e){$(".ripple").remove();let elTop=elem.offset().top,elLeft=elem.offset().left,x=e.pageX-elLeft,y=e.pageY-elTop,$ripple=$("<div class='ripple'></div>");$ripple.css({top:y,left:x}),elem.append($ripple)}$(document).on("click",".login__submit",(function(e){if(animating)return;animating=!0;let that=this;ripple($(that),e),$(that).addClass("processing"),setTimeout((function(){$(that).addClass("success"),setTimeout((function(){$app.show(),$app.css("top"),$app.addClass("active")}),330),setTimeout((function(){$login.hide(),$login.addClass("inactive"),animating=!1,$(that).removeClass("success processing")}),400)}),1100)})),$(document).on("click",".app__logout",(function(e){if(animating)return;$(".ripple").remove(),animating=!0;let that=this;$(that).addClass("clicked"),setTimeout((function(){$app.removeClass("active"),$login.show(),$login.css("top"),$login.removeClass("inactive")}),680),setTimeout((function(){$app.hide(),animating=!1,$(that).removeClass("clicked")}),800)}))}));
|
||||
File diff suppressed because one or more lines are too long
70
login.html
70
login.html
|
|
@ -1,41 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<link rel="shortcut icon" href="./img/favicon.ico">
|
||||
<title>登录</title>
|
||||
<link media="all" href="./css/login.css" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div class="layout-desktop">
|
||||
<div class="content">
|
||||
<div class="com-user">
|
||||
<form class="box login-box" action="index.html">
|
||||
<img src="./img/header/1539778103127.jpeg" alt="">
|
||||
<input name="username" value="" type="text">
|
||||
<input name="password" type="password">
|
||||
<button class="login">
|
||||
→
|
||||
</button>
|
||||
<div class="third">
|
||||
<img src="./img/login/github.png"alt="">
|
||||
<img src="./img/login/qq.png"alt="">
|
||||
</div>
|
||||
</form>
|
||||
<button class="cancel">
|
||||
<img src="./img/login/cancel.png"
|
||||
alt="">
|
||||
<span>
|
||||
关闭
|
||||
</span>
|
||||
|
||||
<head>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<link rel="shortcut icon" href="./img/favicon.ico">
|
||||
<title>登录</title>
|
||||
<link media="all" href="./css/login.min.css" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root">
|
||||
<div class="layout-desktop">
|
||||
<div class="content">
|
||||
<div class="com-user">
|
||||
<form class="box login-box" action="index.html">
|
||||
<img src="./img/header/1539778103127.jpeg" alt="">
|
||||
<input name="username" value="" type="text">
|
||||
<input name="password" type="password">
|
||||
<button class="login">
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
<div class="third">
|
||||
<img src="./img/login/github.png" alt="">
|
||||
<img src="./img/login/qq.png" alt="">
|
||||
</div>
|
||||
</form>
|
||||
<button class="cancel">
|
||||
<img src="./img/login/cancel.png" alt="">
|
||||
<span>
|
||||
关闭
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -53,19 +53,24 @@
|
|||
background: transparent;
|
||||
}
|
||||
.drawer.layui-layer>.layui-layer-title{
|
||||
background-color: srgba(250, 250, 250, 0.9);
|
||||
background:0 0;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
border: 0;
|
||||
}
|
||||
.drawer.layui-layer{
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.drawer.layui-layer>.layui-layer-content{
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 1em;
|
||||
border-radius:1em;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,60 +3,60 @@ Win10.onReady(function () {
|
|||
//注册打开事件
|
||||
(function () {
|
||||
// 注册事件委派 打开url窗口
|
||||
$('body').on('click', '.shortcut-drawer.win10-open-window', function() {
|
||||
$('body').on('click', '.shortcut-drawer.win10-open-window', function () {
|
||||
//>> 获取当前点击的对象
|
||||
$this = $(this);
|
||||
//>> 判断url地址是否为空 如果为空 不予处理
|
||||
if($this.data('url') !== "") {
|
||||
if ($this.data('url') !== "") {
|
||||
//>> 获取弹窗标题
|
||||
var title = $this.data('title')||'',
|
||||
areaAndOffset,icon;
|
||||
var title = $this.data('title') || '',
|
||||
areaAndOffset, icon;
|
||||
//>> 判断是否有标题图片
|
||||
var bg=$this.data('icon-bg')?$this.data('icon-bg'):'';
|
||||
if($this.data('icon-image')) {
|
||||
var bg = $this.data('icon-bg') ? $this.data('icon-bg') : '';
|
||||
if ($this.data('icon-image')) {
|
||||
//>> 加入到标题中
|
||||
icon = '<img class="icon '+bg+'" src="' + $this.data('icon-image') + '"/>';
|
||||
icon = '<img class="icon ' + bg + '" src="' + $this.data('icon-image') + '"/>';
|
||||
}
|
||||
if($this.data('icon-font')) {
|
||||
if ($this.data('icon-font')) {
|
||||
//>> 加入到标题中
|
||||
icon = '<i class="fa fa-fw fa-'+$this.data('icon-font')+' icon '+bg+'"></i>';
|
||||
icon = '<i class="fa fa-fw fa-' + $this.data('icon-font') + ' icon ' + bg + '"></i>';
|
||||
}
|
||||
if(!title && $this.children('.icon').length===1 && $this.children('.title').length===1){
|
||||
if (!title && $this.children('.icon').length === 1 && $this.children('.title').length === 1) {
|
||||
title = $this.children('.title').html();
|
||||
if(!icon){
|
||||
if (!icon) {
|
||||
icon = $this.children('.icon').prop("outerHTML");
|
||||
}
|
||||
}
|
||||
//>> 判断是否需要 设置 区域宽度高度
|
||||
if($this.data('area-offset')) {
|
||||
if ($this.data('area-offset')) {
|
||||
areaAndOffset = $this.data('area-offset');
|
||||
//>> 判断是否有分隔符
|
||||
if(areaAndOffset.indexOf(',')!==-1){
|
||||
if (areaAndOffset.indexOf(',') !== -1) {
|
||||
areaAndOffset = eval(areaAndOsffset);
|
||||
}
|
||||
}
|
||||
//>> 调用win10打开url方法
|
||||
Win10.openUrl($this.data('url'),icon, title, areaAndOffset);
|
||||
Win10.openUrl($this.data('url'), icon, title, areaAndOffset);
|
||||
}
|
||||
})
|
||||
})(),
|
||||
|
||||
|
||||
$('body').on('click','.win10-drawer',function () {
|
||||
var content=$(this).find('.win10-drawer-box').html();
|
||||
var title=$(this).children('.title').html();
|
||||
var index=layer.open({
|
||||
type: 1,
|
||||
shadeClose:true,
|
||||
skin:'drawer',
|
||||
area:[Win10.isSmallScreen()?"80%":"60%","80%"],
|
||||
closeBtn: 0,
|
||||
title:title,
|
||||
content: content,
|
||||
});
|
||||
var layero=Win10.getLayeroByIndex(index);
|
||||
layero.find('.shortcut-drawer').click(function () {
|
||||
layer.close(index);
|
||||
})
|
||||
})
|
||||
$('body').on('click', '.win10-drawer', function () {
|
||||
var content = $(this).find('.win10-drawer-box').html();
|
||||
var title = $(this).children('.title').html();
|
||||
var index = layer.open({
|
||||
type: 1,
|
||||
shadeClose: true,
|
||||
skin: 'drawer',
|
||||
area: [Win10.isSmallScreen() ? "80%" : "60%", "50%"],
|
||||
closeBtn: 0,
|
||||
title: title,
|
||||
content: content,
|
||||
});
|
||||
var layero = Win10.getLayeroByIndex(index);
|
||||
layero.find('.shortcut-drawer').click(function () {
|
||||
layer.close(index);
|
||||
})
|
||||
})
|
||||
});
|
||||
|
|
@ -1 +1 @@
|
|||
.win10-drawer-box{height:0;overflow:hidden}.shortcut-drawer{width:80px;overflow:hidden;cursor:pointer;padding:0;transition:all .5s;display:inline-block}.shortcut-drawer:hover{background-color:rgba(255,255,255,.11)}.shortcut-drawer>.icon{width:50px;height:50px;overflow:hidden;margin:0 auto;color:#fff;box-sizing:border-box;margin-bottom:5px;margin-top:5px;text-align:center;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;font-size:37px;line-height:50px}.shortcut-drawer .title{color:#fff;font-size:12px;text-align:center;line-height:18px;margin-bottom:5px;height:36px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.drawer.layui-layer{border-radius:.5em;overflow:auto;background:0 0}.drawer.layui-layer>.layui-layer-title{background-color:rgba(250, 250, 250, 0.9);text-align:center;padding:0;color:#333;border:0;height: 30px;line-height: 30px;border-radius: 4px 4px 0px 0px;}.drawer.layui-layer>.layui-layer-content{background-color:rgba(255,255,255,0.7);padding:1em}.drawer .black-green{background:#009688!important}.drawer .green{background:#5FB878!important}.drawer .black{background:#393D49!important}.drawer .blue{background:#1E9FFF!important}.drawer .orange{background:#F7B824!important}.drawer .red{background:#FF5722!important}.drawer .dark{background:#2F4056!important}.drawer .purple{background:#b074e6!important}
|
||||
.win10-drawer-box{height:0;overflow:hidden}.shortcut-drawer{width:80px;overflow:hidden;cursor:pointer;padding:0;transition:all .5s;display:inline-block}.shortcut-drawer:hover{background-color:rgba(255,255,255,.11)}.shortcut-drawer>.icon{width:50px;height:50px;overflow:hidden;margin:0 auto;color:#fff;box-sizing:border-box;margin-bottom:5px;margin-top:5px;text-align:center;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:block;font-size:37px;line-height:50px}.shortcut-drawer .title{color:#fff;font-size:12px;text-align:center;line-height:18px;margin-bottom:5px;height:36px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.drawer.layui-layer{border-radius:.5em;overflow:auto;background:0 0}.drawer.layui-layer>.layui-layer-title{background:0 0;text-align:center;padding:0;color:#fff;font-size:20px;height:30px;line-height:30px;border-radius:4px 4px 0 0;border:0}.drawer.layui-layer{box-shadow:none}.drawer.layui-layer>.layui-layer-content{background-color:rgba(255,255,255,.5);padding:1em;border-radius:1em}.drawer .black-green{background:#009688!important}.drawer .green{background:#5fb878!important}.drawer .black{background:#393d49!important}.drawer .blue{background:#1e9fff!important}.drawer .orange{background:#f7b824!important}.drawer .red{background:#ff5722!important}.drawer .dark{background:#2f4056!important}.drawer .purple{background:#b074e6!important}
|
||||
|
|
@ -1 +1 @@
|
|||
Win10.onReady(function(){(function(){$('body').on('click','.shortcut-drawer.win10-open-window',function(){$this=$(this);if($this.data('url')!==""){var title=$this.data('title')||'',areaAndOffset,icon;var bg=$this.data('icon-bg')?$this.data('icon-bg'):'';if($this.data('icon-image')){icon='<img class="icon '+bg+'" src="'+$this.data('icon-image')+'"/>'}if($this.data('icon-font')){icon='<i class="fa fa-fw fa-'+$this.data('icon-font')+' icon '+bg+'"></i>'}if(!title&&$this.children('.icon').length===1&&$this.children('.title').length===1){title=$this.children('.title').html();if(!icon){icon=$this.children('.icon').prop("outerHTML")}}if($this.data('area-offset')){areaAndOffset=$this.data('area-offset');if(areaAndOffset.indexOf(',')!==-1){areaAndOffset=eval(areaAndOsffset)}}Win10.openUrl($this.data('url'),icon,title,areaAndOffset)}})})(),$('body').on('click','.win10-drawer',function(){var content=$(this).find('.win10-drawer-box').html();var title=$(this).children('.title').html();var index=layer.open({type:1,shadeClose:true,skin:'drawer',area:[Win10.isSmallScreen()?"80%":"60%","80%"],closeBtn:0,title:title,content:content,});var layero=Win10.getLayeroByIndex(index);layero.find('.shortcut-drawer').click(function(){layer.close(index)})})});
|
||||
Win10.onReady((function(){(function(){$("body").on("click",".shortcut-drawer.win10-open-window",(function(){if($this=$(this),""!==$this.data("url")){var title=$this.data("title")||"",areaAndOffset,icon,bg=$this.data("icon-bg")?$this.data("icon-bg"):"";$this.data("icon-image")&&(icon='<img class="icon '+bg+'" src="'+$this.data("icon-image")+'"/>'),$this.data("icon-font")&&(icon='<i class="fa fa-fw fa-'+$this.data("icon-font")+" icon "+bg+'"></i>'),title||1!==$this.children(".icon").length||1!==$this.children(".title").length||(title=$this.children(".title").html(),icon||(icon=$this.children(".icon").prop("outerHTML"))),$this.data("area-offset")&&(areaAndOffset=$this.data("area-offset"),-1!==areaAndOffset.indexOf(",")&&(areaAndOffset=eval(areaAndOsffset))),Win10.openUrl($this.data("url"),icon,title,areaAndOffset)}}))})(),$("body").on("click",".win10-drawer",(function(){var content=$(this).find(".win10-drawer-box").html(),title=$(this).children(".title").html(),index=layer.open({type:1,shadeClose:!0,skin:"drawer",area:[Win10.isSmallScreen()?"80%":"60%","50%"],closeBtn:0,title:title,content:content}),layero;Win10.getLayeroByIndex(index).find(".shortcut-drawer").click((function(){layer.close(index)}))}))}));
|
||||
Loading…
Reference in New Issue