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

修正一些bug 

采用全局高斯模糊
This commit is contained in:
muzi_ys 2020-03-21 11:38:47 +08:00
parent 7e452f1ad4
commit 513d53853e
5 changed files with 68 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -6,7 +6,7 @@ MAC_UI基于WIN10UI打造的mac风格的后台UI,让你轻松搭建一个眼前
## 版本 ## 版本
v1.1.2.3 v1.1.2.5
> 该版本为小更新，针对插件开发作了一些准备，添加了一些语法糖（具体改动请参考更新日志）。 > 该版本为小更新，针对插件开发作了一些准备，添加了一些语法糖（具体改动请参考更新日志）。
> 更新方式：基本无须修改html文件，覆盖css和win10.js文件。 > 更新方式：基本无须修改html文件，覆盖css和win10.js文件。
@ -28,6 +28,7 @@ v1.1.2.3
* 极少的API，大部分功能可用html元素定义完成 * 极少的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} * orange{background:#F7B824}
* red{background:#FF5722} * red{background:#FF5722}
* dark{background:#2F4056} * dark{background:#2F4056}
* blur 高斯模糊 前置模糊
* backgroud_blur 背景高斯模糊
#### 右键菜单配置 #### 右键菜单配置

2
child.html
View File

@ -28,7 +28,7 @@
Win10_child.newMsg('子页的问候','这是从iframe页调用APi发送的消息哦'); Win10_child.newMsg('子页的问候','这是从iframe页调用APi发送的消息哦');
} }
function f2() { function f2() {
Win10_child.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/win10.png\'/>Win10-UI官网') Win10_child.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/win10.png\'/>','Win10-UI官网')
} }
function f3() { function f3() {
Win10_child.close(); Win10_child.close();

45
css/index.css
View File

@ -58,6 +58,17 @@ body {
transition: -ms-filter 0.3s; 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 { #win10 .desktop .background {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -96,10 +107,10 @@ body {
top: 0; top: 0;
height: 24px; height: 24px;
line-height:24px; line-height:24px;
/* IE9+ */ background-color: rgba(255,255,255,0.65);
background-color:rgba(255,255,255,0.4); -webkit-box-shadow: 0 0.3125rem 0.07rem -0.3125rem rgba(0, 0, 0, 0.42);
/* IE6-IE8 */ -moz-box-shadow: 0 0.3125rem 0.07rem -0.3125rem rgba(0, 0, 0, 0.42);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#68FFFFFF,endColorStr=#68FFFFFF); box-shadow: 0 0.3125rem 0.07rem -0.3125rem rgba(0, 0, 0, 0.42);
z-index: 19930813; z-index: 19930813;
} }
@ -198,6 +209,9 @@ body {
top: 24px; top: 24px;
left: 0.5rem; left: 0.5rem;
background-color: rgba(255,255,255,0.55); 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; height: auto;
width: 12rem; width: 12rem;
max-width: 880px; max-width: 880px;
@ -383,9 +397,11 @@ body {
right: 0; right: 0;
top: 25px; top: 25px;
width: 300px; 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); height: calc(100% - 25px);
transition: all 0.5s;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
color: #333; color: #333;
@ -621,7 +637,6 @@ body {
} }
#win10_command_center .msgs .msg>.title{ #win10_command_center .msgs .msg>.title{
color: #777;
font-size: 14px; font-size: 14px;
line-height: 28px; line-height: 28px;
} }
@ -641,7 +656,6 @@ body {
#win10_command_center .msgs .msg>.content{ #win10_command_center .msgs .msg>.content{
font-size: 12px; font-size: 12px;
color: #777;
padding-bottom: 5px; padding-bottom: 5px;
} }
@ -760,12 +774,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 { 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: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 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;} .win10-open-iframe .layui-layer-ico{background-image:none;}
@ -842,11 +856,12 @@ body {
height: 100%; height: 100%;
line-height: 60px; line-height: 60px;
display: inline-block; display: inline-block;
overflow: hidden;
background-color: rgba(247, 244, 244, 0.117) ;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
-webkit-box-shadow:5px 5px 10px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
background-color: rgba(255,255,255,0.45) ;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
-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);
z-index: 100; z-index: 100;
} }
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */ @media \0screen\,screen\9 {/* 只支持IE6、7、8 */

43
demo.html
View File

@ -9,7 +9,7 @@
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script> <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">
<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 rel="stylesheet" href="./css/index.min.css"> <link rel="stylesheet" href="./css/index.css">
<script type="text/javascript" src="./component/layer-v3.1.1/layer/layer.js"></script> <script type="text/javascript" src="./component/layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript" src="./js/mac.min.js"></script> <script type="text/javascript" src="./js/mac.min.js"></script>
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css"> <link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
@ -60,6 +60,18 @@
</head> </head>
<body> <body>
<div id="win10"> <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 class="desktop">
<div id="win10-shortcuts" class="shortcuts-hidden"> <div id="win10-shortcuts" class="shortcuts-hidden">
<div class="shortcut" onclick="Win10.openUrl('http://mac.apecloud.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')"> <div class="shortcut" onclick="Win10.openUrl('http://mac.apecloud.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','OS官网')">
@ -126,45 +138,32 @@
</div> </div>
<div class="background blur"></div> <div class="background blur"></div>
</div> </div>
<div id="win10-menu" class="hidden backgroud_blur">
<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"><i class="icon fa fa-wrench fa-fw"></i><span>API测试</span></div> <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> <div class="sub-item" onclick="Win10.openUrl('./child.html','<span class=\'icon fa fa-cubes\'></span>','子页')">父子页沟通</div>
<div class="sub-item" onclick="Win10.commandCenterOpen()">打开消息中心</div> <div class="sub-item" onclick="Win10.commandCenterOpen()">打开消息中心</div>
<div class="sub-item" onclick="Win10.newMsg('API测试','通过API可以发送消息至消息中心，自定义标题与内容(点击我试试)',function() {alert('click')})">发送带回调的消息</div> <div class="sub-item" onclick="Win10.newMsg('API测试','通过API可以发送消息至消息中心，自定义标题与内容(点击我试试)',function() {alert('click')})">发送带回调的消息</div>
<div class="sub-item" onclick="Win10.menuClose()">关闭菜单</div> <div class="sub-item" onclick="Win10.menuClose()">关闭菜单</div>
<div class="item" ><i class="icon fa fa-gavel fa-fw"></i>辅助工具</div> <div class="item" ><i class="icon fa fa-gavel fa-fw"></i>辅助工具</div>
<div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-shortcut.html','图标代码生成器')">桌面图标代码生成器</div> <div class="sub-item" onclick="Win10.openUrl('win10ui.yuri2.cn/src/tools/builder-shortcut.html','<span class=\'icon fa fa-cubes\'></span>','图标代码生成器')">桌面图标代码生成器</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-tile.html','<span class=\'icon fa fa-cubes\'></span>','磁贴代码生成器')">磁贴代码生成器</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','<span class=\'icon fa fa-cubes\'></span>','菜单代码生成器')">菜单代码生成器</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-power-off 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 backgroud_blur">
<div class="command-header"> <div class="command-header">
<div class="tab-today active">今天</div> <div class="tab-today active">今天</div>
<div class="tab-msg">通知</div> <div class="tab-msg">通知</div>
</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> --> <!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
<div class="command-body msgs"></div> <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> </div>
<div id="footer"> <div id="footer">
<div class="dock"> <div class="dock backgroud_blur">
<ul> <ul>
<li><span class="dock-tips">finder<span class="arrow"></span></span><a onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <img src="./img/icon/finder.png"></a></li> <li><span class="dock-tips">finder<span class="arrow"></span></span><a onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <img src="./img/icon/finder.png"></a></li>
<li><span class="dock-tips">computer<span class="arrow"></span></span><a onclick="Win10.openUrl('http://mac.apecloud.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','我的电脑')"> <img src="./img/icon/computer.png"></a></li> <li><span class="dock-tips">computer<span class="arrow"></span></span><a onclick="Win10.openUrl('http://mac.apecloud.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','我的电脑')"> <img src="./img/icon/computer.png"></a></li>

