diff --git a/src/assets/img/icon/clock.png b/src/assets/img/icon/clock.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a498404dd0643710a3a42d674c4fff4c186055d
Binary files /dev/null and b/src/assets/img/icon/clock.png differ
diff --git a/src/assets/img/icon/market.png b/src/assets/img/icon/market.png
new file mode 100644
index 0000000000000000000000000000000000000000..678930ba2f5f8ec183f6b587d88315dc627f5c49
Binary files /dev/null and b/src/assets/img/icon/market.png differ
diff --git a/src/assets/img/icon/movie.png b/src/assets/img/icon/movie.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c8a929bf91f79d94a6d0fd7c0db1398c6f2c6ec
Binary files /dev/null and b/src/assets/img/icon/movie.png differ
diff --git a/src/assets/img/icon/newspaper.png b/src/assets/img/icon/newspaper.png
new file mode 100644
index 0000000000000000000000000000000000000000..9585d544afcd0dfd034c03ed9ddfddc17b8f3b36
Binary files /dev/null and b/src/assets/img/icon/newspaper.png differ
diff --git a/src/views/taskbar/components/search/components/all.vue b/src/views/taskbar/components/search/components/all.vue
index 61c7765cb2074b16486dc26460551136a072ddc5..cd48ea020bbdc9c3cd35ec7d28d298571e568180 100644
--- a/src/views/taskbar/components/search/components/all.vue
+++ b/src/views/taskbar/components/search/components/all.vue
@@ -1,3 +1,110 @@
 <template>
