mirror of https://github.com/1099438829/macUI.git
一些修改
This commit is contained in:
1099438829@qq.com
parent
6c820125c2
commit
cef3912795
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<!-- HTTP 1.0 -->
|
||||
<meta http-equiv="cache-control" content="no-cache">
|
||||
<!-- Prevent caching at the proxy server -->
|
||||
<meta http-equiv="expires" content="0">
|
||||
<title>MAC-UI最新资讯</title>
|
||||
<style>
|
||||
*{
|
||||
color:gray;
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
||||
}
|
||||
.title{
|
||||
color:orange;
|
||||
}
|
||||
.content *{
|
||||
font-size: 12px;
|
||||
}
|
||||
.content ul{
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
.content li{
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
.red{
|
||||
color:red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h3 class="title">YLUI已出炉</h3>
|
||||
<div class="content">
|
||||
<h4>编辑日期 2018/06/20</h4>
|
||||
<p>MAC-UI华丽上线</p>
|
||||
<p>今后产品动态，疑问解答等内容都会在<a href="http://www.bycodes.net/" target="_blank"><b>码外社区</b></a>内进行，感谢各位一如既往的支持与厚爱。</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,3 +1,30 @@
|
|||
<<<<<<< HEAD
|
||||
.cm-tab-wrap-hack::after { content: ""; }
|
||||
.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; }
|
||||
.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; }
|
||||
.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: 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; }
|
||||
.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; }
|
||||
.com-user .third img { width: 32px; height: 32px; cursor: pointer; margin: 10px; }
|
||||
.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; }
|
||||
.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: 0.8; }
|
||||
.com-user .cancel span { color: rgb(255, 255, 255); font-size: 12px; margin-top: 10px; }
|
||||
body, html { margin: 0px; padding: 0px; font-family: sans-serif; height: 100%; width: 100%; overflow: hidden; }
|
||||
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; }
|
||||
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); }
|
||||
* { 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: rgb(255, 255, 255); font-size: 12px; }
|
||||
=======
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
|
|
@ -62,3 +89,4 @@ i,em{font-style:normal;}
|
|||
.foot em{ float:left}
|
||||
.foot span{ float:right; padding-right:10px; color:#dae1e4;}
|
||||
.foot span a{ padding:0 12px; font-size:14px; color:#dae1e4; }
|
||||
>>>>>>> 6c820125c208f963bce20f07283261761fc8e1c8
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@ body {
|
|||
background: black no-repeat fixed;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
/*padding-top: 20px;*/
|
||||
}
|
||||
|
||||
#win10 *{
|
||||
|
|
@ -75,9 +74,13 @@ body {
|
|||
height: 30px;
|
||||
line-height:30px;
|
||||
/* IE9+ */
|
||||
<<<<<<< HEAD
|
||||
background:rgba(255,255,255,0.5);
|
||||
=======
|
||||
background-color:rgba(255,255,255,0.5);
|
||||
/* IE6-IE8 */
|
||||
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#68FFFFFF,endColorStr=#68FFFFFF);
|
||||
>>>>>>> 6c820125c208f963bce20f07283261761fc8e1c8
|
||||
z-index: 19930813;
|
||||
}
|
||||
|
||||
|
|
@ -186,7 +189,7 @@ body {
|
|||
}
|
||||
#win10-menu {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
top: 31px;
|
||||
background-color: rgba(255,255,255,0.55);
|
||||
height:auto;
|
||||
width: 12.5%;
|
||||
|
|
@ -203,8 +206,13 @@ body {
|
|||
}
|
||||
|
||||
#win10-menu .list::-webkit-scrollbar,#win10_command_center::-webkit-scrollbar {
|
||||
<<<<<<< HEAD
|
||||
width: 0;
|
||||
height: 0;
|
||||
=======
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
>>>>>>> 6c820125c208f963bce20f07283261761fc8e1c8
|
||||
}
|
||||
|
||||
#win10-menu .list::-webkit-scrollbar-track,#win10_command_center::-webkit-scrollbar-track {
|
||||
|
|
@ -253,7 +261,7 @@ body {
|
|||
#win10-menu .list .item,.sub-item{
|
||||
color:#333;
|
||||
margin: 1px 0;
|
||||
line-height: 40px;
|
||||
line-height: 2em;
|
||||
padding: 0 10px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
@ -263,13 +271,13 @@ body {
|
|||
}
|
||||
|
||||
#win10-menu .list .item>.icon,#win10-menu .list .sub-item>.icon,.sub-item>.icon{
|
||||
line-height: 36px;
|
||||
font-size: 22px;
|
||||
line-height:2em;
|
||||
font-size: 1.2em;
|
||||
float: left;
|
||||
margin-right: 0.5em;
|
||||
width: 36px;
|
||||
/*width: 36px;*/
|
||||
position: relative;
|
||||
top:2px;
|
||||
/*top:2px;*/
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -324,8 +332,11 @@ body {
|
|||
}
|
||||
|
||||
#win10 #win10-shortcuts {
|
||||
height: calc(100% - 40px);
|
||||
position: relative;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#win10 #win10-shortcuts.shortcuts-hidden .shortcut{display: none}
|
||||
|
|
@ -372,10 +383,10 @@ body {
|
|||
#win10_command_center {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 30px;
|
||||
top: 31px;
|
||||
width: 350px;
|
||||
background-color: rgba(255,255,255,0.55);
|
||||
height: calc(100% - 30px);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
height: calc(100% - 32px);
|
||||
transition: all 0.5s;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
|
@ -446,7 +457,6 @@ body {
|
|||
width: calc(100% - 20px);
|
||||
min-height: 40px;
|
||||
padding:10px;
|
||||
margin-top: 4px;
|
||||
transition: background-color 0.5s;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -562,49 +572,49 @@ body {
|
|||
.win10-open-iframe .layui-layer-setwin a.layui-layer-close1:hover::before{
|
||||
content:"\f057";
|
||||
color: #FF6057;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-min::before{
|
||||
content:"\f111";
|
||||
color: #28CA40;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-min:hover::before{
|
||||
content:"\f056";
|
||||
color: #28CA40;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-max::before{
|
||||
content:"\f111";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-max:hover::before{
|
||||
content:"\f055";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-maxmin.layui-layer-max::before{
|
||||
content:"\f111";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-maxmin.layui-layer-max:hover::before{
|
||||
content:"\f055";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-close::before{
|
||||
content:"\f111";
|
||||
color: #FF6057;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
||||
|
|
@ -617,13 +627,13 @@ body {
|
|||
.win10-open-iframe .win10-btn-refresh::before,.win10-btn-change-url::before{
|
||||
content:"\f111";
|
||||
color: #029FFF;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .win10-btn-refresh:hover::before,.win10-btn-change-url:hover::before{
|
||||
content:"\f192";
|
||||
color: #029FFF;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
||||
|
|
@ -644,49 +654,49 @@ body {
|
|||
.win10-layer-open-browser .layui-layer-setwin a.layui-layer-close:hover::before{
|
||||
content:"\f057";
|
||||
color: #FF6057;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-min::before{
|
||||
content:"\f111";
|
||||
color: #28CA40;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-min:hover::before{
|
||||
content:"\f056";
|
||||
color: #28CA40;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-max::before{
|
||||
content:"\f111";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-max:hover::before{
|
||||
content:"\f055";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-maxmin.layui-layer-max::before{
|
||||
content:"\f111";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-maxmin.layui-layer-max:hover::before{
|
||||
content:"\f055";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-close::before{
|
||||
content:"\f111";
|
||||
color: #FF6057;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
font: normal normal normal 16px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
||||
|
|
@ -694,10 +704,10 @@ body {
|
|||
}
|
||||
|
||||
/*右键菜单*/
|
||||
#win10 .win10-context-menu { left: 0;top: 0;position: fixed; width: 150px; height: auto; background-color: rgb(255, 255, 255); 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: rgb(255, 255, 255,0.75); border: #CCC 1px solid; 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:hover { background-color: #DDD; }
|
||||
#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: rgb(233,233,233) 1px solid;border-top: none }
|
||||
|
||||
|
|
@ -725,6 +735,11 @@ body {
|
|||
height: 30px;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-title{
|
||||
line-height:30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-title .icon ,#win10_btn_group_middle .btn_title .icon{
|
||||
font-size: 15px;
|
||||
padding: 1px;
|
||||
|
|
@ -754,7 +769,7 @@ body {
|
|||
/*桌面舞台样式*/
|
||||
#win10-desktop-scene{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
|
|
@ -802,24 +817,6 @@ body {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
|
||||
.dock{
|
||||
/*width: 72%; */
|
||||
height: 100%;
|
||||
line-height: 60px;
|
||||
background-color: #fff;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
filter:Alpha(opacity=0.45);
|
||||
position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
|
||||
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
|
||||
}
|
||||
.dock ul{
|
||||
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/
|
||||
.win10-open-iframe .black-green, #win10 .black-green{background:#009688!important;}
|
||||
.win10-open-iframe .green,#win10 .green{background:#5FB878!important;}
|
||||
|
|
@ -835,7 +832,7 @@ body {
|
|||
height: calc(100% - 31px);
|
||||
}
|
||||
#win10-menu.hidden{
|
||||
top: -100% ;
|
||||
top: calc(-100% + 31px);
|
||||
}
|
||||
#win10_command_center{
|
||||
width: 100%;
|
||||
|
|
@ -877,7 +874,6 @@ body {
|
|||
max-width:150px;
|
||||
}
|
||||
#win10-menu .list{
|
||||
padding-left: 2px;
|
||||
position: absolute;
|
||||
width:100%;
|
||||
left: 0;
|
||||
|
|
@ -893,7 +889,11 @@ body {
|
|||
}
|
||||
|
||||
#win10-menu .list .item, .sub-item{
|
||||
<<<<<<< HEAD
|
||||
width: calc(100% - 20px);
|
||||
=======
|
||||
width: 100%;
|
||||
>>>>>>> 6c820125c208f963bce20f07283261761fc8e1c8
|
||||
}
|
||||
|
||||
#win10_btn_time{display: none}
|
||||
|
|
|
|||
52
demo.html
52
demo.html
|
|
@ -13,6 +13,13 @@
|
|||
<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>
|
||||
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
|
||||
|
|
@ -26,10 +33,22 @@
|
|||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('官方交流一群', '欢迎各位大侠加入讨论：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=4Er0u8i">[点击加入]205546163</a>')
|
||||
}, 2500);
|
||||
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({
|
||||
|
|
@ -81,6 +100,31 @@
|
|||
<div class="shortcut win10-open-window flipInX animated" data-url="./plugins/theme_switcher/theme_switcher.html" style="left: 92px; top: 510px;">
|
||||
<i class="icon fa fa-fw fa-picture-o blue"></i>
|
||||
<div class="title">切换壁纸</div>
|
||||
</div>
|
||||
<div class="shortcut win10-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png"/><!--
|
||||
<i class="icon fa fa-fw fa-folder" style="color: blue;font-size: 50px;"></i> -->
|
||||
<div class="title">新建文件夹</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png"/>
|
||||
<div class="title">新建文件夹</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项1</div>
|
||||
</div>
|
||||
<div class="shortcut-drawer">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,7 +141,7 @@
|
|||
<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="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_command_center" class="hidden_right">
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 392 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 720 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 596 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 596 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 615 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 331 KiB After Width: | Height: | Size: 643 KiB |
38
index.html
38
index.html
|
|
@ -13,6 +13,8 @@
|
|||
<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>
|
||||
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
|
||||
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
||||
|
|
@ -31,10 +33,11 @@
|
|||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
|
||||
setTimeout(function () {
|
||||
Win10.newMsg('官方交流一群', '欢迎各位大侠加入讨论：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=4Er0u8i">[点击加入]205546163</a>')
|
||||
}, 2500);
|
||||
Win10.newMsg('推荐全屏', '按下F11全屏以达到最佳视觉效果(点击进入)',function () {
|
||||
Win10.enableFullScreen();
|
||||
})
|
||||
}, 1500);
|
||||
|
||||
setTimeout(function () {
|
||||
layer.open({
|
||||
|
|
@ -62,15 +65,44 @@
|
|||
<div class="shortcut" onclick="window.open('./demo.html')">
|
||||
<img class="icon" src="./img/icon/demo.png"/>
|
||||
<div class="title">查看DEMO</div>
|
||||
</div>
|
||||
<div class="shortcut win10-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png"/>
|
||||
<div class="title">新建文件夹</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-drawer">
|
||||
<img class="icon" src="./img/icon/folder.png"/>
|
||||
<div class="title">三级菜单</div>
|
||||
<div class="win10-drawer-box">
|
||||
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shortcut-drawer win10-open-window" data-url="www.baidu.com">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项1</div>
|
||||
</div>
|
||||
<div class="shortcut-drawer">
|
||||
<i class="icon fa fa-fw fa-th-list orange"></i>
|
||||
<div class="title">子项2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="win10-menu" class="hidden">
|
||||
<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>
|
||||
<<<<<<< HEAD
|
||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-power-off fa-fw"></i>关闭</div>
|
||||
</div>
|
||||
=======
|
||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-window-close fa-fw"></i>关闭</div>
|
||||
</div>
|
||||
<div id="win10-menu-switcher"></div>
|
||||
>>>>>>> 6c820125c208f963bce20f07283261761fc8e1c8
|
||||
</div>
|
||||
<div id="win10_command_center" class="hidden_right">
|
||||
<div class="title">
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
!function(t){"use strict";function e(e){return this.each(function(){var i=t(this),n=i.data("plugin.backgroundBlur"),o=t.extend({},r.DEFAULTS,i.data(),"object"==typeof e&&e);n||i.data("plugin.backgroundBlur",n=new r(this,o)),"fadeIn"===e?n.fadeIn():"fadeOut"===e?n.fadeOut():"string"==typeof e&&n.generateBlurredImage(e)})}var i=function(){for(var t,e=3,i=document.createElement("div"),n=i.getElementsByTagName("i");i.innerHTML="<!--[if gt IE "+ ++e+"]><i></i><![endif]-->",n[0];);return e>4?e:t}(),n=function(){return"_"+Math.random().toString(36).substr(2,9)},o={svgns:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink",createElement:function(t,e){var i=document.createElementNS(o.svgns,t);return e&&o.setAttr(i,e),i},setAttr:function(t,e){for(var i in e)"href"===i?t.setAttributeNS(o.xlink,i,e[i]):t.setAttribute(i,e[i]);return t}},r=function(e,i){this.internalID=n(),this.$element=t(e),this.$width=this.$element.width(),this.$height=this.$element.height(),this.element=e,this.options=t.extend({},r.DEFAULTS,i),this.$overlayEl=this.createOverlay(),this.$blurredImage={},this.useVelocity=this.detectVelocity(),this.attachListeners(),this.generateBlurredImage(this.options.imageURL)};r.VERSION="0.0.1",r.DEFAULTS={imageURL:"",blurAmount:10,imageClass:"",overlayClass:"",duration:!1,opacity:1},r.prototype.detectVelocity=function(){return!!window.jQuery.Velocity},r.prototype.attachListeners=function(){this.$element.on("ui.blur.loaded",t.proxy(this.fadeIn,this)),this.$element.on("ui.blur.unload",t.proxy(this.fadeOut,this))},r.prototype.fadeIn=function(){this.options.duration&&this.options.duration>0&&(this.useVelocity?this.$blurredImage.velocity({opacity:this.options.opacity},{duration:this.options.duration}):this.$blurredImage.animate({opacity:this.options.opacity},{duration:this.options.duration}))},r.prototype.fadeOut=function(){this.options.duration&&this.options.duration>0?this.useVelocity?this.$blurredImage.velocity({opacity:0},{duration:this.options.duration}):this.$blurredImage.animate({opacity:0},{duration:this.options.duration}):this.$blurredImage.css({opacity:0})},r.prototype.generateBlurredImage=function(t){var e=this.$blurredImage;this.internalID=n(),e.length>0&&(this.options.duration&&this.options.duration>0?this.useVelocity?e.first().velocity({opacity:0},{duration:this.options.duration,complete:function(){e.remove()}}):e.first().animate({opacity:0},{duration:this.options.duration,complete:function(){e.remove()}}):e.remove()),this.$blurredImage=i?this.createIMG(t,this.$width,this.$height):this.createSVG(t,this.$width,this.$height)},r.prototype.createOverlay=function(){return this.options.overlayClass&&""!==this.options.overlayClass?t("<div></div>").prependTo(this.$element).addClass(this.options.overlayClass):!1},r.prototype.createSVG=function(e,i,n){var r=this,s=o.createElement("svg",{xmlns:o.svgns,version:"1.1",width:i,height:n,id:"blurred"+this.internalID,"class":this.options.imageClass,viewBox:"0 0 "+i+" "+n,preserveAspectRatio:"none"}),a="blur"+this.internalID,u=o.createElement("filter",{id:a}),l=o.createElement("feGaussianBlur",{"in":"SourceGraphic",stdDeviation:this.options.blurAmount}),h=o.createElement("image",{x:0,y:0,width:i,height:n,externalResourcesRequired:"true",href:e,style:"filter:url(#"+a+")",preserveAspectRatio:"none"});h.addEventListener("load",function(){r.$element.trigger("ui.blur.loaded")},!0),h.addEventListener("SVGLoad",function(){r.$element.trigger("ui.blur.loaded")},!0),u.appendChild(l),s.appendChild(u),s.appendChild(h);var d=t(s);return r.options.duration&&r.options.duration>0&&(d.css({opacity:0}),window.setTimeout(function(){"0"===d.css("opacity")&&d.css({opacity:1})},this.options.duration+100)),this.element.insertBefore(s,this.element.firstChild),d},r.prototype.createIMG=function(t,e,i){var n=this,o=this.prependImage(t),r=2*this.options.blurAmount>100?100:2*this.options.blurAmount;return o.css({filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius="+r+") ",top:2.5*-this.options.blurAmount,left:2.5*-this.options.blurAmount,width:e+2.5*this.options.blurAmount,height:i+2.5*this.options.blurAmount}).attr("id","blurred"+this.internalID),o.load(function(){n.$element.trigger("ui.blur.loaded")}),this.options.duration&&this.options.duration>0&&window.setTimeout(function(){"0"===o.css("opacity")&&o.css({opacity:1})},this.options.duration+100),o},r.prototype.prependImage=function(e){var i,n=t('<img src="'+e+'" />');return i=this.$overlayEl?n.insertBefore(this.$overlayEl).attr("id",this.internalID).addClass(this.options.imageClass):n.prependTo(this.$element).attr("id",this.internalID).addClass(this.options.imageClass)};var s=t.fn.backgroundBlur;t.fn.backgroundBlur=e,t.fn.backgroundBlur.Constructor=r,t.fn.backgroundBlur.noConflict=function(){return t.fn.backgroundBlur=s,this}}(jQuery);
|
||||
122
js/mac.js
122
js/mac.js
|
|
@ -8,6 +8,7 @@ window.Win10 = {
|
|||
main:'',
|
||||
mobile:'',
|
||||
},
|
||||
_wallpaperBlur: true, //壁纸模糊（影响性能）
|
||||
_countTask: 0,
|
||||
_newMsgCount:0,
|
||||
_animated_classes:[],
|
||||
|
|
@ -112,6 +113,48 @@ window.Win10 = {
|
|||
}
|
||||
}
|
||||
|
||||
//开始渲染壁纸模糊
|
||||
if(Win10._wallpaperBlur){
|
||||
this.loadScript('js/background-blur.min.js',function(){
|
||||
var $avatarHolderEl = $('#win10');
|
||||
$avatarHolderEl.backgroundBlur({
|
||||
imageURL : Win10._bgs.main,
|
||||
blurAmount : 20,
|
||||
imageClass : 'avatar-blur'
|
||||
});
|
||||
});
|
||||
$.getScript("js/background-blur.min.js",function(){ //加载test.js,成功后，并执行回调函数
|
||||
var $avatarHolderEl = $('#win10');
|
||||
$avatarHolderEl.backgroundBlur({
|
||||
imageURL : Win10._bgs.main,
|
||||
blurAmount : 20,
|
||||
imageClass : 'avatar-blur'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
//动态加载JS文件
|
||||
loadScript : function(url,callback){
|
||||
var el = document.createElement("script");
|
||||
el.type = "text/javascript";
|
||||
|
||||
if(typeof(callback) != "undefined"){
|
||||
if (el.readyState) {
|
||||
el.onreadystatechange = function () {
|
||||
if (el.readyState == "loaded" || el.readyState == "complete") {
|
||||
el.onreadystatechange = null;
|
||||
callback();
|
||||
}
|
||||
};
|
||||
} else {
|
||||
el.onload = function () {
|
||||
callback();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
el.src = url;
|
||||
document.head.appendChild(el);
|
||||
},
|
||||
_startAnimate:function () {
|
||||
setInterval(function () {
|
||||
|
|
@ -349,23 +392,6 @@ window.Win10 = {
|
|||
var iframe = Win10.getLayeroByIndex(index).find('iframe');
|
||||
iframe.attr('src', iframe.attr('src'));
|
||||
});
|
||||
$(document).on('click', '.win10-btn-change-url', function () {
|
||||
var index = $(this).attr('index');
|
||||
var iframe = Win10.getLayeroByIndex(index).find('iframe');
|
||||
layer.prompt({
|
||||
title: Win10.lang('编辑网址','Edit URL'),
|
||||
formType: 2,
|
||||
skin:'win10-layer-open-browser',
|
||||
value: iframe.attr('src'),
|
||||
area: ['500px', '200px'],
|
||||
zIndex:99999999999
|
||||
}, function (value, i) {
|
||||
layer.close(i);
|
||||
layer.msg(Win10.lang('请稍候...','Hold on please...'),{time:1500},function () {
|
||||
iframe.attr('src', value);
|
||||
});
|
||||
});
|
||||
});
|
||||
$(document).on('mousedown','.win10-open-iframe',function () {
|
||||
var layero=$(this);
|
||||
Win10._settop(layero);
|
||||
|
|
@ -412,19 +438,14 @@ window.Win10 = {
|
|||
var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[myDate.getDay()];
|
||||
var hour=myDate.getHours();
|
||||
var mins=myDate.getMinutes();if (mins<10){mins='0'+mins}
|
||||
if (hour >= 0 && hour < 6) {
|
||||
hours='凌晨'+hour;
|
||||
}else if (hour >= 6 && hour < 8) {
|
||||
hours='早上'+hour;
|
||||
} else if (hour >= 8 && hour < 11) {
|
||||
hours='上午'+hour;
|
||||
} else if (hour >= 11 && hour < 13) {
|
||||
hours='中午'+hour;
|
||||
} else if (hour >= 13 && hour < 18) {
|
||||
hours='下午'+hour;
|
||||
} else {
|
||||
hours='晚上'+hour;
|
||||
}
|
||||
if(hour < 6){hours='凌晨'+hour;}
|
||||
else if (hour < 9){hours='早上'+hour;}
|
||||
else if (hour < 12){hours='上午'+hour;}
|
||||
else if (hour < 14){hours='中午'+(hour-12);}
|
||||
else if (hour < 17){hours='下午'+(hour-12);}
|
||||
else if (hour < 19){hours='傍晚'+(hour-12);}
|
||||
else if (hour < 22){hours='晚上'+(hour-12);}
|
||||
else {hours='深夜'+(hour-12)}
|
||||
$("#win10_btn_time").html(week+hours+':'+mins);
|
||||
},1000);
|
||||
//离开前警告
|
||||
|
|
@ -551,7 +572,11 @@ window.Win10 = {
|
|||
top: 30,
|
||||
'z-index': 100,
|
||||
});
|
||||
<<<<<<< HEAD
|
||||
$("#win10 .desktop").append("<div id='win10-desktop-scene' style='width: 100%;height: 100%;position: absolute;left: 0;top: 0; z-index: 0;background-color: transparent;'></div>")
|
||||
=======
|
||||
$("#win10 .desktop").append("<div id='win10-desktop-scene' style='width: 100%;height: calc(100% - 30px);position: absolute;left: 0;top: 30px; z-index: 0;background-color: transparent;'></div>")
|
||||
>>>>>>> 6c820125c208f963bce20f07283261761fc8e1c8
|
||||
}
|
||||
|
||||
//属性绑定
|
||||
|
|
@ -608,6 +633,36 @@ window.Win10 = {
|
|||
},
|
||||
//渲染DOCK
|
||||
renderDocks:function () {
|
||||
<<<<<<< HEAD
|
||||
if(!Win10.isSmallScreen()){
|
||||
$('#dock').Fisheye(
|
||||
{
|
||||
maxWidth: 60,
|
||||
items: 'a',
|
||||
itemsText: 'span',
|
||||
container: '.dock-container',
|
||||
itemWidth: 47,
|
||||
proximity: 80,
|
||||
alignment : 'left',
|
||||
valign: 'bottom',
|
||||
halign : 'center'
|
||||
}
|
||||
)
|
||||
}else{
|
||||
var cell_width=50;
|
||||
var width=document.body.clientWidth ;
|
||||
var docks=$(".dock .dock-container a");
|
||||
var max_num=parseInt(width/cell_width)-1;
|
||||
for (var i = 0; i < docks.length; i++) {
|
||||
if (i>max_num) {
|
||||
docks.eq(i).hide();
|
||||
}else{
|
||||
docks.eq(i).css('display','list-item');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
=======
|
||||
var cell_width=50;
|
||||
var width=document.body.clientWidth ;
|
||||
var docks=$(".dock .dock-container a");
|
||||
|
|
@ -650,6 +705,7 @@ window.Win10 = {
|
|||
}
|
||||
}
|
||||
}
|
||||
>>>>>>> 6c820125c208f963bce20f07283261761fc8e1c8
|
||||
},
|
||||
commandCenterToggle: function () {
|
||||
if($("#win10_command_center").hasClass('hidden_right')){
|
||||
|
|
@ -790,7 +846,7 @@ window.Win10 = {
|
|||
},
|
||||
full:function (layero) {
|
||||
layero.find('.layui-layer-min').css('display','inline-block');
|
||||
layero_opened.css('margin-top',30);
|
||||
layero_opened.css('top',30);
|
||||
},
|
||||
});
|
||||
$('#win10_btn_group_middle .btn.active').removeClass('active');
|
||||
|
|
@ -809,7 +865,7 @@ window.Win10 = {
|
|||
var height=layero_opened.css('height');
|
||||
height=parseInt(height.replace('px',''));
|
||||
if (height>=document.body.clientHeight){
|
||||
layero_opened.css('height',height-30);
|
||||
layero_opened.css('height',height-32);
|
||||
layero_opened.find('.layui-layer-content').css('height',height-72);
|
||||
layero_opened.find('.layui-layer-content iframe').css('height',height-72);
|
||||
}
|
||||
|
|
@ -904,7 +960,7 @@ window.Win10 = {
|
|||
content: '<div style="padding: 10px;font-size: 12px">' +
|
||||
'<p>支持组件:layer、jquery、animated.css、font-awesome</p>' +
|
||||
'<p>木子的忧伤、尤里2号©版权所有</p>' +
|
||||
'<p>作者邮箱:yuri2peter@qq.com</p>' +
|
||||
'<p>作者邮箱:1099438829@qq.com</p>' +
|
||||
'</div>'
|
||||
});
|
||||
},
|
||||
|
|
|
|||
44
login.html
44
login.html
|
|
@ -1,3 +1,46 @@
|
|||
<<<<<<< HEAD
|
||||
<!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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
=======
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
|
@ -80,3 +123,4 @@ $(document).ready(function() {
|
|||
<div id="fade" class="black_overlay"></div>
|
||||
</body>
|
||||
</html>
|
||||
>>>>>>> 6c820125c208f963bce20f07283261761fc8e1c8
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
.win10-drawer-box{
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shortcut-drawer{
|
||||
width: 80px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: all 0.5s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.shortcut-drawer:hover {
|
||||
background-color: rgba(255, 255, 255, 0.11);
|
||||
}
|
||||
|
||||
.shortcut-drawer>.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
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: white;
|
||||
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: 0.5em;
|
||||
overflow: auto;
|
||||
background: transparent;
|
||||
}
|
||||
.drawer.layui-layer>.layui-layer-title{
|
||||
background-color: srgba(250, 250, 250, 0.9);
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.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;}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
//该插件提供桌面图标二级分类的支持
|
||||
Win10.onReady(function () {
|
||||
//注册打开事件
|
||||
(function () {
|
||||
// 注册事件委派 打开url窗口
|
||||
$('body').on('click', '.shortcut-drawer.win10-open-window', function() {
|
||||
//>> 获取当前点击的对象
|
||||
$this = $(this);
|
||||
//>> 判断url地址是否为空 如果为空 不予处理
|
||||
if($this.data('url') !== "") {
|
||||
//>> 获取弹窗标题
|
||||
var title = $this.data('title')||'',
|
||||
areaAndOffset;
|
||||
//>> 判断是否有标题图片
|
||||
var bg=$this.data('icon-bg')?$this.data('icon-bg'):'';
|
||||
if($this.data('icon-image')) {
|
||||
//>> 加入到标题中
|
||||
title = '<img class="icon '+bg+'" src="' + $this.data('icon-image') + '"/>' + title;
|
||||
}
|
||||
if($this.data('icon-font')) {
|
||||
//>> 加入到标题中
|
||||
title = '<i class="fa fa-fw fa-'+$this.data('icon-font')+' icon '+bg+'"></i>' + title;
|
||||
}
|
||||
if(!title && $this.children('.icon').length===1 && $this.children('.title').length===1){
|
||||
title = $this.children('.icon').prop("outerHTML")+$this.children('.title').html();
|
||||
}
|
||||
//>> 判断是否需要 设置 区域宽度高度
|
||||
if($this.data('area-offset')) {
|
||||
areaAndOffset = $this.data('area-offset');
|
||||
//>> 判断是否有分隔符
|
||||
if(areaAndOffset.indexOf(',')!==-1){
|
||||
areaAndOffset = eval(areaAndOffset);
|
||||
}
|
||||
}
|
||||
//>> 调用win10打开url方法
|
||||
Win10.openUrl($this.data('url'), 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);
|
||||
})
|
||||
})
|
||||
});
|
||||
|
|
@ -0,0 +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}
|
||||
|
|
@ -0,0 +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;var bg=$this.data("icon-bg")?$this.data("icon-bg"):"";if($this.data("icon-image")){title='<img class="icon '+bg+'" src="'+$this.data("icon-image")+'"/>'+title}if($this.data("icon-font")){title='<i class="fa fa-fw fa-'+$this.data("icon-font")+" icon "+bg+'"></i>'+title}if(!title&&$this.children(".icon").length===1&&$this.children(".title").length===1){title=$this.children(".icon").prop("outerHTML")+$this.children(".title").html()}if($this.data("area-offset")){areaAndOffset=$this.data("area-offset");if(areaAndOffset.indexOf(",")!==-1){areaAndOffset=eval(areaAndOffset)}}Win10.openUrl($this.data("url"),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)})})});
|
||||
|
|
@ -83,8 +83,11 @@ $(function () {
|
|||
var theme_area=$("#theme_area");
|
||||
theme_area.on('click','.theme_setting',function () {
|
||||
var pic=$(this).data('pic');
|
||||
if(!Win10_parent.isSmallScreen()){
|
||||
Win10_parent.setBgUrl({main:pic});
|
||||
|
||||
}else{
|
||||
Win10_parent.setBgUrl({mobile:pic});
|
||||
}
|
||||
//此处你也许想用ajax把修改信息保存到服务器。。。
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue