diff --git a/src/components/Notice/index.vue b/src/components/Notice/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd7c637a4968fdc84aea6140ed85276fe87195ba
--- /dev/null
+++ b/src/components/Notice/index.vue
@@ -0,0 +1,11 @@
+<template>
+  12345
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Widget/index.vue b/src/components/Widget/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..49d6f53b8ff3cc16b7d4f54f79bfe1cc36f37daf
--- /dev/null
+++ b/src/components/Widget/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="drawerTitle">
+      <i class="el-icon-more"></i>
+    </div>
+    <div class="drawerTime">
+      <strong>{{drawerTime}}</strong>
+    </div>
+    <div class="drawerContent">
+      123456
+    </div>
+</template>
+<script>
+import { watch, ref } from 'vue'
+import {useStore} from 'vuex'
+export default {
+  setup(){
+    const store = useStore()
+    let drawerTime = ref(0)
+    // 小工具时间处理
+    let currentTime = null
+    const timing=()=>{
+      currentTime+=1000
+      let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
+      drawerTime.value = `${hours} : ${minutes} : ${seconds}`
+    }
+    let timer = null
+    // 小工具显示 / 隐藏 及时间处理
+    watch(()=>store.state.taskbar.widgetShow,()=>{
+      if(store.state.taskbar.widgetShow&&store.state.taskbar.widgetOrNotice){
+        currentTime = new Date().getTime()
+        let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
+        drawerTime.value = `${hours} : ${minutes} : ${seconds}`
+        timer = setInterval(timing,1000)
+      }else{
+        clearInterval(timer)
+      }
+    })
+    return{
+      drawerTime
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.drawerTitle{
+  width: 96%;
+  padding-top: 18px;
+  text-align: right;
+}
+.drawerTime{
+  margin-bottom: 24px;
+  strong{
+    color: #222;
+    font-size: 24px;
+  }
+}
+.drawerContent{
+  width: 80%;
+  margin: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/store/modules/taskbar.js b/src/store/modules/taskbar.js
index 36daf838f8854e55c60cc674a9b82168b206ccc7..b0eadf4f84b1c8f07043148b374db13004ce11f2 100644
--- a/src/store/modules/taskbar.js
+++ b/src/store/modules/taskbar.js
@@ -1,6 +1,8 @@
 const state = {
 	startMapShow: false,
-	currentPag: 'start'
+	currentPag: 'start',
+	widgetShow: false,
+	widgetOrNotice: true  // true -> widget   false -> notice
 }
 
 const mutations = {
@@ -23,12 +25,26 @@ const mutations = {
 		}
 		if (val === 'taskbar') return
 		state.startMapShow = false
+	},
+	// 小工具显示/隐藏
+	WIDGET_SHOW(state,val){
+		state.widgetShow = val
+	},
+	// 小工具 还是 通知中心
+	WIDGETORNOTICE(state,val){
+		state.widgetOrNotice = val
 	}
 }
 
 const actions = {
 	changeStartMapShow({ commit }, val) {
 		commit('STARTMAP_SHOW', val)
+	},
+	changeWidgetShow({commit},val){
+		commit('WIDGET_SHOW',val)
+	},
+	changeWidgetOrNotice({commit},val){
+		commit('WIDGETORNOTICE',val)
 	}
 }
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 00290ceba55d9e8512cbf1c9e72259a2dcca7ace..79f8bc57f99e7e9c54db83b5095bcf5be4661779 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1 +1,33 @@
-@import './animation.scss'
\ No newline at end of file
+@import './animation.scss';
+
+// 小工具样式
+.widget{
+  width: 610px;
+  height: 94%;
+  top: calc( calc( 6% - 40px) / 2) !important;
+  left: 5px !important;
+  .el-drawer{
+    width: 100% !important;
+    background-color: rgba(255, 255, 255, 0.25);
+    backdrop-filter:blur(40px);
+    box-shadow: none;
+    border-radius: 8px;
+  }
+}
+// 通知样式
+.notice{
+  width: 320px;
+  height: calc(100% - 40px);
+  left: auto;
+  right: 0 !important;
+  background: transparent;
+  .el-drawer{
+    width: 100% !important;
+    box-shadow: none;
+    background-color: rgba(255, 255, 255, 0.88);
+    backdrop-filter: blur(20px);
+  }
+  .el-drawer__close-btn{
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/views/desktop/Home.vue b/src/views/desktop/Home.vue
index f3f1b84621235630d8f572b065b039bd3edf9fab..9f1eb1863bd5191bddb36aa93376c3bcebdfff66 100644
--- a/src/views/desktop/Home.vue
+++ b/src/views/desktop/Home.vue
@@ -1,17 +1,56 @@
 <template>
-  <div class="home">
+  <div class="home" @click="closeWidget">
     <div class="itemTag" v-for="(item, index) in dataList" :key="index">
       <img @click="scale(item)" :class="{scale: item.isScale}" :src="item.url" alt />
       <p>{{item.name}}</p>
     </div>
   </div>
+  <el-drawer :modal-class="drawerData.className" v-model="drawer" :before-close='drawBeforeClose' :modal='drawerData.modal' :with-header="drawerData.withHeader" :direction="drawerData.position" :title="drawerData.title">
+    <component :is='drawerData.componentTag'></component>
+  </el-drawer>
 </template>
 
 <script>
-import { reactive } from 'vue';
+import { reactive, ref, watch } from 'vue';
+import { useStore } from 'vuex';
+import Widget from '@/components/Widget'
+import Notice from '@/components/Notice'
 export default {
   name: 'Home',
+  components:{
+    Widget,
+    Notice
+  },
   setup() {
+    const store = useStore()
+    const drawer = ref(false)
+    // 小工具 还是 通知中心
+    const drawerData = reactive({
+      className: 'widget',
+      modal: false,
+      withHeader: false,
+      position: 'ltr',
+      title: '通知管理',
+      componentTag: 'Widget'
+    })
+    watch(()=>store.state.taskbar.widgetShow,()=>{
+      drawer.value = store.state.taskbar.widgetShow
+    })
+    watch(()=>store.state.taskbar.widgetOrNotice,()=>{
+      if(store.state.taskbar.widgetOrNotice){
+        drawerData.className = 'widget'
+        drawerData.modal = false
+        drawerData.withHeader = false
+        drawerData.position = 'ltr'
+        drawerData.componentTag = 'Widget'
+        return
+      }
+      drawerData.className = 'notice'
+      drawerData.modal = true
+      drawerData.withHeader = true
+      drawerData.position = 'rtl'
+      drawerData.componentTag = 'Notice'
+    })
     const dataList = reactive([
       {
         name: 'Blue',
@@ -60,9 +99,22 @@ export default {
         }
       });
     };
+    const drawBeforeClose= ()=>{
+      store.dispatch('taskbar/changeWidgetShow',false)
+    }
+    // 点击桌面空白处关闭小工具
+    const closeWidget = () =>{
+      if(store.state.taskbar.widgetShow){
+        store.dispatch('taskbar/changeWidgetShow',false)
+      }
+    }
     return {
       dataList,
       scale,
+      drawer,
+      drawBeforeClose,
+      closeWidget,
+      drawerData
     };
   },
 };
diff --git a/src/views/taskbar/index.vue b/src/views/taskbar/index.vue
index 0972e9fe818cb19cf5fd76e451f26c033ad8e95c..1b9dc76e3a5a9eb2a76f5c7918d60ca2810d2990 100644
--- a/src/views/taskbar/index.vue
+++ b/src/views/taskbar/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="taskbar">
     <!-- 任务栏中间部分 -->
-    <div class="taskbarCenter flex" id="taskbar">
+    <div class="taskbarCenter flex" id="taskbar" @click="taskbarBtn">
       <!-- 开始按钮 -->
-      <div class="startMenu flex" id="startMenu" @click="searchBtn">
+      <div class="startMenu flex" id="startMenu">
         <img :src="windowsImg" v-ClickAnimation alt="" id="startMenuImg" />
       </div>
       <!-- 搜索按钮 -->
-      <div class="startMenu flex" id="search" @click="searchBtn">
+      <div class="startMenu flex" id="search">
         <img :src="searchImg" v-ClickAnimation alt="" id="searchImg" />
       </div>
 			<!-- 小工具 -->
@@ -40,10 +40,10 @@
       <div class="startMenu rightMenu"><img class="rightImg" :src="batteryImg" alt="battery"></div>
       <div class="startMenu rightMenu"><img class="audoiImg" :src="audioImg" alt="audio"></div>
       <div class="rightTime">
-        <span>15:18</span>
-        <span>2021/9/10</span>
+        <span>{{time}}</span>
+        <span>{{date}}</span>
       </div>
-      <div class="startMenu rightMenu"><img class="rightImg sidebar" :src="sidebarImg" alt="sidebar"></div>
+      <div class="startMenu rightMenu" @click="showNotice"><img class="rightImg sidebar" :src="sidebarImg" alt="sidebar"></div>
     </div>
     <!-- 开始按钮和搜索按钮弹框 -->
     <transition name="el-zoom-in-bottom">
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import { computed, reactive, watch, ref } from "vue";
+import { computed, reactive, watch, ref, nextTick } from "vue";
 import { useStore } from "vuex";
 import StartMap from './components/startMap/index.vue'
 import Search from './components/search/index.vue'
@@ -69,8 +69,26 @@ export default {
     const store = useStore();
     const componentTag = ref('search')
     const isShow = computed(() => store.state.taskbar.startMapShow);
-    const searchBtn = (e) => {
-      componentTag.value=e.target.id.indexOf('search')>-1?'Search':'StartMap'
+    // 任务栏中间部分点击事件监听
+    const taskbarBtn = async e=>{
+      if(e.target.id.indexOf('widget')>=0){
+        if(store.state.taskbar.widgetShow&&store.state.taskbar.widgetOrNotice){
+          store.dispatch('taskbar/changeWidgetShow',false)
+          return
+        }
+        store.dispatch('taskbar/changeWidgetShow',false)
+        store.dispatch('taskbar/changeWidgetOrNotice',true)
+        await nextTick()
+        store.dispatch('taskbar/changeWidgetShow',true)
+      }
+      switch(0){
+        case e.target.id.indexOf('startMenu'):
+          componentTag.value = 'StartMap'
+          break
+        case e.target.id.indexOf('search'):
+          componentTag.value = 'Search'
+          break
+      }
     }
 		// 处理亮/暗主题
     let imgUrl = reactive({
@@ -99,14 +117,40 @@ export default {
         ("aaa"); // -> 此处设置暗主题图标
       }
     });
+    // 显示 / 隐藏 通知中心
+    const showNotice = async () =>{
+      if(store.state.taskbar.widgetShow && !store.state.taskbar.widgetOrNotice){
+        store.dispatch('taskbar/changeWidgetShow',false)
+        return
+      }
+      store.dispatch('taskbar/changeWidgetShow',false)
+      store.dispatch('taskbar/changeWidgetOrNotice',false)
+      await nextTick()
+      store.dispatch('taskbar/changeWidgetShow',true)
+    }
+    // 时间数据
+    let currentTime = new Date().getTime()
+    const time = ref(0)
+    const date = ref(0)
+    const fn = () =>{
+      currentTime+=1000
+      const minus = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`
+      const hours = new Date(currentTime).getHours()>9?new Date(currentTime).getHours():`0${new Date(currentTime).getHours()}`
+      time.value = `${hours}:${minus}`
+      date.value = `${new Date(currentTime).getFullYear()}/${new Date(currentTime).getMonth()+1}/${new Date(currentTime).getDate()}`
+    }
+    setInterval(fn,1000)
     // 阻止事件冒泡，防止关闭弹窗
     const aaa=()=>{}
     return {
       isShow,
       ...imgUrl,
       componentTag,
-      searchBtn,
-      aaa
+      aaa,
+      taskbarBtn,
+      showNotice,
+      time,
+      date
     };
   },
 };
@@ -154,7 +198,7 @@ export default {
     width: auto;
     padding: 0 5px;
     &:nth-last-of-type(1){
-      border-right: 1px solid lightgray;
+      border-right: 1px solid #aaa;
     }
     .rightImg{
       height: 40%;