消息中心更新

我的电脑图标更新

css/macdefault.css

@@ -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;*/
 }
 

index.html

@@ -71,11 +71,73 @@
         </div>
     </div>
     <div id="win10_command_center" class="hidden_right">
-        <div class="title">
+        <div class="command-header">
-            <h4 style="float: left">消息中心 </h4>
+            <div class="tab-today active">今天</div>
-            <span id="win10_btn_command_center_clean_all">全部清除</span>
+            <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">

js/mac.js

@@ -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) {
+            if(hour < 6){hours='凌晨'+hour;} 
-				hours='凌晨'+hour;
+            else if (hour < 9){hours='早上'+hour;} 
-			}else if (hour >= 6 && hour < 8) {
+            else if (hour < 12){hours='上午'+hour;} 
-				hours='早上'+hour;
+            else if (hour < 14){hours='中午'+(hour-12);} 
-			 } else if (hour >= 8 && hour < 11) {
+            else if (hour < 17){hours='下午'+(hour-12);} 
-			    hours='上午'+hour;
+            else if (hour < 19){hours='傍晚'+(hour-12);} 
-			 } else if (hour >= 11 && hour < 13) {
+            else if (hour < 22){hours='晚上'+(hour-12);} 
-				hours='中午'+hour;
+            else {hours='深夜'+(hour-12)} 
-			 } else if (hour >= 13 && hour < 18) {
-			   hours='下午'+hour;
-			 } else {
-			   hours='晚上'+hour;
-			 }
 			$("#win10_btn_time").html(week+hours+':'+mins);
         },1000);
         //离开前警告