From 513d53853e2212c9daa3efb85700367b623d13dd Mon Sep 17 00:00:00 2001 From: muzi_ys <1099438829@qq.com> Date: Sat, 21 Mar 2020 11:38:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=B8=80=E4=BA=9Bbug=20?= =?UTF-8?q?=E9=87=87=E7=94=A8=E5=85=A8=E5=B1=80=E9=AB=98=E6=96=AF=E6=A8=A1?= =?UTF-8?q?=E7=B3=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 ++++- child.html | 2 +- css/index.css | 45 ++++++++++++++++++++++++++++++--------------- demo.html | 43 +++++++++++++++++++++---------------------- index.html | 24 ++++++++++++------------ 5 files changed, 68 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 0081a31..c3a93f4 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ MAC_UI基于WIN10UI打造的mac风格的后台UI,让你轻松搭建一个眼前 ## 版本 -v1.1.2.3 +v1.1.2.5 > 该版本为小更新，针对插件开发作了一些准备，添加了一些语法糖（具体改动请参考更新日志）。 > 更新方式：基本无须修改html文件，覆盖css和win10.js文件。 @@ -28,6 +28,7 @@ v1.1.2.3 * 极少的API，大部分功能可用html元素定义完成 * 响应式兼容，在手机浏览器也有不错的观感 * 目前只保证对主流现代浏览器的兼容性支持 +* 支持 class 配置高斯模糊 blur background_blur ## 前置组件 @@ -183,6 +184,8 @@ Win10.openUrl("http://win10ui.yuri2.cn","Win10-UI官网') + Win10_child.openUrl('http://win10ui.yuri2.cn','','Win10-UI官网') } function f3() { Win10_child.close(); diff --git a/css/index.css b/css/index.css index 757ba10..73ed6df 100644 --- a/css/index.css +++ b/css/index.css @@ -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,10 +107,10 @@ 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); + background-color: rgba(255,255,255,0.65); + -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: 19930813; } @@ -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; @@ -383,9 +397,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 +637,6 @@ body { } #win10_command_center .msgs .msg>.title{ - color: #777; font-size: 14px; line-height: 28px; } @@ -641,7 +656,6 @@ body { #win10_command_center .msgs .msg>.content{ font-size: 12px; - color: #777; 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 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;} @@ -842,11 +856,12 @@ body { height: 100%; line-height: 60px; 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; - 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; } @media \0screen\,screen\9 {/* 只支持IE6、7、8 */ diff --git a/demo.html b/demo.html index 7ad9b3a..30551fe 100644 --- a/demo.html +++ b/demo.html @@ -9,7 +9,7 @@ - + @@ -60,6 +60,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
@@ -126,45 +138,32 @@
- -