-  
-</template>
\ No newline at end of file
+  <section>
+    <p class="allTitle mgb">Top apps</p>
+    <div class="topApps">
+      <div v-for="(item,index) in topAppsList" :key="index">
+        <img :src="item.url" :alt="item.name">
+        <span>{{item.name}}</span>
+      </div>
+    </div>
+  </section>
+  <section>
+    <p class="allTitle mgbt">Quick Searches</p>
+    <ul class="qsList">
+      <li> <i></i> Today in history</li>
+      <li> <i></i> New movies</li>
+      <li> <i></i> Top news</li>
+      <li> <i></i> Markets today</li>
+    </ul>
+  </section>
+</template>
+<script>
+export default {
+  setup(){
+    const topAppsList = [{
+      url: require('@/assets/img/icon/terminal.png'),
+      name: 'Terminal'
+    },{
+      url: require('@/assets/img/icon/github.png'),
+      name: 'Github'
+    },{
+      url: require('@/assets/img/icon/code.png'),
+      name: 'VS Code'
+    },{
+      url: require('@/assets/img/icon/spotify.png'),
+      name: 'Spotify'
+    },{
+      url: require('@/assets/img/icon/edge.png'),
+      name: 'Edge'
+    }]
+    return {
+      topAppsList
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.allTitle{
+  font-size: 12px;
+  color: #666;
+  font-weight: 600;
+}
+.mgb{
+  margin-bottom: 16px;
+}
+.mgbt{
+  margin-bottom: 10px;
+}
+.topApps{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  div{
+    box-sizing: border-box;
+    width: 19%;
+    height: 72px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 0 2px lightgrey;
+    text-align: center;
+    padding: 15px 0 5px;
+    font-size: 12px;
+    cursor: pointer;
+    img{
+      display: block;
+      margin: auto;
+      width: 25%;
+      margin-bottom: 8px;
+    }
+  }
+}
+.qsList{
+  box-sizing: border-box;
+  padding-left: 15px;
+  li{
+    height: 40px;
+    line-height: 40px;
+    color: #111;
+    cursor: pointer;
+    font-size: 12px;
+    i{
+      padding-left: 16px;
+      padding-top: 16px;
+      margin-right: 10px;
+    }
+    &:nth-of-type(1) i{
+      background: url('~@/assets/img/icon/clock.png') no-repeat center bottom/contain;
+    }
+    &:nth-of-type(2) i{
+      background: url('~@/assets/img/icon/movie.png') no-repeat center bottom/contain;
+    }
+    &:nth-of-type(3) i{
+      background: url('~@/assets/img/icon/newspaper.png') no-repeat center bottom/contain;
+    }
+    &:nth-of-type(4) i{
+      background: url('~@/assets/img/icon/market.png') no-repeat center bottom/contain;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/taskbar/components/search/index.vue b/src/views/taskbar/components/search/index.vue
index 77d790e8c3547dbb0d1a3abbc9b00b156810ed7b..47158a20f909273131c4d3ee14a2d01f4d28052e 100644
--- a/src/views/taskbar/components/search/index.vue
+++ b/src/views/taskbar/components/search/index.vue
@@ -1,33 +1,42 @@
 <template>
-  <div class="searchBox" @click.stop='aaa'>
+  <div class="searchBox">
     <el-input v-model="searchData"></el-input>
-    <el-tabs v-model="activeName" @click.stop="currentPage">
-      <el-tab-pane label="All" name="all"></el-tab-pane>
-      <el-tab-pane label="Apps" name="apps"></el-tab-pane>
-      <el-tab-pane label="Documents" name="documents"></el-tab-pane>
-      <el-tab-pane label="Web" name="web"></el-tab-pane>
-      <el-tab-pane label="More" name="more"></el-tab-pane>
-    </el-tabs>
-    
+    <div class="paddingBox">
+      <el-tabs v-model="activeName" @click.stop="index">
+        <el-tab-pane label="All" name="all"></el-tab-pane>
+        <el-tab-pane label="Apps" name="apps"></el-tab-pane>
+        <el-tab-pane label="Documents" name="documents"></el-tab-pane>
+        <el-tab-pane label="Web" name="web"></el-tab-pane>
+        <el-tab-pane label="More" name="more"></el-tab-pane>
+      </el-tabs>
+      <component :is="page"></component>
+    </div>
   </div>
 </template>
 
 <script>
 import { ref } from "@vue/reactivity";
+import All from './components/all.vue'
 export default {
+  components:{
+    All
+  },
   setup() {
     let searchData = ref(undefined);
     let activeName = ref("all");
+    const page = ref('All')
     // input聚焦时，阻止事件冒泡，防止关闭搜索框
     const aaa=()=>{}
-    const currentPage=()=>{
-      console.log(activeName.value);
+    const index=()=>{
+      if(page.value.toLowerCase()===activeName.value.toLowerCase()) return
+      page.value = activeName.value.replace(activeName.value[0], activeName.value[0].toUpperCase());
     }
     return {
       searchData,
       activeName,
       aaa,
-      currentPage
+      index,
+      page
     };
   },
 };
@@ -37,6 +46,9 @@ export default {
 .searchBox {
   box-sizing: border-box;
   padding: 12px;
+  width: 100%;
+  height: 100%;
+  text-align: left;
 }
 .el-input {
   ::v-deep .el-input__inner {
@@ -53,7 +65,6 @@ export default {
 }
 ::v-deep .el-tabs{
   border-bottom: none;
-  padding: 0 8px;
   .el-tabs__item{
     font-size: 13px;
   }
@@ -62,4 +73,7 @@ export default {
     position: static;
   }
 }
+.paddingBox{
+  padding: 0 8px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/taskbar/components/startMap/index.vue b/src/views/taskbar/components/startMap/index.vue
index f0475ce02c67dcbc4cfc4d3ae8c4828b051060ea..cf5bf1816695b0b7c14bef80c8061af8df8d7b6d 100644
--- a/src/views/taskbar/components/startMap/index.vue
+++ b/src/views/taskbar/components/startMap/index.vue
@@ -29,10 +29,15 @@ export default {
     const componentTag = ref('Pinned')
     const changeTag = () => {
       componentTag.value=componentTag.value==='Pinned'?'AllApps':'Pinned'
+    }
+    // 阻止事件冒泡，防止关闭开始菜单
+    const aaa =()=>{
+
     }
     return {
       componentTag,
-      changeTag
+      changeTag,
+      aaa
     }
   }
 };
diff --git a/src/views/taskbar/index.vue b/src/views/taskbar/index.vue
index cde99578554198adc6c07803a6b8f2126a81e239..615f56bb74b43edaa6f051251e219341383244ac 100644
--- a/src/views/taskbar/index.vue
+++ b/src/views/taskbar/index.vue
@@ -35,7 +35,7 @@
     <div></div>
     <!-- 开始按钮和搜索按钮弹框 -->
     <transition name="el-zoom-in-bottom">
-      <div v-show="isShow" class="box">
+      <div v-show="isShow" class="box" @click.stop='aaa'>
         <component :is='componentTag'></component>
       </div>
     </transition>
@@ -83,11 +83,14 @@ export default {
         ("aaa"); // -> 此处设置暗主题图标
       }
     });
+    // 阻止事件冒泡，防止关闭弹窗
+    const aaa=()=>{}
     return {
       isShow,
       ...imgUrl,
       componentTag,
-      searchBtn
+      searchBtn,
+      aaa
     };
   },
 };