mirror of https://github.com/1099438829/macUI.git
大版本更新
This commit is contained in:
parent
95c3b4f25b
commit
f115f4a3ec
|
|
@ -0,0 +1,4 @@
|
|||
# Created by .ignore support plugin (hsz.mobi)
|
||||
.idea/
|
||||
/test.html
|
||||
/temp/
|
||||
330
README.md
330
README.md
|
|
@ -1 +1,329 @@
|
|||
# macUI
|
||||
## MAC_UI
|
||||
|
||||
MAC_UI基于WIN10UI打造的mac风格的后台UI,让你轻松搭建一个眼前一亮的后台界面
|
||||
|
||||
| [点击链接加入群【MAC-UI官方交流群】](https://jq.qq.com/?_wv=1027&k=4Er0u8i)
|
||||
|
||||
## 版本
|
||||
|
||||
v1.1.2.3
|
||||
|
||||
> 该版本为小更新，针对插件开发作了一些准备，添加了一些语法糖（具体改动请参考更新日志）。
|
||||
> 更新方式：基本无须修改html文件，覆盖css和win10.js文件。
|
||||
> 关于html文件的修改，只是添加一行代码。在#win10>.desktop div下，添加一个div `<div id="win10-desktop-scene"></div>`到末尾。
|
||||
> 对于实在不想修改html的用户，我们在js中添加了自动修正的代码，所以不修改也会有正常的效果。但是这种修正代码将会在未来版本被取消，只作为临时使用。
|
||||
|
||||
## 预览
|
||||
|
||||
![1] http://win10ui.yuri2.cn/mac-preview/
|
||||
|
||||
|
||||
|
||||
## 特性
|
||||
|
||||
* macUI界面
|
||||
* 桌面图标自动排序
|
||||
* 任务栏结合iframe子窗口，与windows一致的窗口管理体验
|
||||
* 开始菜单+消息提示中心，满足后台UI的设计需求
|
||||
* 极少的API，大部分功能可用html元素定义完成
|
||||
* 响应式兼容，在手机浏览器也有不错的观感
|
||||
* 目前只保证对主流现代浏览器的兼容性支持
|
||||
|
||||
## 前置组件
|
||||
|
||||
* layer(v3.0.3)
|
||||
* animated.css
|
||||
* jquery(v2.2.4)
|
||||
* font-awesome
|
||||
|
||||
## 快速入门
|
||||
|
||||
#### 如何自定义桌面图标？
|
||||
|
||||
```html
|
||||
<div id="win10-shortcuts">
|
||||
<div class="shortcut" onclick="//do something...">
|
||||
<img src="图片地址" class="icon" />
|
||||
<div class="title">图标底部文字</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="//do something...">
|
||||
<div class="icon">自定义任意html内容</div>
|
||||
<div class="title">图标底部文字</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
> 图标应设置为图片或自定义html填充div
|
||||
|
||||
#### 如何自定义开始菜单列表?
|
||||
|
||||
```html
|
||||
<div class="list win10-menu-hidden animated animated-slideOutLeft">
|
||||
<div class="item">一级菜单</div>
|
||||
<div class="item">一级菜单</div>
|
||||
<div class="sub-item">二级菜单</div>
|
||||
<div class="sub-item">二级菜单</div>
|
||||
<div class="sub-item">二级菜单</div>
|
||||
<div class="item">一级菜单</div>
|
||||
<div class="item">一级菜单</div>
|
||||
</div>
|
||||
```
|
||||
>一级菜单添加类item，二级添加sub-item。不需要用一级菜单“包裹”二级菜单，将自动识别二级菜单的归属，请注意排序。
|
||||
|
||||
|
||||
## API
|
||||
* 调用：Win10-ui的api应当在其初始化之后被调用
|
||||
```html
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
//Win10-ui初始化完成后将执行此处代码
|
||||
});
|
||||
</script>
|
||||
```
|
||||
> 所有方法都需要加``Win10.``前缀。
|
||||
|
||||
* setBgUrl(bgs) 设置背景图片 ``Win10.setBgUrl({main:'宽屏壁纸url',mobile:'竖屏壁纸url',})``
|
||||
* openUrl(url,title,areaAndOffset) ** 打开一个子窗口,参数列表：url,标题，[尺寸，区域]\(同layer的area和offset的设置格式，也可以传入'max'强制最大化，例如``[['30%','30%'],['50px','50px']]``\)
|
||||
* onReady(handle) win10-ui初始化完毕后的回调
|
||||
* menuOpen() 开始菜单打开
|
||||
* menuClose() 开始菜单关闭
|
||||
* menuToggle() 开始菜单打开/关闭
|
||||
* commandCenterOpen() 信息中心打开
|
||||
* commandCenterClose() 信息中心关闭
|
||||
* commandCenterToggle() 信息中心打开/关闭
|
||||
* renderShortcuts() 重新渲染桌面图标(可用与动态添加或删除了桌面图标之后)
|
||||
* renderMenuBlocks() 重新渲染磁贴(可用与动态添加或删除了磁贴之后)
|
||||
* buildList() 重新预处理菜单列表(可用与动态添加或删除了菜单项之后)
|
||||
* newMsg(title, content,handle_click) 发送一个消息提醒，handle_click是点击回调
|
||||
* isSmallScreen() 如果屏幕宽度小于768px返回true，否则返回false
|
||||
* setAnimated(animated_classes,animated_liveness) 用css的类来设置磁贴动画。animated_liveness设置动画的触发概率(0~1)。animated_classes中存放css class数组，如``['class1','class2','class3-1 class3-2']``。磁贴将随机选择一个动画来播放（最多3秒）。
|
||||
* exit() 关闭整个页面（有确认提示）
|
||||
* aboutUs() 关于信息
|
||||
* lang(cn,en) 简单的双语支持，如果是中文环境返回cn，否则返回en
|
||||
* getLayeroByIndex(index) 根据openUrl返回的索引，返回窗体的jq对象
|
||||
* hideWins() 最小化所有窗口
|
||||
* setContextMenu(jq_dom, menu) 右键菜单配置（详见进阶篇）
|
||||
* getDesktopScene() 返回桌面舞台的jq对象（用于高级用户diy壁纸）
|
||||
|
||||
## 进阶篇
|
||||
|
||||
>推荐仔细查看demo的代码，很多用法都有所提及
|
||||
|
||||
#### 设计思路
|
||||
|
||||
* Win10-UI应当作为你网站模块的主入口，而具体功能页面适合用子窗口的形式打开。子窗口是以iframe实现的，减少了js、css冲突，保证了独立性。同时父子页之间也可以通过Win10_child.js的API进行沟通
|
||||
* 桌面图标适用于最常用的操作，菜单适用于构建所有操作的清单（这里的操作不限于打开子窗口）
|
||||
* 小磁贴视觉冲击力强，除了可以做出醒目的按钮，也可以用作信息展板，甚至于在磁贴的方块空间内构建复杂的应用（如音乐播放器）
|
||||
|
||||
#### icon辅助类
|
||||
|
||||
本着极简的设计风格，所有图标相关的辅助类都设置为'icon'
|
||||
```html
|
||||
<div class="shortcut">
|
||||
<img class="icon" src="./img/icon/win10.png"/>
|
||||
<div class="title">Win10-UI官网</div>
|
||||
</div>
|
||||
```
|
||||
>在桌面图标中，设置img.icon声明该图片是一个图标
|
||||
|
||||
```html
|
||||
<div class="shortcut">
|
||||
<i class="fa fa-camera-retro icon"></i>
|
||||
<div class="title">Win10-UI官网</div>
|
||||
</div>
|
||||
```
|
||||
>在桌面图标中，用.icon声明一个字体图标（以font awesome为例）
|
||||
|
||||
```html
|
||||
Win10.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/win10.png\"/>Win10-UI官网");
|
||||
Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字体图标");
|
||||
```
|
||||
>没错！你也可以在openUrl函数的title参数中插入图片图标或者字体图标！
|
||||
|
||||
```html
|
||||
<div class="item"><i class=" icon fa fa-wrench fa-fw"></i><span>API测试</span></div>
|
||||
<div class="item"><img class="icon" src="./img/icon/doc.png"><span>文档图片图标</span></div>
|
||||
```
|
||||
>在开始菜单项中，使用icon一样可以定义图片图标和字体图标
|
||||
|
||||
#### 小磁贴设计
|
||||
|
||||
* 小磁贴的尺寸固定位44px/格，方便开发者设计自己想要的样式
|
||||
* 灵活使用setAnimated函数
|
||||
* 自定义一些hover的动画能起到很好的效果哦
|
||||
* vue等前端神器的支持
|
||||
|
||||
#### 小磁贴辅助类
|
||||
|
||||
你可以放置两个content，并赋予detail和cover的辅助类，将得到炫酷的封面切换主体的动画效果。
|
||||
|
||||
~~~html
|
||||
<div loc="1,1" size="6,3" class="block">
|
||||
<div class="content red detail" >
|
||||
我是主体
|
||||
</div>
|
||||
<div class="content red cover">
|
||||
我是封面
|
||||
</div>
|
||||
</div>
|
||||
~~~
|
||||
|
||||
#### 父子页沟通
|
||||
|
||||
* 要使用子页工具集，请先引入win10.child.js
|
||||
* 自由的使用Win10_child对象吧，目前包含close、newMsg、openUrl函数；也可以使用Win10_parent对象，将指向父页的Win10对象。
|
||||
* 父页打开子窗口的函数openUrl会返回索引index，使用getLayeroByIndex(index)获得子窗口对象,然后就可以方便的控制子窗口的行为了。
|
||||
|
||||
#### 颜色预定义
|
||||
|
||||
各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010
|
||||
* black-green{background:#009688}
|
||||
* green{background:#5FB878}
|
||||
* black{background:#393D49}
|
||||
* blue{background:#1E9FFF}
|
||||
* orange{background:#F7B824}
|
||||
* red{background:#FF5722}
|
||||
* dark{background:#2F4056}
|
||||
|
||||
#### 右键菜单配置
|
||||
|
||||
Win10.setContextMenu(jq_dom, menu) 可接管系统默认的右键菜单。
|
||||
其中jq_dom是jq对象或选择器字符串,menu是菜单配置项(true表示禁用默认菜单,null表示恢复默认菜单,[数组]表示自定义菜单)
|
||||
~~~js
|
||||
//典型用法(桌面菜单)
|
||||
Win10.setContextMenu('#win10>.desktop',[
|
||||
'菜单标题', //单字符串，不带回调
|
||||
['进入全屏',function () {Win10.enableFullScreen()}], //菜单项+点击回调
|
||||
['退出全屏',function () {Win10.disableFullScreen()}],
|
||||
'|', //分隔符
|
||||
['关于',function () {Win10.aboutUs()}],
|
||||
]);
|
||||
|
||||
//设置menu为true会起到禁用系统默认菜单的作用
|
||||
Win10.setContextMenu('#win10',true);
|
||||
~~~
|
||||
> 点击回调函数可以声明一个参数e,将传入点击事件的对象。特别的，e.data是触发右键菜单的对象。
|
||||
|
||||
#### 桌面舞台
|
||||
|
||||
为了让广大开发者能更自由的定义自己的桌面，Win10-UI自v1.1.2.3版本起加入桌面舞台。
|
||||
桌面舞台是一个`id`为`win10-desktop-scene`的div，位于`#win10>.desktop`下。桌面舞台预定义了css，使其浮动于桌面图标的下方。
|
||||
借助此特性，你甚至可以发挥想象力，制作出动态壁纸。
|
||||
> 使用`getDesktopScene`函数可以快捷获取桌面舞台的jq对象。
|
||||
> v1.1.2.3之前的版本，如果想要临时体验桌面舞台的支持特性，可以去官方群下载补丁`win10_desktop_scene_support.js`。
|
||||
|
||||
#### 子窗口事件自动绑定
|
||||
|
||||
所有#win10下的元素加入类win10-open-window即可自动绑定openUrl函数，无须用onclick手动绑定
|
||||
> v1.1.2.3之前的版本，如果想要临时体验桌面子窗口事件自动绑定支持特性，可以去官方群下载插件`win10_bind_open_windows.js`。
|
||||
|
||||
* 标签属性说明
|
||||
* data-title:窗口标题
|
||||
* data-url:窗口url地址
|
||||
* data-icon-image:图片图标的url
|
||||
* data-icon-font:字体图标名 如star
|
||||
* data-icon-bg:图标背景色 black-green,green,black,blue,orange,red,dark,purple
|
||||
* data-area-offset:窗口 [区域,偏移]
|
||||
*
|
||||
* 特别的，如果子节点有icon和title的css类，可以自动识别为图标和标题，无须设置data-title和data-icon-image(font)
|
||||
|
||||
~~~html
|
||||
<div class="shortcut win10-open-window"
|
||||
data-url="http://www.baidu.com"
|
||||
data-title="我是百度"
|
||||
data-icon-image="https://www.baidu.com/img/bd_logo1.png"
|
||||
data-icon-font="star"
|
||||
data-icon-bg="red"
|
||||
data-area-offset="[['300px', '380px'],'rt']">
|
||||
<i class="icon fa fa-fw fa-user-circle blue" ></i>
|
||||
<div class="title">百度</div>
|
||||
</div>
|
||||
~~~
|
||||
> 这是所有可选项都用上的完整写法。
|
||||
|
||||
~~~html
|
||||
<div class="shortcut win10-open-window" data-url="www.baidu.com" >
|
||||
<i class="icon fa fa-fw fa-user-circle blue" ></i>
|
||||
<div class="title">百度</div>
|
||||
</div>
|
||||
~~~
|
||||
> 这是推荐的简洁写法，可以满足大部分场景的需要。
|
||||
|
||||
## 未来开发计划
|
||||
|
||||
* 可拖拽磁贴
|
||||
* 多主题切换
|
||||
* 主题生成器
|
||||
* 日历、音乐播放器等小组件
|
||||
|
||||
## 联系作者
|
||||
|
||||
联系邮箱：yuri2peter@qq.com
|
||||
|
||||
欢迎关注尤里2号的博客:[https://yuri2.cn](https://yuri2.cn)
|
||||
|
||||
## 写在最后
|
||||
|
||||
#### 2017/7/31
|
||||
|
||||
* 本来只是想做一个UI给自己的php框架后台使用，没想到一干起来就完全停不下来呢~
|
||||
* 刚上线就有很多小伙伴表示了支持，在此尤里衷心的跟大家说一句：谢谢！
|
||||
* 由于是刚开始，会有很多新点子，版本迭代会比较快，对于更新强迫症的小伙伴可能会不太友好，这种情况很快就会有所改观（为偷懒做铺垫）。
|
||||
* 如果你用Win10-UI做了自己的网站，欢迎联系我投稿展示。
|
||||
* 对于项目的发展有着重大贡献的小伙伴我会记录在contributor.md文件中。啥叫贡献？好的建议，重大bug，推广等等。
|
||||
* 如果有一些贼蠢的错误请见谅，空闲时间一个人维护一个项目还是蛮蛋疼的（写于23:42的一句话）。
|
||||
* ** 如果你喜欢我的项目不妨点一个赞，如果不嫌累的话最好在官网、开源中国和github都点点赞（捂脸）！**
|
||||
|
||||
-----------------------------------------------------------
|
||||
|
||||
## TODO
|
||||
|
||||
* 关闭回调
|
||||
* 取消iframe读取时的菊花图标
|
||||
* 多壁纸切换API
|
||||
|
||||
|
||||
## 更新日志
|
||||
|
||||
### v1.1.2.3
|
||||
|
||||
* 2017/9/13 [修复]修复手机端修改链接键盘影响窗口高度的问题
|
||||
* 2017/9/12 [增强]子窗口事件自动绑定（详情见进阶篇）
|
||||
* 2017/9/12 [修复]修复了切换全屏下最大化窗口造成的子窗口高度溢出问题
|
||||
* 2017/9/6 [增强]添加了一个辅助函数`getDesktopScene`返回桌面舞台对象;现在onReady函数可以被多次调用了，将按顺序执行(真实执行顺序是在DOM结构基本确定之后)
|
||||
* 2017/9/5 [增强]增加了一层div桌面舞台，专门提供给高级桌面背景插件或自定义
|
||||
* 2017/9/1 [修复]修复一处颜色的笔误（蓝色写成了黑色）
|
||||
|
||||
### v1.1.2.2
|
||||
* 2017/8/31 [优化]菜单项打开机制改为手风琴式
|
||||
* 2017/8/31 [修复]修正菜单脚手架工具的一处笔误（导致菜单项样式异常）
|
||||
* 2017/8/29 [优化]一些a标签按钮不会导致地址栏变动了(小技巧：#改成javascript:void(0))
|
||||
* 2017/8/22 [增强]为Ctrl+方向键设立了快捷键，快捷打开菜单/消息，显示/隐藏窗口
|
||||
* 2017/8/22 [优化]提高消息图标闪烁的频率;修复了IE11的全屏功能
|
||||
|
||||
### v1.1.2.1
|
||||
|
||||
* 2017/9/12 [增强]将win10_bind_open_windows插件整合进了主框架，具体使用方法见“进阶篇”
|
||||
* 2017/8/21 [优化]减小了子窗口按钮的宽度;手机屏幕openUrl打开的子窗口现在默认最大化了;消息提醒图标改为闪烁（感谢'Mr天明'的建议）
|
||||
* 2017/8/18 [增强]预定义了磁贴.content.cover和.content.detail类，让其拥有鼠标经过的翻页动画
|
||||
* 2017/8/15 [优化]提高了通用背景色css的优先级；优化菜单图标大小与位置；三种代码脚手架(懒人必备)
|
||||
* 2017/8/07 [修复]修复了在小屏幕下打开自定义网页不会全屏的bug
|
||||
|
||||
### 更早的版本
|
||||
|
||||
* 2017/8/05 [增强]openUrl函数现在第三个参数可以自定义窗口的打开大小和位置了
|
||||
* 2017/8/05 [微调]win10.child.js增加了常用函数openUrl,父级对象句柄由Win10改名为Win10_parent;增加了一个紫色的css;优化内存释放
|
||||
* 2017/8/02 [增强]右键菜单
|
||||
* 2017/7/31 [增强]iframe子页js工具集
|
||||
* 2017/7/31 [精简]去除了登录相关的API，登录页现在作为独立模板存在
|
||||
* 2017/7/31 [增强]优化任务栏和子窗口图标的表现，设立图标辅助类icon；背景图片惰性加载（需要用api设置图片的url）；newMsg函数现在可以传入第三个参数设置点击的回调
|
||||
* 2017/7/28 [协议]修改开源协议为SATA
|
||||
* 2017/7/28 [修复]修正子窗口自动置顶有时失效的bug
|
||||
* 2017/7/28 [优化]任务栏标题文字改为左对齐；添加img辅助类"win10-btn-icon"服务于任务栏小图标
|
||||
* 2017/7/27 [增强]openUrl现在可以传入第三个参数max为true，强制以最大化打开网页
|
||||
* 2017/7/26 [优化]点击子窗口的任意位置都会激活子窗口（不同于之前只有点击标题有效）
|
||||
* 2017/7/25 [优化]现在子窗口全屏不会超出底部了；微调菜单的默认高度，看起来舒服一点；在时间刷新前和图标渲染前先行隐藏，防止影响观感（感谢@typ1758提供的建议）
|
||||
* 2017/7/24 [修复]修复了笔误引起的自动激活最上层子窗口失效
|
||||
* 2017/7/24 [优化]去除了窄屏幕切换菜单时偶尔产生的闪烁；微调桌面图标样式，变得更加紧凑
|
||||
* 2017/7/21 [增强]简单的中英双语支持。对话框样式微调；磁贴固定宽度为44px/格(固定的尺寸比较好布局)
|
||||
* 2017/7/20 [修复]jq3.1有bug(真是坑爹)，换为jq2.2.4
|
||||
* 2017/7/19 [增强]全局默认不允许鼠标选择文字；优化url打开函数，自动补全http协议头
|
||||
|
|
@ -0,0 +1 @@
|
|||
v1.1.2.3
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>子页测试</title>
|
||||
<script src="./js/jquery-2.2.4.min.js"></script>
|
||||
<script src="./js/win10.child.js"></script>
|
||||
<style>
|
||||
.btn{
|
||||
margin: 20px;
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
background-color: #2D93CA;
|
||||
border-radius: 3px;
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
.btn:hover{
|
||||
background-color: #256d95;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function f1() {
|
||||
Win10_child.newMsg('子页的问候','这是从iframe页调用APi发送的消息哦');
|
||||
}
|
||||
function f2() {
|
||||
Win10_child.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/win10.png\'/>Win10-UI官网')
|
||||
}
|
||||
function f3() {
|
||||
Win10_child.close();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="btn" onclick="f1()">子页给父页发消息</div>
|
||||
<div class="btn" onclick="f2()">子页打开子窗口</div>
|
||||
<div class="btn" onclick="f3()">关闭子页</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
/*! layer mobile-v2.0.0 Web弹层组件 MIT License http://layer.layui.com/mobile By 贤心 */
|
||||
;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,779 @@
|
|||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#win10 *{
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
#win10-login{
|
||||
background: black no-repeat fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
#win10 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black no-repeat fixed;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
/*padding-top: 20px;*/
|
||||
}
|
||||
|
||||
#win10 *{
|
||||
scrollbar-arrow-color: #5e6a5c;); /*图6,三角箭头的颜色*/
|
||||
scrollbar-face-color: #5e6a5c; /*图5,立体滚动条的颜色*/
|
||||
scrollbar-3dlight-color: #5e6a5c; /*图1,立体滚动条亮边的颜色*/
|
||||
scrollbar-highlight-color: #5e6a5c; /*图2,滚动条空白部分的颜色*/
|
||||
scrollbar-shadow-color: #5e6a5c; /*图3,立体滚动条阴影的颜色*/
|
||||
scrollbar-darkshadow-color: #5e6a5c; /*图4,立体滚动条强阴影的颜色*/
|
||||
scrollbar-track-color: rgba(74, 84, 78, 0.41); /*图7,立体滚动条背景颜色*/
|
||||
scrollbar-base-color:#5e6a5c; /*滚动条的基本颜色*/
|
||||
}
|
||||
|
||||
#win10 hr { height:0px; border-top:1px solid #999; border-right:0px; border-bottom:0px; border-left:0px; }
|
||||
|
||||
#win10 .desktop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#win10_task_bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 40px;
|
||||
background-color: rgba(19, 23, 28, 0.9);
|
||||
z-index: 19930813;
|
||||
}
|
||||
|
||||
#win10 .btn_group {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#win10 .btn_group .btn {
|
||||
float: left;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
height: 100%;
|
||||
text-overflow:ellipsis;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#win10 .btn_group .btn:hover {
|
||||
background-color: rgba(106, 105, 100, 0.71);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#win10_btn_group_left{
|
||||
float: left;
|
||||
overflow: auto;
|
||||
max-width:200px;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle{
|
||||
float: left;
|
||||
width:calc(100% - 240px);
|
||||
overflow: auto;
|
||||
}
|
||||
#win10_btn_group_middle .btn_close{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
color: transparent;
|
||||
}
|
||||
#win10_btn_group_middle .btn:hover .btn_close{
|
||||
color: rgba(131, 168, 157, 0.71);
|
||||
}
|
||||
#win10_btn_group_middle .btn:hover .btn_close:hover{
|
||||
color: white;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle .btn_title{
|
||||
float: left;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle::-webkit-scrollbar-track {
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(30, 39, 34, 0.41);
|
||||
}
|
||||
|
||||
#win10_btn_group_right{
|
||||
float: right;
|
||||
max-width:200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#win10_btn_group_left .btn {
|
||||
height: 100%;
|
||||
width: 48px;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#win10_btn_group_right .btn {
|
||||
height: 100%;
|
||||
min-width: 4px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px ;
|
||||
}
|
||||
|
||||
#win10_btn_show_desktop {
|
||||
border-left: grey 1px solid;
|
||||
width: 4px;
|
||||
margin-left: 3px;
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
#win10_btn_time {
|
||||
font-size: 12px;
|
||||
line-height: 20px !important
|
||||
}
|
||||
#win10-menu {
|
||||
position: fixed;
|
||||
bottom: 41px;
|
||||
background-color: rgba(19,23,28,0.81);
|
||||
height: 60%;
|
||||
width: 75%;
|
||||
max-width: 880px;
|
||||
overflow: auto;
|
||||
padding-left:10px;
|
||||
z-index: 1000;
|
||||
overflow-y: hidden;
|
||||
transition: bottom 0.5s ;
|
||||
}
|
||||
|
||||
#win10-menu.hidden {
|
||||
bottom:-70%;
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar,.list::-webkit-scrollbar,#win10_command_center::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar-track,.list::-webkit-scrollbar-track,#win10_command_center::-webkit-scrollbar-track {
|
||||
background-color: rgba(74, 84, 78, 0.41);
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar-thumb,.list::-webkit-scrollbar-thumb,#win10_command_center::-webkit-scrollbar-thumb {
|
||||
background-color: #6a6a6a;
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar-button ,.list::-webkit-scrollbar-button ,#win10_command_center::-webkit-scrollbar-button {
|
||||
/*background-color: #6a6a6a;*/
|
||||
}
|
||||
|
||||
#win10-menu .list,.blocks{
|
||||
float: left;
|
||||
width: 180px;
|
||||
height:100%;
|
||||
overflow: auto;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
#win10-menu .list{
|
||||
width:240px;
|
||||
padding:0 10px;
|
||||
padding-top: 5px;
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#win10-menu .list .item.has-sub-down::after{
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content:"\f107";
|
||||
line-height: inherit;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#win10-menu .list .item.has-sub-up::after{
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content:"\f106";
|
||||
line-height: inherit;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#win10-menu .list .item,.sub-item{
|
||||
color:white;
|
||||
margin: 1px 0;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s;
|
||||
position: relative;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
#win10-menu .list .item>.icon,#win10-menu .list .sub-item>.icon,.sub-item>.icon{
|
||||
line-height: 36px;
|
||||
font-size: 22px;
|
||||
float: left;
|
||||
margin-right: 0.5em;
|
||||
width: 36px;
|
||||
position: relative;
|
||||
top:2px;
|
||||
background-color: grey;
|
||||
|
||||
}
|
||||
|
||||
#win10-menu .list .sub-item{
|
||||
padding-left:30px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
#win10-menu .list .item:hover,.sub-item:hover{
|
||||
background-color: rgba(72,72,72,0.58);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#win10-menu .blocks{
|
||||
max-width: 650px;
|
||||
width:calc(100% - 260px);
|
||||
}
|
||||
|
||||
#win10-menu-switcher{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
border-left: 1px solid grey;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#win10-menu-switcher:active{
|
||||
background-color: rgba(92, 109, 92, 0.81);
|
||||
}
|
||||
|
||||
#win10-menu .menu_group {
|
||||
float: left;
|
||||
width: 300px;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group .title {
|
||||
padding: 5px;
|
||||
padding-top: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group:hover .title::after{
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content:"\f0c9";
|
||||
line-height: inherit;
|
||||
float: right;
|
||||
margin-right: 17px;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group .block {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid transparent;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
cursor: default;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group .block .content {
|
||||
background-color: rgba(0, 196, 255, 0.55);
|
||||
width: calc(100% + 4px);
|
||||
height: calc(100% + 4px);
|
||||
position: absolute;
|
||||
left: -2px;top: -2px;
|
||||
overflow: hidden;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group .block:hover .content.cover{
|
||||
left: calc(-100% - 4px);
|
||||
}
|
||||
|
||||
#win10-menu .menu_group .block .content.detail{
|
||||
left: calc(100% + 4px);
|
||||
}
|
||||
#win10-menu .menu_group .block:hover .content.detail{
|
||||
left: -2px;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group .block:hover {
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
#win10 #win10-shortcuts {
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#win10 #win10-shortcuts.shortcuts-hidden .shortcut{display: none}
|
||||
|
||||
#win10 #win10-shortcuts .shortcut {
|
||||
width: 80px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
#win10 #win10-shortcuts .shortcut:hover {
|
||||
background-color: rgba(255, 255, 255, 0.11);
|
||||
}
|
||||
|
||||
#win10 #win10-shortcuts .shortcut>.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;
|
||||
}
|
||||
|
||||
#win10-shortcuts .shortcut .title {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#win10_command_center {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 41px;
|
||||
width: 350px;
|
||||
background-color: rgba(19,23,28,0.81);
|
||||
height: calc(100% - 42px);
|
||||
transition: all 0.5s;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#win10_command_center.hidden_right {
|
||||
right: -350px;
|
||||
}
|
||||
|
||||
#win10_command_center > .title{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
#win10_command_center > .title:hover{
|
||||
background-color: rgba(255, 255, 255, 0.19);
|
||||
}
|
||||
|
||||
#win10_btn_group_right #win10_btn_command{
|
||||
font-size: 20px;
|
||||
}
|
||||
#win10_btn_command .msgNof{
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
border: 1px solid red;
|
||||
background-color: red;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#win10_btn_command_center_clean_all{
|
||||
color: grey;
|
||||
text-align: right;
|
||||
font-size:12px;
|
||||
float: right;
|
||||
margin-top:40px;
|
||||
margin-right:24px;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
#win10_btn_command_center_clean_all:hover{
|
||||
cursor: pointer;
|
||||
color:white;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs{
|
||||
position: absolute;
|
||||
top:60px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
/*padding: 10px;*/
|
||||
}
|
||||
|
||||
#win10_command_center .btn_close_msg{
|
||||
line-height: inherit;
|
||||
transition: color 0.5s ;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg{
|
||||
width: calc(100% - 20px);
|
||||
min-height: 40px;
|
||||
padding:10px;
|
||||
margin-top: 4px;
|
||||
transition: background-color 0.5s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg.animated{
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg:hover{
|
||||
cursor: default;
|
||||
background-color: rgba(255, 255, 255, 0.19);
|
||||
}
|
||||
#win10_command_center .msgs .msg:hover .title{
|
||||
color: white;
|
||||
}
|
||||
#win10_command_center .msgs .msg:hover>.btn_close_msg{
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg:hover>.content{
|
||||
color: white;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg>.title{
|
||||
color: #c7c7c7;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg>.btn_close_msg{
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
padding: 3px;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg>.btn_close_msg:hover{
|
||||
color: white;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg>.content{
|
||||
font-size: 12px;
|
||||
color: #9b9b9b;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle .btn{
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
height: inherit;
|
||||
max-width: 140px;
|
||||
border-bottom:4px solid #707070;
|
||||
line-height: 40px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
word-break: keep-all;
|
||||
padding: 0 10px;
|
||||
margin-right: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle .btn.active{
|
||||
background-color: #3B3D3F;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle .btn:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.win10-open-iframe{
|
||||
background-color: transparent;
|
||||
border: 1px solid #323232;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-content{
|
||||
background-color: white;
|
||||
max-height: calc(100% - 42px);
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-title{
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(49, 49, 50, 0.94);
|
||||
padding-right: 160px;
|
||||
color: white;
|
||||
}
|
||||
.win10-open-iframe.hide{
|
||||
display: none;
|
||||
}
|
||||
.win10-btn_refresh{
|
||||
float: right;
|
||||
}
|
||||
#win10 .img-loader{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.win10-btn-refresh>span,.win10-btn-change-url>span{
|
||||
font-size: 16px !important;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-min cite{display: none;}
|
||||
.win10-open-iframe .layui-layer-max:hover{background-image:none}
|
||||
.win10-open-iframe .layui-layer-max,.layui-layer-maxmin{background:none}
|
||||
.win10-open-iframe .layui-layer-setwin a.layui-layer-close1:hover{
|
||||
background:red;
|
||||
color: #fff ;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-min::before{
|
||||
content:"\f2d1";
|
||||
color: white;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-max::before{
|
||||
content:"\f2d0";
|
||||
color: white;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-maxmin.layui-layer-max::before{
|
||||
content:"\f2d2";
|
||||
color: white;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-close::before{
|
||||
content:"\f2d3";
|
||||
color: #fff;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser textarea{
|
||||
margin: 20px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
}
|
||||
/*右键菜单*/
|
||||
#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 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 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 }
|
||||
|
||||
/*块级按钮*/
|
||||
.win10-open-iframe .layui-layer-ico{background-image:none;}
|
||||
.win10-open-iframe .layui-layer-setwin {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
font-size: 0;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(49, 49, 50, 0.94);
|
||||
}
|
||||
.win10-open-iframe .layui-layer-setwin a {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.win10-open-iframe .layui-layer-setwin a:hover {
|
||||
background: #5d5d5d;
|
||||
}
|
||||
.win10-open-iframe .layui-layer-title .icon ,#win10_btn_group_middle .btn_title .icon{
|
||||
font-size: 15px;
|
||||
padding: 1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.win10-open-iframe .layui-layer-title img.icon,#win10_btn_group_middle .btn_title img.icon{
|
||||
width: 20px;
|
||||
position: relative;
|
||||
top:5px ;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
#win10-menu>.list>.sub-item img.icon,#win10-menu>.list>.item img.icon{
|
||||
width: 36px;
|
||||
height:36px;
|
||||
position: relative;
|
||||
top:2px ;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
/*桌面舞台样式*/
|
||||
#win10-desktop-scene{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/*各种颜色 具体效果见 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;}
|
||||
.win10-open-iframe .black,#win10 .black{background:#393D49!important;}
|
||||
.win10-open-iframe .blue,#win10 .blue{background:#1E9FFF!important;}
|
||||
.win10-open-iframe .orange,#win10 .orange{background:#F7B824!important;}
|
||||
.win10-open-iframe .red,#win10 .red{background:#FF5722!important;}
|
||||
.win10-open-iframe .dark,#win10 .dark{background:#2F4056!important;}
|
||||
.win10-open-iframe .purple,#win10 .purple{background:#b074e6!important;}
|
||||
|
||||
|
||||
@media screen and (max-width:768px){
|
||||
#win10-menu{
|
||||
width:calc(100% - 10px);
|
||||
height: calc(100% - 42px);
|
||||
}
|
||||
#win10-menu.hidden{
|
||||
bottom: -100% ;
|
||||
}
|
||||
#win10_command_center{
|
||||
width: 100%;
|
||||
}
|
||||
#win10_command_center.hidden_right {
|
||||
right: -100%;
|
||||
}
|
||||
.layui-layer-setwin .layui-layer-max{
|
||||
display: none;
|
||||
}
|
||||
#win10_btn_group_left .btn {
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
}
|
||||
#win10_btn_group_right .btn {
|
||||
height: 100%;
|
||||
min-width: 4px;
|
||||
padding: 0 10px;
|
||||
font-size: 16px!important;
|
||||
}
|
||||
#win10_btn_show_desktop {
|
||||
border-left: grey 1px solid;
|
||||
width: 30px;
|
||||
margin-left: 3px;
|
||||
padding: 0 !important
|
||||
}
|
||||
#win10_btn_group_left{
|
||||
max-width:100px;
|
||||
}
|
||||
#win10_btn_group_middle{
|
||||
width:calc(100% - 160px);
|
||||
}
|
||||
#win10_btn_group_middle .btn{
|
||||
padding: 0 3px;
|
||||
}
|
||||
#win10_btn_group_right{
|
||||
max-width:150px;
|
||||
}
|
||||
#win10-menu .list{
|
||||
padding-left: 2px;
|
||||
position: absolute;
|
||||
width: calc(100% - 31px);
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
#win10-menu .blocks{
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
width:calc(100% - 31px);
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group {
|
||||
width: 90%;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#win10_btn_time{display: none}
|
||||
#win10-menu-switcher{
|
||||
display: block;
|
||||
}
|
||||
#win10-menu>.win10-menu-hidden{
|
||||
display: none;
|
||||
}
|
||||
#win10_btn_group_middle .btn_close{
|
||||
display: none;
|
||||
}
|
||||
.win10-open-iframe .layui-layer-setwin a {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,527 @@
|
|||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-size: 62.5%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
html, body {
|
||||
font-size: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
.svg-icon path {
|
||||
stroke: rgba(255, 255, 255, 0.9);
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
input, button {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cont {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-image: url("../img/wallpapers/login.jpg");
|
||||
background-size: cover;
|
||||
overflow: auto;
|
||||
font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.demo {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -15rem;
|
||||
margin-top: -26.5rem;
|
||||
width: 30rem;
|
||||
height: 53rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background: -webkit-linear-gradient(top, rgba(146, 135, 187, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
|
||||
background: linear-gradient(to bottom, rgba(146, 135, 187, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
|
||||
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
|
||||
transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
|
||||
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
|
||||
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25), -webkit-transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
.login.inactive {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.login__check {
|
||||
position: absolute;
|
||||
top: 16rem;
|
||||
left: 13.5rem;
|
||||
width: 14rem;
|
||||
height: 2.8rem;
|
||||
background: #fff;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.login__check:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
width: 2.8rem;
|
||||
height: 5.2rem;
|
||||
background: #fff;
|
||||
box-shadow: inset -0.2rem -2rem 2rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.login__form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
padding: 1.5rem 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.login__row {
|
||||
height: 5rem;
|
||||
padding-top: 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.login__icon {
|
||||
margin-bottom: -0.4rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.login__icon.name path {
|
||||
stroke-dasharray: 73.50196075439453;
|
||||
stroke-dashoffset: 73.50196075439453;
|
||||
-webkit-animation: animatePath 2s 0.5s forwards;
|
||||
animation: animatePath 2s 0.5s forwards;
|
||||
}
|
||||
.login__icon.pass path {
|
||||
stroke-dasharray: 92.10662841796875;
|
||||
stroke-dashoffset: 92.10662841796875;
|
||||
-webkit-animation: animatePath 2s 0.5s forwards;
|
||||
animation: animatePath 2s 0.5s forwards;
|
||||
}
|
||||
.login__input {
|
||||
display: inline-block;
|
||||
width: 22rem;
|
||||
height: 100%;
|
||||
padding-left: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
background: transparent;
|
||||
color: #FDFCFD;
|
||||
}
|
||||
.login__submit {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
margin: 5rem 0 2.2rem;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: #FF3366;
|
||||
font-size: 1.5rem;
|
||||
border-radius: 3rem;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
-webkit-transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
|
||||
transition: width 0.3s 0.15s, font-size 0.1s 0.15s;
|
||||
}
|
||||
.login__submit:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -1.5rem;
|
||||
margin-top: -1.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 2px dotted #fff;
|
||||
border-radius: 50%;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
-webkit-transition: opacity 0.1s 0.4s;
|
||||
transition: opacity 0.1s 0.4s;
|
||||
opacity: 0;
|
||||
}
|
||||
.login__submit.processing {
|
||||
width: 4rem;
|
||||
font-size: 0;
|
||||
}
|
||||
.login__submit.processing:after {
|
||||
opacity: 1;
|
||||
-webkit-animation: rotate 0.5s 0.4s infinite linear;
|
||||
animation: rotate 0.5s 0.4s infinite linear;
|
||||
}
|
||||
.login__submit.success {
|
||||
-webkit-transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
|
||||
transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
|
||||
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s;
|
||||
transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
|
||||
-webkit-transform: scale(30);
|
||||
transform: scale(30);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.login__submit.success:after {
|
||||
-webkit-transition: opacity 0.1s 0s;
|
||||
transition: opacity 0.1s 0s;
|
||||
opacity: 0;
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
}
|
||||
.login__signup {
|
||||
font-size: 1.2rem;
|
||||
color: #ABA8AE;
|
||||
}
|
||||
.login__signup a {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
-webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
|
||||
transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
|
||||
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
|
||||
transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25), -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.app.active {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
.app.active .app__user-photo {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
.app.active .app__meeting {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
.app.active .app__logout {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
.app__top {
|
||||
position: relative;
|
||||
height: 28rem;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 6rem 1.5rem 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
.app__bot {
|
||||
position: relative;
|
||||
height: 25rem;
|
||||
background: #fff;
|
||||
}
|
||||
.app__menu-btn {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
left: 1.5rem;
|
||||
width: 1.8rem;
|
||||
height: 1.7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.app__menu-btn span, .app__menu-btn:before, .app__menu-btn:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.app__menu-btn span {
|
||||
top: 0.8rem;
|
||||
}
|
||||
.app__menu-btn:before {
|
||||
content: "";
|
||||
top: 0;
|
||||
}
|
||||
.app__menu-btn:after {
|
||||
content: "";
|
||||
bottom: 0;
|
||||
}
|
||||
.app__icon {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
}
|
||||
.app__icon.search {
|
||||
right: 1.5rem;
|
||||
stroke-dasharray: 61.847137451171875;
|
||||
stroke-dashoffset: 61.847137451171875;
|
||||
-webkit-animation: animatePath 0.5s 0.5s forwards;
|
||||
animation: animatePath 0.5s 0.5s forwards;
|
||||
}
|
||||
.app__hello {
|
||||
font-size: 2.2rem;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.app__user {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.app__user-photo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
-webkit-transition: -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
|
||||
transition: -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
|
||||
transition: transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
|
||||
transition: transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55), -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
.app__user-notif {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
background: #50D2C2;
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.app__month:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.app__month-name {
|
||||
display: inline-block;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.app__month-btn {
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.app__month-btn.left {
|
||||
float: left;
|
||||
-webkit-transform: rotate(-135deg);
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
.app__month-btn.right {
|
||||
float: right;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.app__days {
|
||||
height: 7rem;
|
||||
padding: 1.5rem 2rem;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.app__day {
|
||||
width: 14%;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.app__day.weekday {
|
||||
color: #919197;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.app__day.date {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: #3C3C43;
|
||||
}
|
||||
.app__meeting {
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
border-top: 1px solid #EEEEEF;
|
||||
padding: 1rem 2rem 1rem 7.5rem;
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
.app__meeting:nth-child(1) {
|
||||
-webkit-transition-delay: 0.2s;
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
.app__meeting:nth-child(2) {
|
||||
-webkit-transition-delay: 0.3s;
|
||||
transition-delay: 0.3s;
|
||||
}
|
||||
.app__meeting:nth-child(3) {
|
||||
-webkit-transition-delay: 0.4s;
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
.app__meeting:nth-child(4) {
|
||||
-webkit-transition-delay: 0.5s;
|
||||
transition-delay: 0.5s;
|
||||
}
|
||||
.app__meeting:nth-child(5) {
|
||||
-webkit-transition-delay: 0.6s;
|
||||
transition-delay: 0.6s;
|
||||
}
|
||||
.app__meeting-photo {
|
||||
position: absolute;
|
||||
left: 2rem;
|
||||
top: 1rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
.app__meeting-name {
|
||||
color: #000;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.app__meeting-info {
|
||||
color: #949498;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.app__logout {
|
||||
position: absolute;
|
||||
bottom: 3.3rem;
|
||||
right: 3.3rem;
|
||||
width: 4.6rem;
|
||||
height: 4.6rem;
|
||||
margin-right: -2.3rem;
|
||||
margin-bottom: -2.3rem;
|
||||
background: #FC3768;
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
-webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
|
||||
transition: bottom 0.4s 0.1s, right 0.4s 0.1s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
|
||||
transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s;
|
||||
transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
.app__logout.clicked {
|
||||
bottom: 50%;
|
||||
right: 50%;
|
||||
-webkit-transform: scale(30) !important;
|
||||
transform: scale(30) !important;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.app__logout.clicked svg {
|
||||
opacity: 0;
|
||||
}
|
||||
.app__logout-icon {
|
||||
position: absolute;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -1.5rem;
|
||||
margin-top: -1.5rem;
|
||||
-webkit-transition: opacity 0.1s;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
.app__logout-icon path {
|
||||
stroke-width: 4px;
|
||||
stroke-dasharray: 64.36235046386719;
|
||||
stroke-dashoffset: 64.36235046386719;
|
||||
-webkit-animation: animatePath 0.5s 0.5s forwards;
|
||||
animation: animatePath 0.5s 0.5s forwards;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
margin-left: -7.5rem;
|
||||
margin-top: -7.5rem;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
-webkit-animation: animRipple 0.4s;
|
||||
animation: animRipple 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animRipple {
|
||||
to {
|
||||
-webkit-transform: scale(3.5);
|
||||
transform: scale(3.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animRipple {
|
||||
to {
|
||||
-webkit-transform: scale(3.5);
|
||||
transform: scale(3.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes animatePath {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
@keyframes animatePath {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,951 @@
|
|||
@charset "utf-8";
|
||||
body,a,h1,h2,h3,h4,h5,h6,p,div,em,ul,li {
|
||||
font-family: PingFangSC-Ultralight, 'microsoft yahei';
|
||||
}
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*去除ul中li左边的圆点*/
|
||||
ul{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#win10 *{
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
|
||||
#win10-login{
|
||||
background: black no-repeat fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
#win10 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black no-repeat fixed;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
/*padding-top: 20px;*/
|
||||
}
|
||||
|
||||
#win10 *{
|
||||
scrollbar-arrow-color: #5e6a5c;); /*图6,三角箭头的颜色*/
|
||||
scrollbar-face-color: #5e6a5c; /*图5,立体滚动条的颜色*/
|
||||
scrollbar-3dlight-color: #5e6a5c; /*图1,立体滚动条亮边的颜色*/
|
||||
scrollbar-highlight-color: #5e6a5c; /*图2,滚动条空白部分的颜色*/
|
||||
scrollbar-shadow-color: #5e6a5c; /*图3,立体滚动条阴影的颜色*/
|
||||
scrollbar-darkshadow-color: #5e6a5c; /*图4,立体滚动条强阴影的颜色*/
|
||||
scrollbar-track-color: rgba(74, 84, 78, 0.41); /*图7,立体滚动条背景颜色*/
|
||||
scrollbar-base-color:#5e6a5c; /*滚动条的基本颜色*/
|
||||
}
|
||||
|
||||
#win10 hr { height:0px; border-top:1px solid #999; border-right:0px; border-bottom:0px; border-left:0px; }
|
||||
|
||||
#win10 .desktop {
|
||||
padding-top:30px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#win10_task_bar {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 30px;
|
||||
line-height:30px;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
z-index: 19930813;
|
||||
}
|
||||
|
||||
#win10 .btn_group {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#win10 .btn_group .btn {
|
||||
float: left;
|
||||
color:#333;
|
||||
font-weight:bold;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
text-overflow:ellipsis;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#win10 .btn_group .btn:hover {
|
||||
color: white;
|
||||
background-color: rgba(49,156,241,0.71);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#win10_btn_group_left{
|
||||
float: left;
|
||||
overflow: auto;
|
||||
max-width:200px;
|
||||
padding-left:0.5%;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle{
|
||||
float: left;
|
||||
overflow: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
#win10_btn_group_middle .btn_close{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
color: transparent;
|
||||
}
|
||||
#win10_btn_group_middle .btn:hover .btn_close{
|
||||
color: rgba(131, 168, 157, 0.71);
|
||||
}
|
||||
#win10_btn_group_middle .btn:hover .btn_close:hover{
|
||||
color: white;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle .btn_title{
|
||||
float: left;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle::-webkit-scrollbar-track {
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(30, 39, 34, 0.41);
|
||||
}
|
||||
|
||||
#win10_btn_group_right{
|
||||
float: right;
|
||||
max-width:200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#win10_btn_group_left .btn {
|
||||
height: 100%;
|
||||
width: 35px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#win10_btn_group_right .btn {
|
||||
height: 100%;
|
||||
min-width: 4px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px ;
|
||||
}
|
||||
|
||||
#win10_btn_show_desktop {
|
||||
border-left: grey 1px solid;
|
||||
width: 4px;
|
||||
margin-left: 3px;
|
||||
padding: 0 !important
|
||||
}
|
||||
|
||||
#win10_btn_time {
|
||||
font-size: 12px;
|
||||
/*line-height: 30px !important */
|
||||
}
|
||||
#win10-menu {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
height:auto;
|
||||
width: 12.5%;
|
||||
max-width: 880px;
|
||||
overflow: auto;
|
||||
z-index: 1000;
|
||||
overflow-y: hidden;
|
||||
transition: bottom 0.5s ;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
#win10-menu.hidden {
|
||||
top:-70%;
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar,.list::-webkit-scrollbar,#win10_command_center::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar-track,.list::-webkit-scrollbar-track,#win10_command_center::-webkit-scrollbar-track {
|
||||
background-color: rgba(74, 84, 78, 0.41);
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar-thumb,.list::-webkit-scrollbar-thumb,#win10_command_center::-webkit-scrollbar-thumb {
|
||||
background-color: #6a6a6a;
|
||||
}
|
||||
|
||||
#win10-menu .blocks::-webkit-scrollbar-button ,.list::-webkit-scrollbar-button ,#win10_command_center::-webkit-scrollbar-button {
|
||||
/*background-color: #6a6a6a;*/
|
||||
}
|
||||
|
||||
#win10-menu .list,.blocks{
|
||||
float: left;
|
||||
width: 180px;
|
||||
height:100%;
|
||||
overflow: auto;
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
#win10-menu .list{
|
||||
width:100%;
|
||||
padding:0;
|
||||
padding-top: 5px;
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#win10-menu .list .item.has-sub-down::after{
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content:"\f107";
|
||||
line-height: inherit;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#win10-menu .list .item.has-sub-up::after{
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content:"\f106";
|
||||
line-height: inherit;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#win10-menu .list .item,.sub-item{
|
||||
color:#333;
|
||||
margin: 1px 0;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.3s;
|
||||
position: relative;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
#win10-menu .list .item>.icon,#win10-menu .list .sub-item>.icon,.sub-item>.icon{
|
||||
line-height: 36px;
|
||||
font-size: 22px;
|
||||
float: left;
|
||||
margin-right: 0.5em;
|
||||
width: 36px;
|
||||
position: relative;
|
||||
top:2px;
|
||||
|
||||
}
|
||||
|
||||
#win10-menu .list .sub-item{
|
||||
padding-left:30px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
#win10-menu .list .item:hover,.sub-item:hover{
|
||||
background-color: rgba(49,156,241,0.71);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#win10-menu .blocks{
|
||||
max-width: 650px;
|
||||
width:calc(100% - 260px);
|
||||
}
|
||||
|
||||
#win10-menu-switcher{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
border-left: 1px solid grey;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#win10-menu-switcher:active{
|
||||
background-color: rgba(92, 109, 92, 0.81);
|
||||
}
|
||||
|
||||
#win10-menu .menu_group {
|
||||
float: left;
|
||||
width: 300px;
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group .title {
|
||||
padding: 5px;
|
||||
padding-top: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group:hover .title::after{
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content:"\f0c9";
|
||||
line-height: inherit;
|
||||
float: right;
|
||||
margin-right: 17px;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#win10 #win10-shortcuts {
|
||||
height: calc(100% - 40px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#win10 #win10-shortcuts.shortcuts-hidden .shortcut{display: none}
|
||||
|
||||
#win10 #win10-shortcuts .shortcut {
|
||||
width: 80px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
#win10 #win10-shortcuts .shortcut:hover {
|
||||
background-color: rgba(255, 255, 255, 0.11);
|
||||
}
|
||||
|
||||
#win10 #win10-shortcuts .shortcut>.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;
|
||||
}
|
||||
|
||||
#win10-shortcuts .shortcut .title {
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#win10_command_center {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 30px;
|
||||
width: 350px;
|
||||
background-color: rgba(255,255,255,0.7);
|
||||
height: calc(100% - 30px);
|
||||
transition: all 0.5s;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#win10_command_center.hidden_right {
|
||||
right: -350px;
|
||||
}
|
||||
|
||||
#win10_command_center > .title{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
#win10_command_center > .title:hover{
|
||||
background-color: rgba(255, 255, 255, 0.19);
|
||||
}
|
||||
|
||||
#win10_btn_group_right #win10_btn_command{
|
||||
font-size: 20px;
|
||||
}
|
||||
#win10_btn_command .msgNof{
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 20px;
|
||||
border: 1px solid red;
|
||||
background-color: red;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#win10_btn_command_center_clean_all{
|
||||
color:#777;
|
||||
text-align: right;
|
||||
font-size:12px;
|
||||
float: right;
|
||||
margin-top:40px;
|
||||
margin-right:24px;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
#win10_btn_command_center_clean_all:hover{
|
||||
cursor: pointer;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs{
|
||||
position: absolute;
|
||||
top:60px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
/*padding: 10px;*/
|
||||
}
|
||||
|
||||
#win10_command_center .btn_close_msg{
|
||||
line-height: inherit;
|
||||
transition: color 0.5s ;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg{
|
||||
width: calc(100% - 20px);
|
||||
min-height: 40px;
|
||||
padding:10px;
|
||||
margin-top: 4px;
|
||||
transition: background-color 0.5s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg.animated{
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg:hover{
|
||||
cursor: default;
|
||||
background-color: rgba(255, 255, 255, 0.19);
|
||||
}
|
||||
#win10_command_center .msgs .msg:hover .title{
|
||||
color: #333;
|
||||
}
|
||||
#win10_command_center .msgs .msg:hover>.btn_close_msg{
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg:hover>.content{
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg>.title{
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg>.btn_close_msg{
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
padding: 3px;
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg>.btn_close_msg:hover{
|
||||
color: white;
|
||||
}
|
||||
|
||||
#win10_command_center .msgs .msg>.content{
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle .btn{
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
height: inherit;
|
||||
max-width: 140px;
|
||||
line-height: 40px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
word-break: keep-all;
|
||||
padding: 0 10px;
|
||||
margin-right: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#win10_btn_group_middle .btn.active{
|
||||
/* background: #F6F6F6; */
|
||||
-webkit-box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.8);
|
||||
-moz-box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.8);
|
||||
box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
#win10_btn_group_middle .btn:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.win10-open-iframe{
|
||||
/*繁华年间许你一世安宁提供*/
|
||||
background-color: transparent;
|
||||
/* border: 1px solid #323232; */
|
||||
border: #f0f6f6 solid 1px !important;
|
||||
-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);
|
||||
border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-content{
|
||||
background-color: white;
|
||||
max-height: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-title{
|
||||
box-sizing: border-box;
|
||||
background-color: #F6F6F6;
|
||||
padding-right: 160px;
|
||||
border-radius:4px 4px 0px 0px;
|
||||
color: #333;
|
||||
text-align:center;
|
||||
}
|
||||
.win10-open-iframe.hide{
|
||||
display: none;
|
||||
}
|
||||
.win10-btn_refresh{
|
||||
float: right;
|
||||
}
|
||||
#win10 .img-loader{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.win10-open-iframe .layui-layer-min cite{display: none;}
|
||||
.win10-open-iframe .layui-layer-max:hover{background-image:none}
|
||||
.win10-open-iframe .layui-layer-max,.layui-layer-maxmin{background:none}
|
||||
.win10-open-iframe .layui-layer-setwin a.layui-layer-close1:hover::before{
|
||||
content:"\f057";
|
||||
color: #FF6057;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-min::before{
|
||||
content:"\f111";
|
||||
color: #28CA40;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-min:hover::before{
|
||||
content:"\f056";
|
||||
color: #28CA40;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-max::before{
|
||||
content:"\f111";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-max:hover::before{
|
||||
content:"\f055";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-maxmin.layui-layer-max::before{
|
||||
content:"\f111";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-maxmin.layui-layer-max:hover::before{
|
||||
content:"\f055";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-close::before{
|
||||
content:"\f111";
|
||||
color: #FF6057;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
||||
text-decoration: none;
|
||||
}
|
||||
.win10-btn-refresh,.win10-btn-change-url,.win10-btn-refresh:hover,.win10-btn-change-url:hover{
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.win10-open-iframe .win10-btn-refresh::before,.win10-btn-change-url::before{
|
||||
content:"\f111";
|
||||
color: #029FFF;
|
||||
font: normal normal normal 18px/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;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-ico{background-image:none;}
|
||||
|
||||
.win10-layer-open-browser textarea{
|
||||
margin: 20px;
|
||||
outline: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-min cite{display: none;}
|
||||
.win10-layer-open-browser .layui-layer-max:hover{background-image:none}
|
||||
.win10-layer-open-browser .layui-layer-max,.layui-layer-maxmin{background:none}
|
||||
.win10-layer-open-browser .layui-layer-setwin a.layui-layer-close:hover::before{
|
||||
content:"\f057";
|
||||
color: #FF6057;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-min::before{
|
||||
content:"\f111";
|
||||
color: #28CA40;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-min:hover::before{
|
||||
content:"\f056";
|
||||
color: #28CA40;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-max::before{
|
||||
content:"\f111";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-max:hover::before{
|
||||
content:"\f055";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-maxmin.layui-layer-max::before{
|
||||
content:"\f111";
|
||||
color: #FFBD2E;
|
||||
font: normal normal normal 18px/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;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-close::before{
|
||||
content:"\f111";
|
||||
color: #FF6057;
|
||||
font: normal normal normal 18px/1 FontAwesome;
|
||||
}
|
||||
|
||||
.win10-layer-open-browser .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*右键菜单*/
|
||||
#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 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 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 }
|
||||
|
||||
/*块级按钮*/
|
||||
.win10-open-iframe .layui-layer-ico{background-image:none;}
|
||||
.win10-open-iframe .layui-layer-setwin {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
font-size: 0;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.win10-open-iframe .layui-layer-setwin a {
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
.win10-open-iframe .layui-layer-title .icon ,#win10_btn_group_middle .btn_title .icon{
|
||||
font-size: 15px;
|
||||
padding: 1px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.win10-open-iframe .layui-layer-title img.icon,#win10_btn_group_middle .btn_title img.icon{
|
||||
width: 20px;
|
||||
position: relative;
|
||||
top:5px ;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
#win10-menu>.list>.sub-item img.icon,#win10-menu>.list>.item img.icon{
|
||||
width: 36px;
|
||||
height:36px;
|
||||
position: relative;
|
||||
top:2px ;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
/*桌面舞台样式*/
|
||||
#win10-desktop-scene{
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/*--------------尾部--------------------*/
|
||||
#footer{
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#footer .dock{
|
||||
/*width: 72%; */
|
||||
height: 100%;
|
||||
line-height: 60px;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
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);
|
||||
-webkit-border-top-left-radius: 6px;
|
||||
-webkit-border-top-right-radius: 6px;
|
||||
}
|
||||
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
|
||||
#footer .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 */
|
||||
}
|
||||
.demo ul{
|
||||
position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
|
||||
}
|
||||
}
|
||||
#footer .dock ul{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#footer .dock img{
|
||||
z-index:222;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#footer .dock ul li{
|
||||
float: left;
|
||||
margin: 5px 10px;
|
||||
/*过渡的时间 效果*/
|
||||
-webkit-transition: 0.15s linear;
|
||||
}
|
||||
|
||||
#footer .dock ul li:hover{
|
||||
/*参照*/
|
||||
-webkit-transform-origin:bottom center;
|
||||
/*形变*/
|
||||
-webkit-transform:scale(1.5);
|
||||
}
|
||||
|
||||
#footer .dock .dock-tips{
|
||||
color:white;
|
||||
font-size:0.4em;
|
||||
border-radius: 5px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: none;
|
||||
padding:0px 10px;
|
||||
margin-top: -30px;
|
||||
margin-bottom: 10px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#footer .dock .dock-tips .arrow{
|
||||
opacity: 0.5;
|
||||
border-left:5px solid transparent;
|
||||
border-right:5px solid transparent;
|
||||
border-top:5px solid #000;
|
||||
border-bottom:5px solid transparent;
|
||||
width:0;
|
||||
height:0;
|
||||
}
|
||||
|
||||
/*各种颜色 具体效果见 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;}
|
||||
.win10-open-iframe .black,#win10 .black{background:#393D49!important;}
|
||||
.win10-open-iframe .blue,#win10 .blue{background:#1E9FFF!important;}
|
||||
.win10-open-iframe .orange,#win10 .orange{background:#F7B824!important;}
|
||||
.win10-open-iframe .red,#win10 .red{background:#FF5722!important;}
|
||||
.win10-open-iframe .dark,#win10 .dark{background:#2F4056!important;}
|
||||
.win10-open-iframe .purple,#win10 .purple{background:#b074e6!important;}
|
||||
@media screen and (max-width:768px){
|
||||
#win10-menu{
|
||||
width:100%;
|
||||
height: calc(100% - 31px);
|
||||
}
|
||||
#win10-menu.hidden{
|
||||
top: -100% ;
|
||||
}
|
||||
#win10_command_center{
|
||||
width: 100%;
|
||||
}
|
||||
#win10_command_center.hidden_right {
|
||||
right: -100%;
|
||||
}
|
||||
.layui-layer-setwin .layui-layer-max{
|
||||
display: none;
|
||||
}
|
||||
#win10_btn_group_left .btn {
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
}
|
||||
#win10_btn_group_right .btn {
|
||||
height: 100%;
|
||||
min-width: 4px;
|
||||
padding: 0 10px;
|
||||
font-size: 16px!important;
|
||||
}
|
||||
#win10_btn_show_desktop {
|
||||
border-left: grey 1px solid;
|
||||
width: 30px;
|
||||
margin-left: 3px;
|
||||
padding: 0 !important
|
||||
}
|
||||
#win10_btn_group_left{
|
||||
max-width:100px;
|
||||
}
|
||||
#win10_btn_group_middle{
|
||||
width:calc(100% - 160px);
|
||||
}
|
||||
#win10_btn_group_middle .btn{
|
||||
padding: 0 3px;
|
||||
}
|
||||
#win10_btn_group_right{
|
||||
max-width:150px;
|
||||
}
|
||||
#win10-menu .list{
|
||||
padding-left: 2px;
|
||||
position: absolute;
|
||||
width: calc(100% - 31px);
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
#win10-menu .blocks{
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
width:calc(100% - 31px);
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#win10-menu .menu_group {
|
||||
width: 90%;
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#win10_btn_time{display: none}
|
||||
#win10-menu-switcher{
|
||||
display: none;
|
||||
}
|
||||
#win10-menu>.win10-menu-hidden{
|
||||
display: block;
|
||||
}
|
||||
#win10_btn_group_middle .btn_close{
|
||||
display: none;
|
||||
}
|
||||
.win10-open-iframe .layui-layer-setwin a {
|
||||
width: 32px;
|
||||
}
|
||||
#footer{
|
||||
bottom:0;
|
||||
}
|
||||
|
||||
#footer .dock{
|
||||
width: 100%;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<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>
|
||||
<link rel='Shortcut Icon' type='image/x-icon' href='./img/apple.ico'>
|
||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||
<link href="./css/animate.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link href="./css/macdefault.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="./js/mac.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
||||
}
|
||||
</style>
|
||||
<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('官方交流一群', '欢迎各位大侠加入讨论：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=4Er0u8i">[点击加入]205546163</a>')
|
||||
}, 2500);
|
||||
|
||||
setTimeout(function () {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '最新资讯',
|
||||
area: ['300px', '380px'],
|
||||
shade:0,
|
||||
skin:'win10-open-iframe',
|
||||
offset: 'rb',
|
||||
content: 'broadcast.html'
|
||||
})
|
||||
},2000)
|
||||
|
||||
|
||||
});
|
||||
|
||||
//dock特效 感谢安震110
|
||||
$(function () {
|
||||
dock();
|
||||
});
|
||||
$(window).resize(function() {
|
||||
dock();
|
||||
});
|
||||
dock=function(){
|
||||
var width=document.body.clientWidth;
|
||||
if(width>768){
|
||||
$("#footer .dock li a img").hover(
|
||||
function(){
|
||||
$(this).parent('a').prev().css('display','flex');
|
||||
},
|
||||
function(){
|
||||
$(this).parent('a').prev().css('display','none');
|
||||
}
|
||||
);
|
||||
}else{
|
||||
$("#footer .dock li a img").hover(function(){
|
||||
$(this).parent('a').prev().css('display','none');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="win10">
|
||||
<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官网')">
|
||||
<img class="icon" src="./img/icon/computer.png"/>
|
||||
<div class="title">UI官网</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/trashicon.png\'/>回收站')">
|
||||
<img class="icon" src="./img/icon/trashicon.png"/>
|
||||
<div class="title">回收站</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="Win10.openUrl('win10ui.yuri2.cn/src/doc.php','<img class=\'icon\' src=\'./img/icon/gamecenter.png\'/>GameCenter')">
|
||||
<img class="icon" src="./img/icon/gamecenter.png"/>
|
||||
<div class="title">GameCenter</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="window.open('https://github.com/yuri2peter/win10-ui')">
|
||||
<img class="icon" src="./img/icon/icloud.png"/>
|
||||
<div class="title">iCloud</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="Win10.openUrl('https://www.oschina.net/p/win10-ui','<img class=\'icon\' src=\'./img/icon/maps.png\'/>Map')">
|
||||
<img class="icon" src="./img/icon/maps.png"/>
|
||||
<div class="title">地图</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="window.open('https://github.com/yuri2peter/win10-ui/archive/master.zip')">
|
||||
<img class="icon" src="./img/icon/prefapp.png"/>
|
||||
<div class="title">设置</div>
|
||||
</div>
|
||||
<div class="shortcut" ondblclick='Win10.openUrl("./login.html","<i class=\"fa fa-user icon black-green\"></i>登录页")'>
|
||||
<i class="fa fa-user icon black-green"></i>
|
||||
<div class="title">登录页(双击)</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div id="win10-menu" class="hidden">
|
||||
<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>
|
||||
<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.menuClose()">关闭菜单</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-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>
|
||||
</div>
|
||||
<div id="win10_command_center" class="hidden_right">
|
||||
<div class="title">
|
||||
<h4 style="float: left">消息中心 </h4>
|
||||
<span id="win10_btn_command_center_clean_all">全部清除</span>
|
||||
</div>
|
||||
<div class="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" id="win10-btn-browser"><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">
|
||||
<!--0:00<br/>-->
|
||||
<!--1993/8/13-->
|
||||
</div>
|
||||
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="win10_btn_show_desktop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div class="dock">
|
||||
<ul>
|
||||
<li><span class="dock-tips">finder<span class="arrow"></span></span><a href="#"> <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">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">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li>
|
||||
<li><span class="dock-tips">trashicon<span class="arrow"></span></span><a href="#"> <img src="./img/icon/trashicon.png"></a></li>
|
||||
<li><span class="dock-tips">appstore<span class="arrow"></span></span><a href="#"> <img src="./img/icon/appstore.png"></a></li>
|
||||
<li><span class="dock-tips">iTunes<span class="arrow"></span></span><a href="#"> <img src="./img/icon/iTunes.png"></a></li>
|
||||
<li><span class="dock-tips">imusic<span class="arrow"></span></span><a href="#"> <img src="./img/icon/imusic.png"></a></li>
|
||||
<li><span class="dock-tips">preview<span class="arrow"></span></span><a href="#"> <img src="./img/icon/preview.png"></a></li>
|
||||
<li><span class="dock-tips">mail<span class="arrow"></span></span><a href="#"> <img src="./img/icon/mail.png"></a></li>
|
||||
<li><span class="dock-tips">notes.png<span class="arrow"></span></span><a href="#"> <img src="./img/icon/notes.png"></a></li>
|
||||
<li><span class="dock-tips">messages<span class="arrow"></span></span><a href="#"> <img src="./img/icon/messages.png"></a></li>
|
||||
<li><span class="dock-tips">maps<span class="arrow"></span></span><a href="#"> <img src="./img/icon/maps.png"></a></li>
|
||||
<li><span class="dock-tips">ibooks<span class="arrow"></span></span><a href="#"> <img src="./img/icon/ibooks.png"></a></li>
|
||||
<li><span class="dock-tips">facetime<span class="arrow"></span></span><a href="#"> <img src="./img/icon/facetime.png"></a></li>
|
||||
<li><span class="dock-tips">launchpad<span class="arrow"></span></span><a href="#"> <img src="./img/icon/launchpad.png"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
|
|
@ -0,0 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<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>
|
||||
<link rel='Shortcut Icon' type='image/x-icon' href='./img/apple.ico'>
|
||||
<script type="text/javascript" src="./js/jquery-2.2.4.min.js"></script>
|
||||
<link href="./css/animate.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="./component/layer-v3.0.3/layer/layer.js"></script>
|
||||
<link rel="stylesheet" href="./component/font-awesome-4.7.0/css/font-awesome.min.css">
|
||||
<link href="./css/macdefault.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="./js/mac.js"></script>
|
||||
<style>
|
||||
* {
|
||||
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
Win10.onReady(function () {
|
||||
|
||||
//设置壁纸
|
||||
Win10.setBgUrl({
|
||||
main: './img/wallpapers/main.jpg',
|
||||
mobile: './img/wallpapers/mobile.jpg',
|
||||
});
|
||||
|
||||
Win10.setAnimated([
|
||||
'animated flip',
|
||||
'animated bounceIn',
|
||||
], 0.01);
|
||||
});
|
||||
//dock特效 感谢安震110
|
||||
$(function () {
|
||||
dock();
|
||||
});
|
||||
$(window).resize(function() {
|
||||
dock();
|
||||
});
|
||||
dock=function(){
|
||||
var width=document.body.clientWidth;
|
||||
console.log(width);
|
||||
if(width>768){
|
||||
$("#footer .dock li a img").hover(
|
||||
function(){
|
||||
$(this).parent('a').prev().css('display','flex');
|
||||
},
|
||||
function(){
|
||||
$(this).parent('a').prev().css('display','none');
|
||||
}
|
||||
);
|
||||
}else{
|
||||
$("#footer .dock li a img").hover(function(){
|
||||
$(this).parent('a').prev().css('display','none');
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="win10">
|
||||
<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官网')">
|
||||
<img class="icon" src="./img/icon/computer.png"/>
|
||||
<div class="title">UI官网</div>
|
||||
</div>
|
||||
<div class="shortcut" onclick="window.open('./demo.html')">
|
||||
<img class="icon" src="./img/icon/demo.png"/>
|
||||
<div class="title">查看DEMO</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>
|
||||
<div class="item" onclick=" Win10.exit();"><i class="icon fa fa-window-close fa-fw"></i>关闭</div>
|
||||
</div>
|
||||
<div class="blocks">
|
||||
<div class="menu_group">
|
||||
<div class="title">Welcome</div>
|
||||
<div class="block" loc="1,1" size="6,4">
|
||||
<div class="content">
|
||||
<div style="font-size:100px;line-height: 132px;margin: 0 auto ;display: block"
|
||||
class="fa fa-fw fa-windows win10-block-content-text"></div>
|
||||
<div class="win10-block-content-text" style="font-size: 22px">欢迎使用 Win10-UI</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="win10-menu-switcher"></div>
|
||||
</div>
|
||||
<div id="win10_command_center" class="hidden_right">
|
||||
<div class="title">
|
||||
<h4 style="float: left">消息中心 </h4>
|
||||
<span id="win10_btn_command_center_clean_all">全部清除</span>
|
||||
</div>
|
||||
<div class="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" id="win10-btn-browser"><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">
|
||||
<!--0:00<br/>-->
|
||||
<!--1993/8/13-->
|
||||
</div>
|
||||
<div class="btn" id="win10_btn_command"><span id="win10-msg-nof" class="fa fa-list-ul"></span></div>
|
||||
<div class="btn" id="win10_btn_show_desktop"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div class="dock">
|
||||
<ul>
|
||||
<li><span class="dock-tips">finder<span class="arrow"></span></span><a href="#"> <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">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">prefapp<span class="arrow"></span></span><a href="#"> <img src="./img/icon/prefapp.png"></a></li>
|
||||
<li><span class="dock-tips">trashicon<span class="arrow"></span></span><a href="#"> <img src="./img/icon/trashicon.png"></a></li>
|
||||
<li><span class="dock-tips">appstore<span class="arrow"></span></span><a href="#"> <img src="./img/icon/appstore.png"></a></li>
|
||||
<li><span class="dock-tips">iTunes<span class="arrow"></span></span><a href="#"> <img src="./img/icon/iTunes.png"></a></li>
|
||||
<li><span class="dock-tips">imusic<span class="arrow"></span></span><a href="#"> <img src="./img/icon/imusic.png"></a></li>
|
||||
<li><span class="dock-tips">preview<span class="arrow"></span></span><a href="#"> <img src="./img/icon/preview.png"></a></li>
|
||||
<li><span class="dock-tips">mail<span class="arrow"></span></span><a href="#"> <img src="./img/icon/mail.png"></a></li>
|
||||
<li><span class="dock-tips">notes.png<span class="arrow"></span></span><a href="#"> <img src="./img/icon/notes.png"></a></li>
|
||||
<li><span class="dock-tips">messages<span class="arrow"></span></span><a href="#"> <img src="./img/icon/messages.png"></a></li>
|
||||
<li><span class="dock-tips">maps<span class="arrow"></span></span><a href="#"> <img src="./img/icon/maps.png"></a></li>
|
||||
<li><span class="dock-tips">ibooks<span class="arrow"></span></span><a href="#"> <img src="./img/icon/ibooks.png"></a></li>
|
||||
<li><span class="dock-tips">facetime<span class="arrow"></span></span><a href="#"> <img src="./img/icon/facetime.png"></a></li>
|
||||
<li><span class="dock-tips">launchpad<span class="arrow"></span></span><a href="#"> <img src="./img/icon/launchpad.png"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,62 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
var animating = false,
|
||||
submitPhase1 = 1100,
|
||||
submitPhase2 = 400,
|
||||
logoutPhase1 = 800,
|
||||
$login = $(".login"),
|
||||
$app = $(".app");
|
||||
|
||||
function ripple(elem, e) {
|
||||
$(".ripple").remove();
|
||||
var elTop = elem.offset().top,
|
||||
elLeft = elem.offset().left,
|
||||
x = e.pageX - elLeft,
|
||||
y = e.pageY - elTop;
|
||||
var $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 = true;
|
||||
var that = this;
|
||||
ripple($(that), e);
|
||||
$(that).addClass("processing");
|
||||
setTimeout(function() {
|
||||
$(that).addClass("success");
|
||||
setTimeout(function() {
|
||||
$app.show();
|
||||
$app.css("top");
|
||||
$app.addClass("active");
|
||||
}, submitPhase2 - 70);
|
||||
setTimeout(function() {
|
||||
$login.hide();
|
||||
$login.addClass("inactive");
|
||||
animating = false;
|
||||
$(that).removeClass("success processing");
|
||||
}, submitPhase2);
|
||||
}, submitPhase1);
|
||||
});
|
||||
|
||||
$(document).on("click", ".app__logout", function(e) {
|
||||
if (animating) return;
|
||||
$(".ripple").remove();
|
||||
animating = true;
|
||||
var that = this;
|
||||
$(that).addClass("clicked");
|
||||
setTimeout(function() {
|
||||
$app.removeClass("active");
|
||||
$login.show();
|
||||
$login.css("top");
|
||||
$login.removeClass("inactive");
|
||||
}, logoutPhase1 - 120);
|
||||
setTimeout(function() {
|
||||
$app.hide();
|
||||
animating = false;
|
||||
$(that).removeClass("clicked");
|
||||
}, logoutPhase1);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,923 @@
|
|||
/**
|
||||
* Created by Yuri2 on 2017/7/10.
|
||||
*/
|
||||
window.Win10 = {
|
||||
_version:'v1.1.2.3',
|
||||
_debug:true,
|
||||
_bgs:{
|
||||
main:'',
|
||||
mobile:'',
|
||||
},
|
||||
_countTask: 0,
|
||||
_newMsgCount:0,
|
||||
_animated_classes:[],
|
||||
_animated_liveness:0,
|
||||
_switchMenuTooHurry:false,
|
||||
_lang:'unknown',
|
||||
_iframeOnClick :{
|
||||
resolution: 200,
|
||||
iframes: [],
|
||||
interval: null,
|
||||
Iframe: function() {
|
||||
this.element = arguments[0];
|
||||
this.cb = arguments[1];
|
||||
this.hasTracked = false;
|
||||
},
|
||||
track: function(element, cb) {
|
||||
this.iframes.push(new this.Iframe(element, cb));
|
||||
if (!this.interval) {
|
||||
var _this = this;
|
||||
this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
|
||||
}
|
||||
},
|
||||
checkClick: function() {
|
||||
if (document.activeElement) {
|
||||
var activeElement = document.activeElement;
|
||||
for (var i in this.iframes) {
|
||||
var eid=undefined;
|
||||
if((eid=this.iframes[i].element.id) && !document.getElementById(eid)){
|
||||
delete this.iframes[i];
|
||||
continue;
|
||||
}
|
||||
if (activeElement === this.iframes[i].element) { // user is in this Iframe
|
||||
if (this.iframes[i].hasTracked === false) {
|
||||
this.iframes[i].cb.apply(window, []);
|
||||
this.iframes[i].hasTracked = true;
|
||||
}
|
||||
} else {
|
||||
this.iframes[i].hasTracked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_iframe_click_lock_children:{},
|
||||
_renderBar:function () {
|
||||
//调整任务栏项目的宽度
|
||||
if(this._countTask<=0){return;} //防止除以0
|
||||
var btns=$("#win10_btn_group_middle>.btn");
|
||||
btns.css('width',('calc('+(1/this._countTask*100)+'% - 1px )'))
|
||||
},
|
||||
_handleReady:[],
|
||||
_hideShortcut:function () {
|
||||
var that=$("#win10 #win10-shortcuts .shortcut");
|
||||
that.removeClass('animated flipInX');
|
||||
that.addClass('animated flipOutX');
|
||||
},
|
||||
_showShortcut:function () {
|
||||
var that=$("#win10 #win10-shortcuts .shortcut");
|
||||
that.removeClass('animated flipOutX');
|
||||
that.addClass('animated flipInX');
|
||||
},
|
||||
_checkBgUrls:function () {
|
||||
var loaders=$('#win10>.img-loader');
|
||||
var flag=false;
|
||||
if(Win10.isSmallScreen()){
|
||||
if(Win10._bgs.mobile){
|
||||
loaders.each(function () {
|
||||
var loader=$(this);
|
||||
if(loader.attr('src')===Win10._bgs.mobile && loader.hasClass('loaded')){
|
||||
Win10._setBackgroundImg(Win10._bgs.mobile);
|
||||
flag=true;
|
||||
}
|
||||
});
|
||||
if(!flag){
|
||||
//没找到加载完毕的图片
|
||||
var img=$('<img class="img-loader" src="'+Win10._bgs.mobile+'" />');
|
||||
$('#win10').append(img);
|
||||
Win10._onImgComplete(img[0],function () {
|
||||
img.addClass('loaded');
|
||||
Win10._setBackgroundImg(Win10._bgs.mobile);
|
||||
})
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(Win10._bgs.main){
|
||||
loaders.each(function () {
|
||||
var loader=$(this);
|
||||
if(loader.attr('src')===Win10._bgs.main && loader.hasClass('loaded')){
|
||||
Win10._setBackgroundImg(Win10._bgs.main);
|
||||
flag=true;
|
||||
}
|
||||
});
|
||||
if(!flag){
|
||||
//没找到加载完毕的图片
|
||||
var img=$('<img class="img-loader" src="'+Win10._bgs.main+'" />');
|
||||
$('#win10').append(img);
|
||||
Win10._onImgComplete(img[0],function () {
|
||||
img.addClass('loaded');
|
||||
Win10._setBackgroundImg(Win10._bgs.main);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
_startAnimate:function () {
|
||||
setInterval(function () {
|
||||
var classes_lenth=Win10._animated_classes.length;
|
||||
var animated_liveness=Win10._animated_liveness;
|
||||
if(animated_liveness===0 || classes_lenth===0 || !$("#win10-menu").hasClass('opened')){return;}
|
||||
$('#win10-menu>.blocks>.menu_group>.block').each(function () {
|
||||
if(!$(this).hasClass('onAnimate') && Math.random()<=animated_liveness){
|
||||
var that=$(this);
|
||||
var class_animate = Win10._animated_classes[Math.floor((Math.random()*classes_lenth))];
|
||||
that.addClass('onAnimate');
|
||||
setTimeout(function () {
|
||||
that.addClass(class_animate);
|
||||
setTimeout(function () {
|
||||
that.removeClass('onAnimate');
|
||||
that.removeClass(class_animate);
|
||||
},3000);
|
||||
},Math.random()*2*1000)
|
||||
}
|
||||
})
|
||||
},1000);
|
||||
},
|
||||
_onImgComplete:function (img, callback) {
|
||||
if(!img){return;}
|
||||
var timer = setInterval(function() {
|
||||
if (img.complete) {
|
||||
callback(img);
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 50)
|
||||
},
|
||||
_setBackgroundImg:function (img) {
|
||||
$('#win10').css('background-image','url('+img+')')
|
||||
},
|
||||
_settop:function (layero) {
|
||||
if(!isNaN(layero)){
|
||||
layero=this.getLayeroByIndex(layero);
|
||||
}
|
||||
//置顶窗口
|
||||
var max_zindex=0;
|
||||
$(".win10-open-iframe").each(function () {
|
||||
z=parseInt($(this).css('z-index'));
|
||||
$(this).css('z-index',z-1);
|
||||
if(z>max_zindex){max_zindex=z;}
|
||||
});
|
||||
layero.css('z-index',max_zindex+1);
|
||||
},
|
||||
_checkTop:function () {
|
||||
var max_index=0,max_z=0,btn=null;
|
||||
$("#win10_btn_group_middle .btn.show").each(function () {
|
||||
var index=$(this).attr('index');
|
||||
var layero=Win10.getLayeroByIndex(index);
|
||||
var z=layero.css('z-index');
|
||||
if(z>max_z){
|
||||
max_index=index;
|
||||
max_z=z;
|
||||
btn=$(this);
|
||||
}
|
||||
});
|
||||
this._settop(max_index);
|
||||
$("#win10_btn_group_middle .btn").removeClass('active');
|
||||
if(btn){
|
||||
btn.addClass('active');
|
||||
}
|
||||
},
|
||||
_renderContextMenu:function (x,y,menu,trigger) {
|
||||
this._removeContextMenu();
|
||||
if(menu===true){return;}
|
||||
var dom = $("<div class='win10-context-menu'><ul></ul></div>");
|
||||
$('#win10').append(dom);
|
||||
var ul=dom.find('ul');
|
||||
for(var i=0;i<menu.length;i++){
|
||||
var item=menu[i];
|
||||
if(item==='|'){
|
||||
ul.append($('<hr/>'));
|
||||
continue;
|
||||
}
|
||||
if(typeof(item)==='string'){
|
||||
ul.append($('<li>'+item+'</li>'));
|
||||
continue;
|
||||
}
|
||||
if(typeof(item)==='object'){
|
||||
var sub=$('<li>'+item[0]+'</li>');
|
||||
ul.append(sub);
|
||||
sub.click(trigger,item[1]);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
//修正坐标
|
||||
if(x+150>document.body.clientWidth){x-=150}
|
||||
if(y+dom.height()>document.body.clientHeight){y-=dom.height()}
|
||||
dom.css({
|
||||
top:y,
|
||||
left:x,
|
||||
});
|
||||
},
|
||||
_removeContextMenu:function () {
|
||||
$('.win10-context-menu').remove();
|
||||
},
|
||||
_closeWin:function (index) {
|
||||
$("#win10_" + index).remove();
|
||||
layer.close(index);
|
||||
Win10._checkTop();
|
||||
Win10._countTask--;//回退countTask数
|
||||
Win10._renderBar();
|
||||
},
|
||||
_fixWindowsHeightAndWidth:function(){
|
||||
//此处代码修正全屏切换引起的子窗体尺寸超出屏幕
|
||||
var opens=$('.win10-open-iframe');
|
||||
var clientHeight=document.body.clientHeight;
|
||||
opens.each(function () {
|
||||
var layero_opened=$(this);
|
||||
var height=layero_opened.css('height');
|
||||
height=parseInt(height.replace('px',''));
|
||||
if (height+40>=clientHeight){
|
||||
layero_opened.css('height',clientHeight-40);
|
||||
layero_opened.find('.layui-layer-content').css('height',clientHeight-83);
|
||||
layero_opened.find('.layui-layer-content iframe').css('height',clientHeight-83);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 原 win10_bind_open_windows 子窗口事件自动绑定插件
|
||||
* @author:vG
|
||||
* @修订:Yuri2
|
||||
* @version:2.0.1
|
||||
* 说明: 所有#win10下的元素加入类win10-open-window即可自动绑定openUrl函数，无须用onclick手动绑定
|
||||
*/
|
||||
_bind_open_windows:function () {
|
||||
// 注册事件委派 打开url窗口
|
||||
$('#win10').on('click', '.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);
|
||||
}
|
||||
})
|
||||
},
|
||||
_init:function () {
|
||||
|
||||
//获取语言
|
||||
this._lang=(navigator.language || navigator.browserLanguage).toLowerCase();
|
||||
|
||||
$("#win10_btn_win").click(function () {
|
||||
Win10.commandCenterClose();
|
||||
Win10.menuToggle();
|
||||
});
|
||||
$("#win10_btn_command").click(function () {
|
||||
Win10.menuClose();
|
||||
Win10.commandCenterToggle();
|
||||
});
|
||||
$("#win10 .desktop").click(function () {
|
||||
Win10.menuClose();
|
||||
Win10.commandCenterClose();
|
||||
});
|
||||
$('#win10').on('click',".msg .btn_close_msg", function () {
|
||||
var msg = $(this).parent();
|
||||
$(msg).addClass('animated slideOutRight');
|
||||
setTimeout(function () {
|
||||
msg.remove()
|
||||
}, 500)
|
||||
});
|
||||
$('#win10_btn_command_center_clean_all').click(function () {
|
||||
var msgs=$('#win10_command_center .msg');
|
||||
msgs.addClass('animated slideOutRight');
|
||||
setTimeout(function () {
|
||||
msgs.remove()
|
||||
}, 1500);
|
||||
setTimeout(function () {
|
||||
Win10.commandCenterClose();
|
||||
}, 1000);
|
||||
});
|
||||
$("#win10_btn_show_desktop").click(function () {
|
||||
$("#win10 .desktop").click();
|
||||
Win10.hideWins();
|
||||
});
|
||||
$("#win10-menu-switcher").click(function () {
|
||||
if(Win10._switchMenuTooHurry){return;}
|
||||
Win10._switchMenuTooHurry=true;
|
||||
var class_name='win10-menu-hidden';
|
||||
var list=$("#win10-menu>.list");
|
||||
var blocks=$("#win10-menu>.blocks");
|
||||
var toggleSlide=function (obj) {
|
||||
if(obj.hasClass(class_name)){
|
||||
obj.addClass('animated slideInLeft');
|
||||
obj.removeClass('animated slideOutLeft');
|
||||
obj.removeClass(class_name);
|
||||
}else{
|
||||
setTimeout(function () {
|
||||
obj.addClass(class_name);
|
||||
},450);
|
||||
obj.addClass('animated slideOutLeft');
|
||||
obj.removeClass('animated slideInLeft');
|
||||
}
|
||||
};
|
||||
toggleSlide(list);
|
||||
toggleSlide(blocks);
|
||||
setTimeout(function () {
|
||||
Win10._switchMenuTooHurry=false;
|
||||
},520)
|
||||
});
|
||||
$("#win10_btn_group_middle").click(function () {
|
||||
$("#win10 .desktop").click();
|
||||
});
|
||||
$(document).on('click', '.win10-btn-refresh', function () {
|
||||
var index = $(this).attr('index');
|
||||
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);
|
||||
iframe.attr('src', value);
|
||||
});
|
||||
});
|
||||
$(document).on('mousedown','.win10-open-iframe',function () {
|
||||
var layero=$(this);
|
||||
Win10._settop(layero);
|
||||
Win10._checkTop();
|
||||
});
|
||||
$('#win10_btn_group_middle').on('click','.btn_close',function () {
|
||||
var index = $(this).parent().attr('index') ;
|
||||
Win10._closeWin(index);
|
||||
});
|
||||
$('#win10-menu .list').on('click','.item',function () {
|
||||
var e=$(this);
|
||||
if(e.hasClass('has-sub-down')){
|
||||
$('#win10-menu .list .item.has-sub-up').toggleClass('has-sub-down').toggleClass('has-sub-up');
|
||||
$("#win10-menu .list .sub-item").slideUp();
|
||||
}
|
||||
e.toggleClass('has-sub-down').toggleClass('has-sub-up');
|
||||
while (e.next().hasClass('sub-item')){
|
||||
e.next().slideToggle();
|
||||
e=e.next();
|
||||
}
|
||||
});
|
||||
$("#win10-btn-browser").click(function () {
|
||||
// var area = ['100%', (document.body.clientHeight - 40) + 'px'];
|
||||
// var offset = ['0', '0'];
|
||||
layer.prompt({
|
||||
title: Win10.lang('访问网址','Visit URL'),
|
||||
formType: 2,
|
||||
value: '',
|
||||
skin:'win10-layer-open-browser',
|
||||
area: ['300px', '150px'],
|
||||
zIndex:99999999999
|
||||
}, function (value, i) {
|
||||
layer.close(i);
|
||||
layer.msg(Win10.lang('请稍候...','Hold on please...'),{time:1500},function () {
|
||||
Win10.openUrl(value,value);
|
||||
});
|
||||
});
|
||||
});
|
||||
setInterval(function () {
|
||||
//重新写mac时间
|
||||
var myDate = new Date();
|
||||
/* var year=myDate.getFullYear();
|
||||
var week=myDate.getDay();
|
||||
var month=myDate.getMonth()+1;
|
||||
var date=myDate.getDate();
|
||||
var hours=myDate.getHours();
|
||||
var mins=myDate.getMinutes();if (mins<10){mins='0'+mins} */
|
||||
//$("#win10_btn_time").html(year+'/'+month+'/'+date+hours+':'+mins);
|
||||
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;
|
||||
}
|
||||
$("#win10_btn_time").html(week+hours+':'+mins);
|
||||
},1000);
|
||||
//离开前警告
|
||||
document.body.onbeforeunload = function(){
|
||||
window.event.returnValue = Win10.lang( '系统可能不会保存您所做的更改','The system may not save the changes you have made.');
|
||||
};
|
||||
Win10.buildList();//预处理左侧菜单
|
||||
Win10._startAnimate();//动画处理
|
||||
Win10.renderShortcuts();//渲染图标
|
||||
$("#win10-shortcuts").removeClass('shortcuts-hidden');//显示图标
|
||||
Win10._showShortcut();//显示图标
|
||||
Win10.renderDocks();//渲染DOCK
|
||||
//窗口改大小，重新渲染
|
||||
$(window).resize(function() {
|
||||
Win10.renderShortcuts();
|
||||
Win10._checkBgUrls();
|
||||
Win10._fixWindowsHeightAndWidth();
|
||||
Win10.renderDocks();
|
||||
});
|
||||
//细节
|
||||
$(document).on('focus',".win10-layer-open-browser textarea",function () {
|
||||
$(this).attr('spellcheck','false');
|
||||
});
|
||||
$(document).on('keyup',".win10-layer-open-browser textarea",function (e) {
|
||||
if(e.keyCode===13){
|
||||
$(this).parent().parent().find('.layui-layer-btn0').click();
|
||||
}
|
||||
});
|
||||
//打广告
|
||||
setTimeout(function () {
|
||||
console.log(Win10.lang('本页由Win10-UI强力驱动\n更多信息：http://win10ui.yuri2.cn \nWin10-UI,轻松打造别具一格的后台界面 ','The page is strongly driven by Win10-UI.\nFor more info: http://win10ui.yuri2.cn.\n Win10-UI, easy to create a unique background interface.'))
|
||||
},2000);
|
||||
//点击清空右键菜单
|
||||
$(document).click(function () {
|
||||
Win10._removeContextMenu();
|
||||
});
|
||||
//禁用右键的右键
|
||||
$(document).on('contextmenu','.win10-context-menu',function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
//设置默认右键菜单
|
||||
Win10.setContextMenu('#win10',true);
|
||||
Win10.setContextMenu('#win10>.desktop',[
|
||||
['<i class="fa fa-fw fa-star"></i> 收藏本页',function () {
|
||||
var url = window.location;
|
||||
var title = document.title;
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf("360se") > -1) {
|
||||
layer.alert(Win10.lang('您的浏览器不支持,请按 Ctrl+D 手动收藏!','Your browser does not support, please press Ctrl+D to manual collection!'));
|
||||
}
|
||||
else if (ua.indexOf("msie 8") > -1) {
|
||||
window.external.AddToFavoritesBar(url, title); //IE8
|
||||
}
|
||||
else if (document.all) {
|
||||
try{
|
||||
window.external.addFavorite(url, title);
|
||||
}catch(e){
|
||||
layer.alert(Win10.lang('您的浏览器不支持,请按 Ctrl+D 手动收藏!','Your browser does not support, please press Ctrl+D to manual collection!'));
|
||||
}
|
||||
}
|
||||
else if (window.sidebar) {
|
||||
window.sidebar.addPanel(title, url, "");
|
||||
}
|
||||
else {
|
||||
layer.alert(Win10.lang('您的浏览器不支持,请按 Ctrl+D 手动收藏!','Your browser does not support, please press Ctrl+D to manual collection!'));
|
||||
}
|
||||
}],
|
||||
['<i class="fa fa-fw fa-window-maximize"></i> '+Win10.lang('进入全屏','Enable Full Screen'),function () {Win10.enableFullScreen()}],
|
||||
['<i class="fa fa-fw fa-window-restore"></i> '+Win10.lang('退出全屏','Disable Full Screen'),function () {Win10.disableFullScreen()}],
|
||||
'|',
|
||||
['<i class="fa fa-fw fa-info-circle"></i> '+Win10.lang('关于','About Us'),function () {Win10.aboutUs()}],
|
||||
]);
|
||||
Win10.setContextMenu('#win10_btn_group_middle',[
|
||||
['<i class="fa fa-fw fa-window-maximize"></i> '+Win10.lang('全部显示','Show All Windows'),function () {Win10.showWins()}],
|
||||
['<i class="fa fa-fw fa-window-minimize"></i> '+Win10.lang('全部隐藏','Hide All Windows'),function () {Win10.hideWins()}],
|
||||
['<i class="fa fa-fw fa-window-close"></i> '+Win10.lang('全部关闭','Close All Windows'),function () {Win10.closeAll()}],
|
||||
]);
|
||||
|
||||
//处理消息图标闪烁
|
||||
setInterval(function () {
|
||||
var btn=$("#win10-msg-nof.on-new-msg");
|
||||
if(btn.length>0){
|
||||
btn.toggleClass('fa-commenting-o');
|
||||
}
|
||||
},600);
|
||||
|
||||
//绑定快捷键
|
||||
$("body").keyup(function (e) {
|
||||
if (e.ctrlKey)
|
||||
{
|
||||
switch (e.keyCode){
|
||||
case 37://left
|
||||
$("#win10_btn_win").click();
|
||||
break;
|
||||
case 38://up
|
||||
Win10.showWins();
|
||||
break;
|
||||
case 39://right
|
||||
$("#win10_btn_command").click();
|
||||
break;
|
||||
case 40://down
|
||||
Win10.hideWins();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
/**
|
||||
* WIN10-UI v1.1.2.2 桌面舞台支持补丁
|
||||
* WIN10-UI v1.1.2.2之后的版本不需要此补丁
|
||||
* @usage 直接引用即可（需要jquery）
|
||||
* @author Yuri2
|
||||
*/
|
||||
if($("#win10-desktop-scene").length<1) {
|
||||
$("#win10-shortcuts").css({
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 30,
|
||||
'z-index': 100,
|
||||
});
|
||||
$("#win10 .desktop").append("<div id='win10-desktop-scene' style='width: 100%;height: calc(100% - 40px);position: absolute;left: 0;top: 0; z-index: 0;background-color: transparent;'></div>")
|
||||
}
|
||||
|
||||
//属性绑定
|
||||
Win10._bind_open_windows();
|
||||
},
|
||||
setBgUrl:function (bgs) {
|
||||
this._bgs=bgs;
|
||||
this._checkBgUrls();
|
||||
},
|
||||
menuClose: function () {
|
||||
$("#win10-menu").removeClass('opened');
|
||||
$("#win10-menu").addClass('hidden');
|
||||
this._showShortcut();
|
||||
$(".win10-open-iframe").removeClass('hide');
|
||||
},
|
||||
menuOpen: function () {
|
||||
$("#win10-menu").addClass('opened');
|
||||
$("#win10-menu").removeClass('hidden');
|
||||
this._hideShortcut();
|
||||
$(".win10-open-iframe").addClass('hide');
|
||||
},
|
||||
menuToggle: function () {
|
||||
if(!$("#win10-menu").hasClass('opened')){
|
||||
this.menuOpen();
|
||||
}else{
|
||||
this.menuClose();
|
||||
}
|
||||
},
|
||||
commandCenterClose: function () {
|
||||
$("#win10_command_center").addClass('hidden_right');
|
||||
this._showShortcut();
|
||||
$(".win10-open-iframe").removeClass('hide');
|
||||
},
|
||||
commandCenterOpen: function () {
|
||||
$("#win10_command_center").removeClass('hidden_right');
|
||||
this._hideShortcut();
|
||||
$(".win10-open-iframe").addClass('hide');
|
||||
$("#win10-msg-nof").removeClass('on-new-msg fa-commenting-o');
|
||||
},
|
||||
renderShortcuts:function () {
|
||||
var h=parseInt(($("#win10 #win10-shortcuts")[0].offsetHeight-60)/100);
|
||||
var x=0,y=0;
|
||||
$("#win10 #win10-shortcuts .shortcut").each(function () {
|
||||
$(this).css({
|
||||
left:x*82+10,
|
||||
top:y*100+10,
|
||||
});
|
||||
y++;
|
||||
if(y>=h){
|
||||
y=0;
|
||||
x++;
|
||||
}
|
||||
});
|
||||
},
|
||||
renderDocks:function () {
|
||||
var cell_width=74;
|
||||
var width=document.body.clientWidth ;
|
||||
var docks=$("#footer .dock li");
|
||||
var max_num=parseInt(width/cell_width)-1;
|
||||
for (var i = 0; i < docks.length; i++) {
|
||||
if (i>max_num) {
|
||||
docks.eq(i).css('display','none');
|
||||
}else{
|
||||
docks.eq(i).css('display','list-item');
|
||||
}
|
||||
}
|
||||
},
|
||||
commandCenterToggle: function () {
|
||||
if($("#win10_command_center").hasClass('hidden_right')){
|
||||
this.commandCenterOpen();
|
||||
}else{
|
||||
this.commandCenterClose();
|
||||
}
|
||||
},
|
||||
newMsg: function (title, content,handle_click) {
|
||||
var e = $('<div class="msg">' +
|
||||
'<div class="title">' + title +'</div>'+
|
||||
'<div class="content">' + content + '</div>' +
|
||||
'<span class="btn_close_msg fa fa-close"></span>' +
|
||||
'</div>');
|
||||
$("#win10_command_center .msgs").prepend(e);
|
||||
e.find('.content:first,.title:first').click(function () {
|
||||
if(handle_click){
|
||||
handle_click(e);
|
||||
}
|
||||
});
|
||||
layer.tips(Win10.lang('新消息:','New message:')+title, '#win10_btn_command', {
|
||||
tips: [1, '#3c6a4a'],
|
||||
time: 3000
|
||||
});
|
||||
if($("#win10_command_center").hasClass('hidden_right')){
|
||||
$("#win10-msg-nof").addClass('on-new-msg');
|
||||
}
|
||||
},
|
||||
getLayeroByIndex: function (index) {
|
||||
return $('#' + 'layui-layer' + index)
|
||||
},
|
||||
isSmallScreen: function (size) {
|
||||
if (!size) {
|
||||
size = 768
|
||||
}
|
||||
var width = document.body.clientWidth;
|
||||
return width < size;
|
||||
},
|
||||
enableFullScreen: function () {
|
||||
var docElm = document.documentElement;
|
||||
//W3C
|
||||
if (docElm.requestFullscreen) {
|
||||
docElm.requestFullscreen();
|
||||
}
|
||||
//FireFox
|
||||
else if (docElm.mozRequestFullScreen) {
|
||||
docElm.mozRequestFullScreen();
|
||||
}
|
||||
//Chrome等
|
||||
else if (docElm.webkitRequestFullScreen) {
|
||||
docElm.webkitRequestFullScreen();
|
||||
}
|
||||
//IE11
|
||||
else if (docElm.msRequestFullscreen) {
|
||||
document.body.msRequestFullscreen();
|
||||
}
|
||||
},
|
||||
disableFullScreen: function () {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
}
|
||||
else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
},
|
||||
buildList:function () {
|
||||
$("#win10-menu .list .sub-item").slideUp();
|
||||
$("#win10-menu .list .item").each(function () {
|
||||
if($(this).next().hasClass('sub-item')){
|
||||
$(this).addClass('has-sub-down');
|
||||
$(this).removeClass('has-sub-up');
|
||||
}
|
||||
})
|
||||
},
|
||||
openUrl: function (url, title,areaAndOffset) {
|
||||
if(this._countTask>12){
|
||||
layer.msg("您打开的太多了，歇会儿吧~");
|
||||
return false;
|
||||
}else{
|
||||
this._countTask++;
|
||||
}
|
||||
if(!url){url='404'}
|
||||
url=url.replace(/(^\s*)|(\s*$)/g, "");
|
||||
var preg=/^(https?:\/\/|\.\.?\/|\/\/?)/;
|
||||
if(!preg.test(url)){
|
||||
url='http://'+url;
|
||||
}
|
||||
if (!url) {
|
||||
url = '//yuri2.cn';
|
||||
}
|
||||
if (!title) {
|
||||
title = url;
|
||||
}
|
||||
var area,offset;
|
||||
if (this.isSmallScreen() || areaAndOffset==='max') {
|
||||
area = ['100%', (document.body.clientHeight - 30) + 'px'];
|
||||
offset = ['30px', '0'];
|
||||
}else if(typeof areaAndOffset ==='object'){
|
||||
area=areaAndOffset[0];
|
||||
offset=areaAndOffset[1];
|
||||
}else {
|
||||
area = ['80%', '80%'];
|
||||
var topset, leftset;
|
||||
topset = parseInt($(window).height());
|
||||
topset = (topset - (topset * 0.8)) / 2 - 31;
|
||||
leftset = parseInt($(window).width());
|
||||
leftset = (leftset - (leftset * 0.8)) / 2 - 120;
|
||||
offset = [Math.round((this._countTask % 10 * 20) + topset) + 'px', Math.round((this._countTask % 10 * 20 + 100) + leftset) + 'px'];
|
||||
}
|
||||
var index = layer.open({
|
||||
type: 2,
|
||||
shadeClose: true,
|
||||
shade: false,
|
||||
maxmin: true, //开启最大化最小化按钮
|
||||
title: title,
|
||||
content: url,
|
||||
area: area,
|
||||
offset: offset,
|
||||
isOutAnim: false,
|
||||
skin:'win10-open-iframe',
|
||||
cancel: function (index, layero) {
|
||||
$("#win10_" + index).remove();
|
||||
Win10._checkTop();
|
||||
Win10._countTask--;//回退countTask数
|
||||
Win10._renderBar();
|
||||
},
|
||||
min: function (layero) {
|
||||
layero.hide();
|
||||
$("#win10_" + index).removeClass('show');
|
||||
Win10._checkTop();
|
||||
return false;
|
||||
},
|
||||
full:function (layero) {
|
||||
layero.find('.layui-layer-min').css('display','inline-block');
|
||||
layero_opened.css('margin-top',30);
|
||||
},
|
||||
});
|
||||
$('#win10_btn_group_middle .btn.active').removeClass('active');
|
||||
var btn = $('<div id="win10_' + index + '" index="' + index + '" class="btn show active"><div class="btn_title">' + title + '</div><div class="btn_close fa fa-close"></div></div>');
|
||||
var layero_opened=Win10.getLayeroByIndex(index);
|
||||
layero_opened.css('z-index',Win10._countTask+813);
|
||||
Win10._settop(layero_opened);
|
||||
//重新定义菜单布局
|
||||
//layero_opened.find('.layui-layer-setwin').prepend('<a class="win10-btn-change-url" index="' + index + '" href="#"><span class="fa fa-chain"></span></a><a class="win10-btn-refresh" index="' + index + '" href="#"><span class="fa fa-refresh"></span></a>');
|
||||
layero_opened.find('.layui-layer-setwin').prepend('<a class="win10-btn-refresh" index="' + index + '" href="#"></a>');
|
||||
layero_opened.find('.layui-layer-setwin .layui-layer-max').click(function () {
|
||||
setTimeout(function () {
|
||||
var height=layero_opened.css('height');
|
||||
height=parseInt(height.replace('px',''));
|
||||
if (height>=document.body.clientHeight){
|
||||
layero_opened.css('height',height-30);
|
||||
layero_opened.find('.layui-layer-content').css('height',height-72);
|
||||
layero_opened.find('.layui-layer-content iframe').css('height',height-72);
|
||||
}
|
||||
},300);
|
||||
|
||||
});
|
||||
$("#win10_btn_group_middle").append(btn);
|
||||
Win10._renderBar();
|
||||
btn.click(function () {
|
||||
var index = $(this).attr('index');
|
||||
var layero = Win10.getLayeroByIndex(index);
|
||||
var settop=function () {
|
||||
//置顶窗口
|
||||
var max_zindex=0;
|
||||
$(".win10-open-iframe").each(function () {
|
||||
z=parseInt($(this).css('z-index'));
|
||||
$(this).css('z-index',z-1);
|
||||
if(z>max_zindex){max_zindex=z;}
|
||||
});
|
||||
layero.css('z-index',max_zindex+1);
|
||||
};
|
||||
if ($(this).hasClass('show')) {
|
||||
if($(this).hasClass('active')){
|
||||
$(this).removeClass('active');
|
||||
$(this).removeClass('show');
|
||||
Win10._checkTop();
|
||||
layero.hide();
|
||||
}else{
|
||||
$('#win10_btn_group_middle .btn.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
Win10._settop(layero);
|
||||
}
|
||||
} else {
|
||||
$(this).addClass('show');
|
||||
$('#win10_btn_group_middle .btn.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
Win10._settop(layero);
|
||||
layero.show();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Win10._iframeOnClick.track(layero_opened.find('iframe:first')[0], function() {
|
||||
if(Object.getOwnPropertyNames(Win10._iframe_click_lock_children).length===0){
|
||||
Win10._settop(layero_opened);
|
||||
Win10._checkTop();
|
||||
}else{
|
||||
console.log('click locked');
|
||||
}
|
||||
});
|
||||
|
||||
this.menuClose();
|
||||
this.commandCenterClose();
|
||||
return index;
|
||||
},
|
||||
closeAll: function() {
|
||||
$(".win10-open-iframe").remove();
|
||||
$("#win10_btn_group_middle").html("");
|
||||
Win10._countTask = 0;
|
||||
Win10._renderBar();
|
||||
},
|
||||
setAnimated:function (animated_classes,animated_liveness) {
|
||||
this._animated_classes=animated_classes;
|
||||
this._animated_liveness=animated_liveness;
|
||||
},
|
||||
exit:function () {
|
||||
layer.confirm(Win10.lang('确认要关闭本页吗?','Are you sure you want to close this page?'), {icon: 3, title:Win10.lang('提示','Prompt')}, function(index){
|
||||
document.body.onbeforeunload = function(){};
|
||||
window.location.href="about:blank";
|
||||
window.close();
|
||||
layer.close(index);
|
||||
layer.alert(Win10.lang('哎呀,好像失败了呢。','Ops...There seems to be a little problem.'), {
|
||||
skin: 'layui-layer-lan'
|
||||
,closeBtn: 0
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
lang:function (cn,en) {
|
||||
return this._lang==='zh-cn'||this._lang==='zh-tw'?cn:en;
|
||||
},
|
||||
aboutUs: function() {
|
||||
//关于我们
|
||||
layer.open({
|
||||
type: 1,
|
||||
closeBtn: 1, //不显示关闭按钮
|
||||
anim: 2,
|
||||
skin: 'win10-open-iframe',
|
||||
title: 'MAC-UI '+this._version,
|
||||
shadeClose: true, //开启遮罩关闭
|
||||
area: ['320px', '200px'], //宽高
|
||||
content: '<div style="padding: 10px;font-size: 12px">' +
|
||||
'<p>支持组件:layer、jquery、animated.css、font-awesome</p>' +
|
||||
'<p>木子的忧伤、尤里2号©版权所有</p>' +
|
||||
'<p>作者邮箱:yuri2peter@qq.com</p>' +
|
||||
'</div>'
|
||||
});
|
||||
},
|
||||
setContextMenu:function (jq_dom, menu) {
|
||||
if(typeof (jq_dom)==='string'){
|
||||
jq_dom=$(jq_dom);
|
||||
}
|
||||
jq_dom.unbind('contextmenu');
|
||||
jq_dom.on('contextmenu', function(e) {
|
||||
if(menu){
|
||||
Win10._renderContextMenu(e.clientX,e.clientY,menu,this);
|
||||
if (e.cancelable) {
|
||||
// 判断默认行为是否已经被禁用
|
||||
if (!e.defaultPrevented) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
},
|
||||
hideWins:function () {
|
||||
$('#win10_btn_group_middle>.btn.show').each(function () {
|
||||
var index = $(this).attr('index');
|
||||
var layero = Win10.getLayeroByIndex(index);
|
||||
$(this).removeClass('show');
|
||||
$(this).removeClass('active');
|
||||
layero.hide();
|
||||
})
|
||||
},
|
||||
showWins:function () {
|
||||
$('#win10_btn_group_middle>.btn').each(function () {
|
||||
var index = $(this).attr('index');
|
||||
var layero = Win10.getLayeroByIndex(index);
|
||||
$(this).addClass('show');
|
||||
layero.show();
|
||||
});
|
||||
Win10._checkTop();
|
||||
},
|
||||
getDesktopScene:function () {
|
||||
return $("#win10-desktop-scene");
|
||||
},
|
||||
onReady:function (handle) {
|
||||
Win10._handleReady.push(handle);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$(function () {
|
||||
Win10._init();
|
||||
for(var i in Win10._handleReady){
|
||||
var handle=Win10._handleReady[i];
|
||||
handle();
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/**
|
||||
* Created by Yuri2 on 2017/7/31.
|
||||
*/
|
||||
//此处代码适合在子页面使用
|
||||
window.Win10_parent=parent.Win10; //获取父级Win10对象的句柄
|
||||
window.Win10_child={
|
||||
close:function () {
|
||||
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
||||
Win10_parent._closeWin(index);
|
||||
},
|
||||
newMsg: function (title, content,handle_click){
|
||||
Win10_parent.newMsg(title, content,handle_click)
|
||||
},
|
||||
openUrl: function (url, title,max){
|
||||
var click_lock_name=Math.random();
|
||||
Win10_parent._iframe_click_lock_children[click_lock_name]=true;
|
||||
var index=Win10_parent.openUrl(url, title,max);
|
||||
setTimeout(function () {
|
||||
delete Win10_parent._iframe_click_lock_children[click_lock_name];
|
||||
},1000);
|
||||
return index;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,916 @@
|
|||
/**
|
||||
* Created by Yuri2 on 2017/7/10.
|
||||
*/
|
||||
window.Win10 = {
|
||||
_version:'v1.1.2.3',
|
||||
_debug:true,
|
||||
_bgs:{
|
||||
main:'',
|
||||
mobile:'',
|
||||
},
|
||||
_countTask: 0,
|
||||
_newMsgCount:0,
|
||||
_animated_classes:[],
|
||||
_animated_liveness:0,
|
||||
_switchMenuTooHurry:false,
|
||||
_lang:'unknown',
|
||||
_iframeOnClick :{
|
||||
resolution: 200,
|
||||
iframes: [],
|
||||
interval: null,
|
||||
Iframe: function() {
|
||||
this.element = arguments[0];
|
||||
this.cb = arguments[1];
|
||||
this.hasTracked = false;
|
||||
},
|
||||
track: function(element, cb) {
|
||||
this.iframes.push(new this.Iframe(element, cb));
|
||||
if (!this.interval) {
|
||||
var _this = this;
|
||||
this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
|
||||
}
|
||||
},
|
||||
checkClick: function() {
|
||||
if (document.activeElement) {
|
||||
var activeElement = document.activeElement;
|
||||
for (var i in this.iframes) {
|
||||
var eid=undefined;
|
||||
if((eid=this.iframes[i].element.id) && !document.getElementById(eid)){
|
||||
delete this.iframes[i];
|
||||
continue;
|
||||
}
|
||||
if (activeElement === this.iframes[i].element) { // user is in this Iframe
|
||||
if (this.iframes[i].hasTracked === false) {
|
||||
this.iframes[i].cb.apply(window, []);
|
||||
this.iframes[i].hasTracked = true;
|
||||
}
|
||||
} else {
|
||||
this.iframes[i].hasTracked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_iframe_click_lock_children:{},
|
||||
_renderBar:function () {
|
||||
//调整任务栏项目的宽度
|
||||
if(this._countTask<=0){return;} //防止除以0
|
||||
var btns=$("#win10_btn_group_middle>.btn");
|
||||
btns.css('width',('calc('+(1/this._countTask*100)+'% - 1px )'))
|
||||
},
|
||||
_handleReady:[],
|
||||
_hideShortcut:function () {
|
||||
var that=$("#win10 #win10-shortcuts .shortcut");
|
||||
that.removeClass('animated flipInX');
|
||||
that.addClass('animated flipOutX');
|
||||
},
|
||||
_showShortcut:function () {
|
||||
var that=$("#win10 #win10-shortcuts .shortcut");
|
||||
that.removeClass('animated flipOutX');
|
||||
that.addClass('animated flipInX');
|
||||
},
|
||||
_checkBgUrls:function () {
|
||||
var loaders=$('#win10>.img-loader');
|
||||
var flag=false;
|
||||
if(Win10.isSmallScreen()){
|
||||
if(Win10._bgs.mobile){
|
||||
loaders.each(function () {
|
||||
var loader=$(this);
|
||||
if(loader.attr('src')===Win10._bgs.mobile && loader.hasClass('loaded')){
|
||||
Win10._setBackgroundImg(Win10._bgs.mobile);
|
||||
flag=true;
|
||||
}
|
||||
});
|
||||
if(!flag){
|
||||
//没找到加载完毕的图片
|
||||
var img=$('<img class="img-loader" src="'+Win10._bgs.mobile+'" />');
|
||||
$('#win10').append(img);
|
||||
Win10._onImgComplete(img[0],function () {
|
||||
img.addClass('loaded');
|
||||
Win10._setBackgroundImg(Win10._bgs.mobile);
|
||||
})
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(Win10._bgs.main){
|
||||
loaders.each(function () {
|
||||
var loader=$(this);
|
||||
if(loader.attr('src')===Win10._bgs.main && loader.hasClass('loaded')){
|
||||
Win10._setBackgroundImg(Win10._bgs.main);
|
||||
flag=true;
|
||||
}
|
||||
});
|
||||
if(!flag){
|
||||
//没找到加载完毕的图片
|
||||
var img=$('<img class="img-loader" src="'+Win10._bgs.main+'" />');
|
||||
$('#win10').append(img);
|
||||
Win10._onImgComplete(img[0],function () {
|
||||
img.addClass('loaded');
|
||||
Win10._setBackgroundImg(Win10._bgs.main);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
_startAnimate:function () {
|
||||
setInterval(function () {
|
||||
var classes_lenth=Win10._animated_classes.length;
|
||||
var animated_liveness=Win10._animated_liveness;
|
||||
if(animated_liveness===0 || classes_lenth===0 || !$("#win10-menu").hasClass('opened')){return;}
|
||||
$('#win10-menu>.blocks>.menu_group>.block').each(function () {
|
||||
if(!$(this).hasClass('onAnimate') && Math.random()<=animated_liveness){
|
||||
var that=$(this);
|
||||
var class_animate = Win10._animated_classes[Math.floor((Math.random()*classes_lenth))];
|
||||
that.addClass('onAnimate');
|
||||
setTimeout(function () {
|
||||
that.addClass(class_animate);
|
||||
setTimeout(function () {
|
||||
that.removeClass('onAnimate');
|
||||
that.removeClass(class_animate);
|
||||
},3000);
|
||||
},Math.random()*2*1000)
|
||||
}
|
||||
})
|
||||
},1000);
|
||||
},
|
||||
_onImgComplete:function (img, callback) {
|
||||
if(!img){return;}
|
||||
var timer = setInterval(function() {
|
||||
if (img.complete) {
|
||||
callback(img);
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 50)
|
||||
},
|
||||
_setBackgroundImg:function (img) {
|
||||
$('#win10').css('background-image','url('+img+')')
|
||||
},
|
||||
_settop:function (layero) {
|
||||
if(!isNaN(layero)){
|
||||
layero=this.getLayeroByIndex(layero);
|
||||
}
|
||||
//置顶窗口
|
||||
var max_zindex=0;
|
||||
$(".win10-open-iframe").each(function () {
|
||||
z=parseInt($(this).css('z-index'));
|
||||
$(this).css('z-index',z-1);
|
||||
if(z>max_zindex){max_zindex=z;}
|
||||
});
|
||||
layero.css('z-index',max_zindex+1);
|
||||
},
|
||||
_checkTop:function () {
|
||||
var max_index=0,max_z=0,btn=null;
|
||||
$("#win10_btn_group_middle .btn.show").each(function () {
|
||||
var index=$(this).attr('index');
|
||||
var layero=Win10.getLayeroByIndex(index);
|
||||
var z=layero.css('z-index');
|
||||
if(z>max_z){
|
||||
max_index=index;
|
||||
max_z=z;
|
||||
btn=$(this);
|
||||
}
|
||||
});
|
||||
this._settop(max_index);
|
||||
$("#win10_btn_group_middle .btn").removeClass('active');
|
||||
if(btn){
|
||||
btn.addClass('active');
|
||||
}
|
||||
},
|
||||
_renderContextMenu:function (x,y,menu,trigger) {
|
||||
this._removeContextMenu();
|
||||
if(menu===true){return;}
|
||||
var dom = $("<div class='win10-context-menu'><ul></ul></div>");
|
||||
$('#win10').append(dom);
|
||||
var ul=dom.find('ul');
|
||||
for(var i=0;i<menu.length;i++){
|
||||
var item=menu[i];
|
||||
if(item==='|'){
|
||||
ul.append($('<hr/>'));
|
||||
continue;
|
||||
}
|
||||
if(typeof(item)==='string'){
|
||||
ul.append($('<li>'+item+'</li>'));
|
||||
continue;
|
||||
}
|
||||
if(typeof(item)==='object'){
|
||||
var sub=$('<li>'+item[0]+'</li>');
|
||||
ul.append(sub);
|
||||
sub.click(trigger,item[1]);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
//修正坐标
|
||||
if(x+150>document.body.clientWidth){x-=150}
|
||||
if(y+dom.height()>document.body.clientHeight){y-=dom.height()}
|
||||
dom.css({
|
||||
top:y,
|
||||
left:x,
|
||||
});
|
||||
},
|
||||
_removeContextMenu:function () {
|
||||
$('.win10-context-menu').remove();
|
||||
},
|
||||
_closeWin:function (index) {
|
||||
$("#win10_" + index).remove();
|
||||
layer.close(index);
|
||||
Win10._checkTop();
|
||||
Win10._countTask--;//回退countTask数
|
||||
Win10._renderBar();
|
||||
},
|
||||
_fixWindowsHeightAndWidth:function(){
|
||||
//此处代码修正全屏切换引起的子窗体尺寸超出屏幕
|
||||
var opens=$('.win10-open-iframe');
|
||||
var clientHeight=document.body.clientHeight;
|
||||
opens.each(function () {
|
||||
var layero_opened=$(this);
|
||||
var height=layero_opened.css('height');
|
||||
height=parseInt(height.replace('px',''));
|
||||
if (height+40>=clientHeight){
|
||||
layero_opened.css('height',clientHeight-40);
|
||||
layero_opened.find('.layui-layer-content').css('height',clientHeight-83);
|
||||
layero_opened.find('.layui-layer-content iframe').css('height',clientHeight-83);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 原 win10_bind_open_windows 子窗口事件自动绑定插件
|
||||
* @author:vG
|
||||
* @修订:Yuri2
|
||||
* @version:2.0.1
|
||||
* 说明: 所有#win10下的元素加入类win10-open-window即可自动绑定openUrl函数，无须用onclick手动绑定
|
||||
*/
|
||||
_bind_open_windows:function () {
|
||||
// 注册事件委派 打开url窗口
|
||||
$('#win10').on('click', '.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);
|
||||
}
|
||||
})
|
||||
},
|
||||
_init:function () {
|
||||
|
||||
//获取语言
|
||||
this._lang=(navigator.language || navigator.browserLanguage).toLowerCase();
|
||||
|
||||
$("#win10_btn_win").click(function () {
|
||||
Win10.commandCenterClose();
|
||||
Win10.menuToggle();
|
||||
});
|
||||
$("#win10_btn_command").click(function () {
|
||||
Win10.menuClose();
|
||||
Win10.commandCenterToggle();
|
||||
});
|
||||
$("#win10 .desktop").click(function () {
|
||||
Win10.menuClose();
|
||||
Win10.commandCenterClose();
|
||||
});
|
||||
$('#win10').on('click',".msg .btn_close_msg", function () {
|
||||
var msg = $(this).parent();
|
||||
$(msg).addClass('animated slideOutRight');
|
||||
setTimeout(function () {
|
||||
msg.remove()
|
||||
}, 500)
|
||||
});
|
||||
$('#win10_btn_command_center_clean_all').click(function () {
|
||||
var msgs=$('#win10_command_center .msg');
|
||||
msgs.addClass('animated slideOutRight');
|
||||
setTimeout(function () {
|
||||
msgs.remove()
|
||||
}, 1500);
|
||||
setTimeout(function () {
|
||||
Win10.commandCenterClose();
|
||||
}, 1000);
|
||||
});
|
||||
$("#win10_btn_show_desktop").click(function () {
|
||||
$("#win10 .desktop").click();
|
||||
Win10.hideWins();
|
||||
});
|
||||
$("#win10-menu-switcher").click(function () {
|
||||
if(Win10._switchMenuTooHurry){return;}
|
||||
Win10._switchMenuTooHurry=true;
|
||||
var class_name='win10-menu-hidden';
|
||||
var list=$("#win10-menu>.list");
|
||||
var blocks=$("#win10-menu>.blocks");
|
||||
var toggleSlide=function (obj) {
|
||||
if(obj.hasClass(class_name)){
|
||||
obj.addClass('animated slideInLeft');
|
||||
obj.removeClass('animated slideOutLeft');
|
||||
obj.removeClass(class_name);
|
||||
}else{
|
||||
setTimeout(function () {
|
||||
obj.addClass(class_name);
|
||||
},450);
|
||||
obj.addClass('animated slideOutLeft');
|
||||
obj.removeClass('animated slideInLeft');
|
||||
}
|
||||
};
|
||||
toggleSlide(list);
|
||||
toggleSlide(blocks);
|
||||
setTimeout(function () {
|
||||
Win10._switchMenuTooHurry=false;
|
||||
},520)
|
||||
});
|
||||
$("#win10_btn_group_middle").click(function () {
|
||||
$("#win10 .desktop").click();
|
||||
});
|
||||
$(document).on('click', '.win10-btn-refresh', function () {
|
||||
var index = $(this).attr('index');
|
||||
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);
|
||||
Win10._checkTop();
|
||||
});
|
||||
$('#win10_btn_group_middle').on('click','.btn_close',function () {
|
||||
var index = $(this).parent().attr('index') ;
|
||||
Win10._closeWin(index);
|
||||
});
|
||||
$('#win10-menu .list').on('click','.item',function () {
|
||||
var e=$(this);
|
||||
if(e.hasClass('has-sub-down')){
|
||||
$('#win10-menu .list .item.has-sub-up').toggleClass('has-sub-down').toggleClass('has-sub-up');
|
||||
$("#win10-menu .list .sub-item").slideUp();
|
||||
}
|
||||
e.toggleClass('has-sub-down').toggleClass('has-sub-up');
|
||||
while (e.next().hasClass('sub-item')){
|
||||
e.next().slideToggle();
|
||||
e=e.next();
|
||||
}
|
||||
});
|
||||
$("#win10-btn-browser").click(function () {
|
||||
// var area = ['100%', (document.body.clientHeight - 40) + 'px'];
|
||||
// var offset = ['0', '0'];
|
||||
layer.prompt({
|
||||
title: Win10.lang('访问网址','Visit URL'),
|
||||
formType: 2,
|
||||
value: '',
|
||||
skin:'win10-layer-open-browser',
|
||||
area: ['300px', '150px'],
|
||||
zIndex:99999999999
|
||||
}, function (value, i) {
|
||||
layer.close(i);
|
||||
layer.msg(Win10.lang('请稍候...','Hold on please...'),{time:1500},function () {
|
||||
Win10.openUrl(value,value);
|
||||
});
|
||||
});
|
||||
});
|
||||
setInterval(function () {
|
||||
var myDate = new Date();
|
||||
var year=myDate.getFullYear();
|
||||
var month=myDate.getMonth()+1;
|
||||
var date=myDate.getDate();
|
||||
var hours=myDate.getHours();
|
||||
var mins=myDate.getMinutes();if (mins<10){mins='0'+mins}
|
||||
$("#win10_btn_time").html(hours+':'+mins+'<br/>'+year+'/'+month+'/'+date);
|
||||
},1000);
|
||||
//离开前警告
|
||||
document.body.onbeforeunload = function(){
|
||||
window.event.returnValue = Win10.lang( '系统可能不会保存您所做的更改','The system may not save the changes you have made.');
|
||||
};
|
||||
Win10.buildList();//预处理左侧菜单
|
||||
Win10._startAnimate();//动画处理
|
||||
Win10.renderShortcuts();//渲染图标
|
||||
$("#win10-shortcuts").removeClass('shortcuts-hidden');//显示图标
|
||||
Win10._showShortcut();//显示图标
|
||||
Win10.renderMenuBlocks();//渲染磁贴
|
||||
//窗口改大小，重新渲染
|
||||
$(window).resize(function() {
|
||||
Win10.renderShortcuts();
|
||||
Win10._checkBgUrls();
|
||||
Win10._fixWindowsHeightAndWidth();
|
||||
});
|
||||
//细节
|
||||
$(document).on('focus',".win10-layer-open-browser textarea",function () {
|
||||
$(this).attr('spellcheck','false');
|
||||
});
|
||||
$(document).on('keyup',".win10-layer-open-browser textarea",function (e) {
|
||||
if(e.keyCode===13){
|
||||
$(this).parent().parent().find('.layui-layer-btn0').click();
|
||||
}
|
||||
});
|
||||
//打广告
|
||||
setTimeout(function () {
|
||||
console.log(Win10.lang('本页由Win10-UI强力驱动\n更多信息：http://win10ui.yuri2.cn \nWin10-UI,轻松打造别具一格的后台界面 ','The page is strongly driven by Win10-UI.\nFor more info: http://win10ui.yuri2.cn.\n Win10-UI, easy to create a unique background interface.'))
|
||||
},2000);
|
||||
//点击清空右键菜单
|
||||
$(document).click(function () {
|
||||
Win10._removeContextMenu();
|
||||
});
|
||||
//禁用右键的右键
|
||||
$(document).on('contextmenu','.win10-context-menu',function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
});
|
||||
//设置默认右键菜单
|
||||
Win10.setContextMenu('#win10',true);
|
||||
Win10.setContextMenu('#win10>.desktop',[
|
||||
['<i class="fa fa-fw fa-star"></i> 收藏本页',function () {
|
||||
var url = window.location;
|
||||
var title = document.title;
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf("360se") > -1) {
|
||||
layer.alert(Win10.lang('您的浏览器不支持,请按 Ctrl+D 手动收藏!','Your browser does not support, please press Ctrl+D to manual collection!'));
|
||||
}
|
||||
else if (ua.indexOf("msie 8") > -1) {
|
||||
window.external.AddToFavoritesBar(url, title); //IE8
|
||||
}
|
||||
else if (document.all) {
|
||||
try{
|
||||
window.external.addFavorite(url, title);
|
||||
}catch(e){
|
||||
layer.alert(Win10.lang('您的浏览器不支持,请按 Ctrl+D 手动收藏!','Your browser does not support, please press Ctrl+D to manual collection!'));
|
||||
}
|
||||
}
|
||||
else if (window.sidebar) {
|
||||
window.sidebar.addPanel(title, url, "");
|
||||
}
|
||||
else {
|
||||
layer.alert(Win10.lang('您的浏览器不支持,请按 Ctrl+D 手动收藏!','Your browser does not support, please press Ctrl+D to manual collection!'));
|
||||
}
|
||||
}],
|
||||
['<i class="fa fa-fw fa-window-maximize"></i> '+Win10.lang('进入全屏','Enable Full Screen'),function () {Win10.enableFullScreen()}],
|
||||
['<i class="fa fa-fw fa-window-restore"></i> '+Win10.lang('退出全屏','Disable Full Screen'),function () {Win10.disableFullScreen()}],
|
||||
'|',
|
||||
['<i class="fa fa-fw fa-info-circle"></i> '+Win10.lang('关于','About Us'),function () {Win10.aboutUs()}],
|
||||
]);
|
||||
Win10.setContextMenu('#win10_btn_group_middle',[
|
||||
['<i class="fa fa-fw fa-window-maximize"></i> '+Win10.lang('全部显示','Show All Windows'),function () {Win10.showWins()}],
|
||||
['<i class="fa fa-fw fa-window-minimize"></i> '+Win10.lang('全部隐藏','Hide All Windows'),function () {Win10.hideWins()}],
|
||||
['<i class="fa fa-fw fa-window-close"></i> '+Win10.lang('全部关闭','Close All Windows'),function () {Win10.closeAll()}],
|
||||
]);
|
||||
|
||||
//处理消息图标闪烁
|
||||
setInterval(function () {
|
||||
var btn=$("#win10-msg-nof.on-new-msg");
|
||||
if(btn.length>0){
|
||||
btn.toggleClass('fa-commenting-o');
|
||||
}
|
||||
},600);
|
||||
|
||||
//绑定快捷键
|
||||
$("body").keyup(function (e) {
|
||||
if (e.ctrlKey)
|
||||
{
|
||||
switch (e.keyCode){
|
||||
case 37://left
|
||||
$("#win10_btn_win").click();
|
||||
break;
|
||||
case 38://up
|
||||
Win10.showWins();
|
||||
break;
|
||||
case 39://right
|
||||
$("#win10_btn_command").click();
|
||||
break;
|
||||
case 40://down
|
||||
Win10.hideWins();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* WIN10-UI v1.1.2.2 桌面舞台支持补丁
|
||||
* WIN10-UI v1.1.2.2之后的版本不需要此补丁
|
||||
* @usage 直接引用即可（需要jquery）
|
||||
* @author Yuri2
|
||||
*/
|
||||
if($("#win10-desktop-scene").length<1) {
|
||||
$("#win10-shortcuts").css({
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
'z-index': 100,
|
||||
});
|
||||
$("#win10 .desktop").append("<div id='win10-desktop-scene' style='width: 100%;height: calc(100% - 40px);position: absolute;left: 0;top: 0; z-index: 0;background-color: transparent;'></div>")
|
||||
}
|
||||
|
||||
//属性绑定
|
||||
Win10._bind_open_windows();
|
||||
},
|
||||
setBgUrl:function (bgs) {
|
||||
this._bgs=bgs;
|
||||
this._checkBgUrls();
|
||||
},
|
||||
menuClose: function () {
|
||||
$("#win10-menu").removeClass('opened');
|
||||
$("#win10-menu").addClass('hidden');
|
||||
this._showShortcut();
|
||||
$(".win10-open-iframe").removeClass('hide');
|
||||
},
|
||||
menuOpen: function () {
|
||||
$("#win10-menu").addClass('opened');
|
||||
$("#win10-menu").removeClass('hidden');
|
||||
this._hideShortcut();
|
||||
$(".win10-open-iframe").addClass('hide');
|
||||
},
|
||||
menuToggle: function () {
|
||||
if(!$("#win10-menu").hasClass('opened')){
|
||||
this.menuOpen();
|
||||
}else{
|
||||
this.menuClose();
|
||||
}
|
||||
},
|
||||
commandCenterClose: function () {
|
||||
$("#win10_command_center").addClass('hidden_right');
|
||||
this._showShortcut();
|
||||
$(".win10-open-iframe").removeClass('hide');
|
||||
},
|
||||
commandCenterOpen: function () {
|
||||
$("#win10_command_center").removeClass('hidden_right');
|
||||
this._hideShortcut();
|
||||
$(".win10-open-iframe").addClass('hide');
|
||||
$("#win10-msg-nof").removeClass('on-new-msg fa-commenting-o');
|
||||
},
|
||||
renderShortcuts:function () {
|
||||
var h=parseInt($("#win10 #win10-shortcuts")[0].offsetHeight/100);
|
||||
var x=0,y=0;
|
||||
$("#win10 #win10-shortcuts .shortcut").each(function () {
|
||||
$(this).css({
|
||||
left:x*82+10,
|
||||
top:y*100+10,
|
||||
});
|
||||
y++;
|
||||
if(y>=h){
|
||||
y=0;
|
||||
x++;
|
||||
}
|
||||
});
|
||||
},
|
||||
renderMenuBlocks:function () {
|
||||
var cell_width=44;
|
||||
var groups=$("#win10-menu .menu_group");
|
||||
groups.each(function () {
|
||||
var group=$(this);
|
||||
var blocks=group.children('.block');
|
||||
var max_height=0;
|
||||
blocks.each(function () {
|
||||
var that=$(this);
|
||||
var loc=that.attr('loc').split(',');
|
||||
var size=that.attr('size').split(',');
|
||||
var top=(loc[1]-1)*cell_width+40;
|
||||
var height=size[1]*cell_width;
|
||||
var full_height=top+height;
|
||||
if (full_height>max_height){max_height=full_height}
|
||||
that.css({
|
||||
top:top,
|
||||
left:(loc[0]-1)*cell_width,
|
||||
width:size[0]*cell_width,
|
||||
height:height,
|
||||
})
|
||||
|
||||
});
|
||||
group.css('height',max_height);
|
||||
});
|
||||
},
|
||||
commandCenterToggle: function () {
|
||||
if($("#win10_command_center").hasClass('hidden_right')){
|
||||
this.commandCenterOpen();
|
||||
}else{
|
||||
this.commandCenterClose();
|
||||
}
|
||||
},
|
||||
newMsg: function (title, content,handle_click) {
|
||||
var e = $('<div class="msg">' +
|
||||
'<div class="title">' + title +'</div>'+
|
||||
'<div class="content">' + content + '</div>' +
|
||||
'<span class="btn_close_msg fa fa-close"></span>' +
|
||||
'</div>');
|
||||
$("#win10_command_center .msgs").prepend(e);
|
||||
e.find('.content:first,.title:first').click(function () {
|
||||
if(handle_click){
|
||||
handle_click(e);
|
||||
}
|
||||
});
|
||||
layer.tips(Win10.lang('新消息:','New message:')+title, '#win10_btn_command', {
|
||||
tips: [1, '#3c6a4a'],
|
||||
time: 3000
|
||||
});
|
||||
if($("#win10_command_center").hasClass('hidden_right')){
|
||||
$("#win10-msg-nof").addClass('on-new-msg');
|
||||
}
|
||||
},
|
||||
getLayeroByIndex: function (index) {
|
||||
return $('#' + 'layui-layer' + index)
|
||||
},
|
||||
isSmallScreen: function (size) {
|
||||
if (!size) {
|
||||
size = 768
|
||||
}
|
||||
var width = document.body.clientWidth;
|
||||
return width < size;
|
||||
},
|
||||
enableFullScreen: function () {
|
||||
var docElm = document.documentElement;
|
||||
//W3C
|
||||
if (docElm.requestFullscreen) {
|
||||
docElm.requestFullscreen();
|
||||
}
|
||||
//FireFox
|
||||
else if (docElm.mozRequestFullScreen) {
|
||||
docElm.mozRequestFullScreen();
|
||||
}
|
||||
//Chrome等
|
||||
else if (docElm.webkitRequestFullScreen) {
|
||||
docElm.webkitRequestFullScreen();
|
||||
}
|
||||
//IE11
|
||||
else if (docElm.msRequestFullscreen) {
|
||||
document.body.msRequestFullscreen();
|
||||
}
|
||||
},
|
||||
disableFullScreen: function () {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
}
|
||||
else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
}
|
||||
else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
}
|
||||
else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
},
|
||||
buildList:function () {
|
||||
$("#win10-menu .list .sub-item").slideUp();
|
||||
$("#win10-menu .list .item").each(function () {
|
||||
if($(this).next().hasClass('sub-item')){
|
||||
$(this).addClass('has-sub-down');
|
||||
$(this).removeClass('has-sub-up');
|
||||
}
|
||||
})
|
||||
},
|
||||
openUrl: function (url, title,areaAndOffset) {
|
||||
if(this._countTask>12){
|
||||
layer.msg("您打开的太多了，歇会儿吧~");
|
||||
return false;
|
||||
}else{
|
||||
this._countTask++;
|
||||
}
|
||||
if(!url){url='404'}
|
||||
url=url.replace(/(^\s*)|(\s*$)/g, "");
|
||||
var preg=/^(https?:\/\/|\.\.?\/|\/\/?)/;
|
||||
if(!preg.test(url)){
|
||||
url='http://'+url;
|
||||
}
|
||||
if (!url) {
|
||||
url = '//yuri2.cn';
|
||||
}
|
||||
if (!title) {
|
||||
title = url;
|
||||
}
|
||||
var area,offset;
|
||||
if (this.isSmallScreen() || areaAndOffset==='max') {
|
||||
area = ['100%', (document.body.clientHeight - 40) + 'px'];
|
||||
offset = ['0', '0'];
|
||||
}else if(typeof areaAndOffset ==='object'){
|
||||
area=areaAndOffset[0];
|
||||
offset=areaAndOffset[1];
|
||||
}else {
|
||||
area = ['80%', '80%'];
|
||||
var topset, leftset;
|
||||
topset = parseInt($(window).height());
|
||||
topset = (topset - (topset * 0.8)) / 2 - 41;
|
||||
leftset = parseInt($(window).width());
|
||||
leftset = (leftset - (leftset * 0.8)) / 2 - 120;
|
||||
offset = [Math.round((this._countTask % 10 * 20) + topset) + 'px', Math.round((this._countTask % 10 * 20 + 100) + leftset) + 'px'];
|
||||
}
|
||||
var index = layer.open({
|
||||
type: 2,
|
||||
shadeClose: true,
|
||||
shade: false,
|
||||
maxmin: true, //开启最大化最小化按钮
|
||||
title: title,
|
||||
content: url,
|
||||
area: area,
|
||||
offset: offset,
|
||||
isOutAnim: false,
|
||||
skin:'win10-open-iframe',
|
||||
cancel: function (index, layero) {
|
||||
$("#win10_" + index).remove();
|
||||
Win10._checkTop();
|
||||
Win10._countTask--;//回退countTask数
|
||||
Win10._renderBar();
|
||||
},
|
||||
min: function (layero) {
|
||||
layero.hide();
|
||||
$("#win10_" + index).removeClass('show');
|
||||
Win10._checkTop();
|
||||
return false;
|
||||
},
|
||||
full:function (layero) {
|
||||
layero.find('.layui-layer-min').css('display','inline-block');
|
||||
},
|
||||
});
|
||||
$('#win10_btn_group_middle .btn.active').removeClass('active');
|
||||
var btn = $('<div id="win10_' + index + '" index="' + index + '" class="btn show active"><div class="btn_title">' + title + '</div><div class="btn_close fa fa-close"></div></div>');
|
||||
var layero_opened=Win10.getLayeroByIndex(index);
|
||||
layero_opened.css('z-index',Win10._countTask+813);
|
||||
Win10._settop(layero_opened);
|
||||
layero_opened.find('.layui-layer-setwin').prepend('<a class="win10-btn-change-url" index="' + index + '" title="'+Win10.lang('修改地址','Change URL')+'" href="javascript:void(0)"><span class="fa fa-chain"></span></a><a class="win10-btn-refresh" index="' + index + '" title="'+Win10.lang('刷新','Refresh')+'" href="javascript:void(0)"><span class="fa fa-refresh"></span></a>');
|
||||
layero_opened.find('.layui-layer-setwin .layui-layer-max').click(function () {
|
||||
setTimeout(function () {
|
||||
var height=layero_opened.css('height');
|
||||
height=parseInt(height.replace('px',''));
|
||||
if (height>=document.body.clientHeight){
|
||||
layero_opened.css('height',height-40);
|
||||
layero_opened.find('.layui-layer-content').css('height',height-83);
|
||||
layero_opened.find('.layui-layer-content iframe').css('height',height-83);
|
||||
}
|
||||
},300);
|
||||
|
||||
});
|
||||
$("#win10_btn_group_middle").append(btn);
|
||||
Win10._renderBar();
|
||||
btn.click(function () {
|
||||
var index = $(this).attr('index');
|
||||
var layero = Win10.getLayeroByIndex(index);
|
||||
var settop=function () {
|
||||
//置顶窗口
|
||||
var max_zindex=0;
|
||||
$(".win10-open-iframe").each(function () {
|
||||
z=parseInt($(this).css('z-index'));
|
||||
$(this).css('z-index',z-1);
|
||||
if(z>max_zindex){max_zindex=z;}
|
||||
});
|
||||
layero.css('z-index',max_zindex+1);
|
||||
};
|
||||
if ($(this).hasClass('show')) {
|
||||
if($(this).hasClass('active')){
|
||||
$(this).removeClass('active');
|
||||
$(this).removeClass('show');
|
||||
Win10._checkTop();
|
||||
layero.hide();
|
||||
}else{
|
||||
$('#win10_btn_group_middle .btn.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
Win10._settop(layero);
|
||||
}
|
||||
} else {
|
||||
$(this).addClass('show');
|
||||
$('#win10_btn_group_middle .btn.active').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
Win10._settop(layero);
|
||||
layero.show();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Win10._iframeOnClick.track(layero_opened.find('iframe:first')[0], function() {
|
||||
if(Object.getOwnPropertyNames(Win10._iframe_click_lock_children).length===0){
|
||||
Win10._settop(layero_opened);
|
||||
Win10._checkTop();
|
||||
}else{
|
||||
console.log('click locked');
|
||||
}
|
||||
});
|
||||
|
||||
this.menuClose();
|
||||
this.commandCenterClose();
|
||||
return index;
|
||||
},
|
||||
closeAll: function() {
|
||||
$(".win10-open-iframe").remove();
|
||||
$("#win10_btn_group_middle").html("");
|
||||
Win10._countTask = 0;
|
||||
Win10._renderBar();
|
||||
},
|
||||
setAnimated:function (animated_classes,animated_liveness) {
|
||||
this._animated_classes=animated_classes;
|
||||
this._animated_liveness=animated_liveness;
|
||||
},
|
||||
exit:function () {
|
||||
layer.confirm(Win10.lang('确认要关闭本页吗?','Are you sure you want to close this page?'), {icon: 3, title:Win10.lang('提示','Prompt')}, function(index){
|
||||
document.body.onbeforeunload = function(){};
|
||||
window.location.href="about:blank";
|
||||
window.close();
|
||||
layer.close(index);
|
||||
layer.alert(Win10.lang('哎呀,好像失败了呢。','Ops...There seems to be a little problem.'), {
|
||||
skin: 'layui-layer-lan'
|
||||
,closeBtn: 0
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
lang:function (cn,en) {
|
||||
return this._lang==='zh-cn'||this._lang==='zh-tw'?cn:en;
|
||||
},
|
||||
aboutUs: function() {
|
||||
//关于我们
|
||||
layer.open({
|
||||
type: 1,
|
||||
closeBtn: 1, //不显示关闭按钮
|
||||
anim: 2,
|
||||
skin: 'layui-layer-molv',
|
||||
title: 'WIN10-UI '+this._version,
|
||||
shadeClose: true, //开启遮罩关闭
|
||||
area: ['320px', '200px'], //宽高
|
||||
content: '<div style="padding: 10px;font-size: 12px">' +
|
||||
'<p>支持组件:layer、jquery、animated.css、font-awesome</p>' +
|
||||
'<p>尤里2号©版权所有</p>' +
|
||||
'<p>作者邮箱:yuri2peter@qq.com</p>' +
|
||||
'</div>'
|
||||
});
|
||||
},
|
||||
setContextMenu:function (jq_dom, menu) {
|
||||
if(typeof (jq_dom)==='string'){
|
||||
jq_dom=$(jq_dom);
|
||||
}
|
||||
jq_dom.unbind('contextmenu');
|
||||
jq_dom.on('contextmenu', function(e) {
|
||||
if(menu){
|
||||
Win10._renderContextMenu(e.clientX,e.clientY,menu,this);
|
||||
if (e.cancelable) {
|
||||
// 判断默认行为是否已经被禁用
|
||||
if (!e.defaultPrevented) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
},
|
||||
hideWins:function () {
|
||||
$('#win10_btn_group_middle>.btn.show').each(function () {
|
||||
var index = $(this).attr('index');
|
||||
var layero = Win10.getLayeroByIndex(index);
|
||||
$(this).removeClass('show');
|
||||
$(this).removeClass('active');
|
||||
layero.hide();
|
||||
})
|
||||
},
|
||||
showWins:function () {
|
||||
$('#win10_btn_group_middle>.btn').each(function () {
|
||||
var index = $(this).attr('index');
|
||||
var layero = Win10.getLayeroByIndex(index);
|
||||
$(this).addClass('show');
|
||||
layero.show();
|
||||
});
|
||||
Win10._checkTop();
|
||||
},
|
||||
getDesktopScene:function () {
|
||||
return $("#win10-desktop-scene");
|
||||
},
|
||||
onReady:function (handle) {
|
||||
Win10._handleReady.push(handle);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$(function () {
|
||||
Win10._init();
|
||||
for(var i in Win10._handleReady){
|
||||
var handle=Win10._handleReady[i];
|
||||
handle();
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>示例登陆页</title>
|
||||
<style>
|
||||
#win10-login {
|
||||
background: url('./img/wallpapers/login.jpg') no-repeat fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#win10-login-box {
|
||||
width: 300px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.win10-login-box-square {
|
||||
width: 105px;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
background-color: darkgray;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.win10-login-box-square::after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.win10-login-box-square .content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 90%;
|
||||
display: block;
|
||||
border: 0;
|
||||
margin: 0 auto;
|
||||
line-height: 36px;
|
||||
font-size: 20px;
|
||||
padding: 0 1em;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.login-username, .login-password {
|
||||
width: 91%;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.login-password {
|
||||
width: calc(91% - 54px);
|
||||
-webkit-border-radius: 2px 0 0 2px;
|
||||
-moz-border-radius: 2px 0 0 2px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
margin: 0px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.login-submit {
|
||||
margin: 0px;
|
||||
float: left;
|
||||
-webkit-border-radius: 0 5px 5px 0;
|
||||
-moz-border-radius: 0 5px 5px 0;
|
||||
border-radius: 0 5px 5px 0;
|
||||
background-color: #009688;
|
||||
width: 54px;
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 auto;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
opacity: .9;
|
||||
filter: alpha(opacity=90);
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="win10-login">
|
||||
<div style="height: 10%;min-height: 120px"></div>
|
||||
<div id="win10-login-box">
|
||||
<div class="win10-login-box-square">
|
||||
<img src="./img/avatar.jpg" class="content"/>
|
||||
</div>
|
||||
<p style="font-size: 24px;color: white;text-align: center">游客</p>
|
||||
<form target="_self" method="get" action="#">
|
||||
<!--用户名-->
|
||||
<input type="text" placeholder="请输入登录名" class="login-username">
|
||||
<!--密码-->
|
||||
<input type="password" placeholder="请输入密码" class="login-password">
|
||||
<!--登陆按钮-->
|
||||
<input type="submit" value="登录" id="btn-login" class="login-submit"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue