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

消息中心更新 

我的电脑图标更新
This commit is contained in:
muzi_ys 2019-01-06 21:56:20 +08:00
parent 05c85d0172
commit b9e5514e9c
5 changed files with 254 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
css/macdefault.css
View File

@ -374,7 +374,7 @@ body {
right: 0;
top: 30px;
width: 350px;
background-color: rgba(255,255,255,0.55);
background-color: rgba(255, 255, 255, 0.7);
height: calc(100% - 30px);
transition: all 0.5s;
overflow-x: hidden;
@ -401,6 +401,166 @@ body {
background-color: rgba(255, 255, 255, 0.19);
}
#win10_command_center .command-header{
height: 50px;
text-align: center;
border-bottom: 1px outset;
}
#win10_command_center .command-header .item{
width: 130px;
height: 20px;
margin: 15px 0;
display: inline-block;
font-size: 14px;
color: #eaeaea;
background-color: rgba(121, 121, 121, 0.5);
}
#win10_command_center .command-header div{
width: 130px;
height: 20px;
margin: 15px 0;
display: inline-block;
font-size: 14px;
color: #eaeaea;
background-color: rgba(121, 121, 121, 0.5);
}
#win10_command_center .command-header div{
width: 130px;
height: 20px;
margin: 15px 0;
display: inline-block;
font-size: 14px;
color: #eaeaea;
background-color: rgba(121, 121, 121, 0.5);
}
#win10_command_center .command-header div:hover {
cursor: pointer;
}
#win10_command_center .command-header div.active {
background-color: rgba(255, 255, 255, 0.5);
color: #000;
}
#win10_command_center .command-body {
position: relative;
height: calc(100% - 70px);
overflow-y: auto;
}
#win10_command_center .command-body .command-body-calendar {
margin: 15px 0;
}
#win10_command_center .command-body .command-body-calendar .command-body-calendar-date {
padding: 0 33px;
color: #585858;
}
#win10_command_center .command-body .command-body-calendar .normal-date {
font-size: 30px;
}
#win10_command_center .command-body .command-body-calendar .lunar-date {
}
#win10_command_center .command-body .notice {
width: 100%;
margin: 5px 0;
}
#win10_command_center .command-body .notice .notice-header {
background-color: #dee7e7;
height: 25px;
border-radius: 5px 5px 0 0;
line-height: 25px;
}
#win10_command_center .command-body .notice-header-icon {
margin: 2px 5px;
vertical-align: middle;
}
#win10_command_center .command-body .notice-header-icon >>> img {
width: 15px;
height: 15px;
}
#win10_command_center .command-body .notice-header-title {
font-size: 10px;
margin: 0 5px;
}
#win10_command_center .command-body .notice .notice-body {
background-color: #eff0f2;
border-radius: 0 0 5px 5px;
}
#win10_command_center .command-body .notice .weather-item {
height: 50px;
}
#win10_command_center .command-body .notice .weather-item div {
display: inline-block;
text-align: center;
}
#win10_command_center .command-body .notice .weather-city {
float: left;
}
#win10_command_center .command-body .notice .weather-city .weather-city-time {
display: block;
font-size: 10px;
font-weight: 400;
text-align: left;
margin: 5px 0 2px 10px;
color: #868585;
}
#win10_command_center .command-body .notice .weather-city .weather-city-text {
font-size: 15px;
font-weight: 400;
display: block;
text-align: left;
margin: 0 0 5px 10px;
}
#win10_command_center .command-body .notice .weather-type {
position: absolute;
right: 70px;
}
#win10_command_center .command-body .notice .weather-type img {
width: 30px;
margin: 5px;
}
#win10_command_center .command-body .notice .weather-temperature {
float: right;
font-size: 35px;
font-weight: 200;
margin-right: 10px;
}
#win10_command_center .command-body .notice .notice-header, .notice .notice-body {
width: 95%;
margin: 0 auto;
}
#win10_command_center .command-body .notice .notice-header .notice-header-icon img{
width: 15px;
height: 15px;
}
#win10_btn_group_right #win10_btn_command{
font-size: 20px;
}
@ -434,6 +594,7 @@ body {
left: 0;
width: 100%;
overflow: hidden;
display: none;
/*padding: 10px;*/
}

BIN
img/icon/computer.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
img/icon/weather.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

70
index.html
View File

@ -71,11 +71,73 @@
</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 class="command-header">
<div class="tab-today active">今天</div>
<div class="tab-msg">通知</div>
</div>
<div class="command-body today">
<div class="command-body-calendar">
<div class="command-body-calendar-date normal-date">1月6日 星期日</div>
<div class="command-body-calendar-date lunar-date">戊戌年十二月初一</div>
</div>
<div class="notice">
<div class="notice-header">
<span class="notice-header-icon"><img src="./img/icon/weather.png" class="notice-header-icon-img" /></span>
<span class="notice-header-title">天气 </span>
</div>
<div class="notice-body">
<div class="weather-item">
<div class="weather-city">
<span class="weather-city-time">下午3:54</span>
<span class="weather-city-text">广州市</span>
</div>
<div class="weather-type">
<img src="http://yun.rili.cn/wnl/img/cloud.png" alt="多云" />
</div>
<div class="weather-temperature">17</div>
</div>
</div>
</div>
<div class="notice">
<div class="notice-header">
<span class="notice-header-icon"><img src="./img/icon/weather.png" class="notice-header-icon-img" /></span>
<span class="notice-header-title">天气 </span>
</div>
<div class="notice-body">
<div class="weather-item">
<div class="weather-city">
<span class="weather-city-time">下午3:54</span>
<span class="weather-city-text">广州市</span>
</div>
<div class="weather-type">
<img src="http://yun.rili.cn/wnl/img/cloud.png" alt="多云" />
</div>
<div class="weather-temperature">17</div>
</div>
</div>
</div>
</div>
<!-- <span id="win10_btn_command_center_clean_all">全部清除</span> -->
<div class="command-body msgs">
<div class="notice">
<div class="notice-header">
<span class="notice-header-icon"><img src="./img/icon/weather.png" class="notice-header-icon-img" /></span>
<span class="notice-header-title">天气 </span>
</div>
<div class="notice-body">
<div class="weather-item">
<div class="weather-city">
<span class="weather-city-time">下午3:54</span>
<span class="weather-city-text">广州市</span>
</div>
<div class="weather-type">
<img src="http://yun.rili.cn/wnl/img/cloud.png" alt="多云" />
</div>
<div class="weather-temperature">17</div>
</div>
</div>
</div>
</div>
<div class="msgs"></div>
</div>
<div id="win10_task_bar">
<div id="win10_btn_group_left" class="btn_group">

39
js/mac.js
View File

@ -302,6 +302,24 @@ window.Win10 = {
msg.remove()
}, 500)
});
$('#win10_command_center').on('click',".command-header .tab-today", function () {
if (!$(this).hasClass('active')) {
$('#win10_command_center .command-body.msgs').hide();
$('#win10_command_center .command-body.today').show();
$(this).addClass('active').siblings('div').removeClass('active');
}
});
$('#win10_command_center').on('click',".command-header .tab-msg", function () {
if (!$(this).hasClass('active')) {
$('#win10_command_center .command-body.today').hide();
$('#win10_command_center .command-body.msgs').show();
$(this).addClass('active').siblings('div').removeClass('active');
}
});
$('#win10_btn_command_center_clean_all').click(function () {
var msgs=$('#win10_command_center .msg');
msgs.addClass('animated slideOutRight');
@ -412,19 +430,14 @@ window.Win10 = {
var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[myDate.getDay()];
var hour=myDate.getHours();
var mins=myDate.getMinutes();if (mins<10){mins='0'+mins}
if (hour >= 0 && hour < 6) {
hours='凌晨'+hour;
}else if (hour >= 6 && hour < 8) {
hours='早上'+hour;
} else if (hour >= 8 && hour < 11) {
hours='上午'+hour;
} else if (hour >= 11 && hour < 13) {
hours='中午'+hour;
} else if (hour >= 13 && hour < 18) {
hours='下午'+hour;
} else {
hours='晚上'+hour;
}
if(hour < 6){hours='凌晨'+hour;}
else if (hour < 9){hours='早上'+hour;}
else if (hour < 12){hours='上午'+hour;}
else if (hour < 14){hours='中午'+(hour-12);}
else if (hour < 17){hours='下午'+(hour-12);}
else if (hour < 19){hours='傍晚'+(hour-12);}
else if (hour < 22){hours='晚上'+(hour-12);}
else {hours='深夜'+(hour-12)}
$("#win10_btn_time").html(week+hours+':'+mins);
},1000);
//离开前警告