16
index.html
View File

@ -8,7 +8,7 @@
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'> <link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
<link href="./css/animate.css" rel="stylesheet"> <link href="./css/animate.css" rel="stylesheet">
<link href="./component/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link href="./component/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="./css/index.min.css" rel="stylesheet"> <link href="./css/index.css" rel="stylesheet">
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css"> <link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script> <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="./component/layer-v3.1.1/layer/layer.js"></script>
@ -49,7 +49,7 @@
</head> </head>
<body> <body>
<div id="win10"> <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_group_left" class="btn_group">
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div> <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 class="btn" onclick="Win10.openUrl('./app/safari','<span class=\'icon fa fa-safari\'></span>','safari')"><span class="fa fa-safari"></span></div>
@ -63,9 +63,9 @@
</div> </div>
<div class="desktop"> <div class="desktop">
<div id="win10-shortcuts" class="shortcuts-hidden"> <div id="win10-shortcuts" class="shortcuts-hidden">
<div class="shortcut" onclick="Win10.openUrl('http://mac.apecloud.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\'/>','OS官网')">
<img class="icon" src="./img/icon/computer.png"/> <img class="icon" src="./img/icon/computer.png"/>
<div class="title">UI官网</div> <div class="title">OS官网</div>
</div> </div>
<div class="shortcut" onclick="window.open('./demo.html')"> <div class="shortcut" onclick="window.open('./demo.html')">
<img class="icon" src="./img/icon/demo.png"/> <img class="icon" src="./img/icon/demo.png"/>
@ -98,13 +98,13 @@
</div> </div>
<div class="background blur"></div> <div class="background blur"></div>
</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="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-power-off 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 backgroud_blur">
<div class="command-header"> <div class="command-header">
<div class="tab-today active">今天</div> <div class="tab-today active">今天</div>
<div class="tab-msg">通知</div> <div class="tab-msg">通知</div>
@ -114,10 +114,10 @@
<div class="command-body msgs"></div> <div class="command-body msgs"></div>
</div> </div>
<div id="footer"> <div id="footer">
<div class="dock"> <div class="dock backgroud_blur">
<ul> <ul>
<li><span class="dock-tips">finder<span class="arrow"></span></span><a onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <img src="./img/icon/finder.png"></a></li> <li><span class="dock-tips">finder<span class="arrow"></span></span><a onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <img src="./img/icon/finder.png"></a></li>
<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> <li><span class="dock-tips">computer<span class="arrow"></span></span><a onclick="Win10.openUrl('http://mac.apecloud.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','我的电脑')"> <img src="./img/icon/computer.png"></a></li>
<li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img src="./img/icon/gamecenter.png"></a></li> <li><span class="dock-tips">gamecenter<span class="arrow"></span></span><a href="#"> <img src="./img/icon/gamecenter.png"></a></li>
<li><span class="dock-tips">icloud<span class="arrow"></span></span><a href="#"> <img src="./img/icon/icloud.png"></a></li> <li><span class="dock-tips">icloud<span class="arrow"></span></span><a href="#"> <img src="./img/icon/icloud.png"></a></li>
<li><span class="dock-tips">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li> <li><span class="dock-tips">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li>