diff --git a/src/assets/css/home-style.css b/src/assets/css/home-style.css
index 034751c..30c5e8d 100644
--- a/src/assets/css/home-style.css
+++ b/src/assets/css/home-style.css
@@ -180,6 +180,8 @@ body.light-mode .video-bg:before {
     }
 }
 .header-menu {
+    width: 734px;
+    overflow-x: scroll;
     display: flex;
     align-items: center;
 }
diff --git a/src/assets/img/null.png b/src/assets/img/null.png
new file mode 100644
index 0000000..82ee032
Binary files /dev/null and b/src/assets/img/null.png differ
diff --git a/src/components/home/HomeHeader.vue b/src/components/home/HomeHeader.vue
index e0bf92a..a5ba105 100644
--- a/src/components/home/HomeHeader.vue
+++ b/src/components/home/HomeHeader.vue
@@ -6,17 +6,36 @@
                    v-if="tabList.length>0" :key="item.index" :to="item.path">{{ item.libel }}
       </router-link>
     </div>
-    <div class="search-bar">
-      <input type="text" placeholder="Search">
+<!--    <div class="search-bar">-->
+<!--      <input  type="text" placeholder="Search">-->
+<!--    </div>-->
+    <el-dialog
+        class="dialog"
+        center
+        :show-close="false"
+        :visible.sync="searchDialog"
+        width="360px"
+        append-to-body
+        :close-on-click-modal="true" >
+    <div style="display: flex;align-items: center">
+      <SearchInput></SearchInput>
     </div>
+    </el-dialog>
     <div class="header-profile">
+
+      <el-tooltip class="item" effect="dark" content="搜索" placement="bottom">
+        <div class="search-div">
+          <i class="search el-icon-search" @click="openSearchDialog"></i>
+        </div>
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="公告" placement="bottom">
       <div class="notification">
         <span class="notification-number">3</span>
         <div class="notice-div">
           <i class="notice el-icon-message-solid"></i>
         </div>
-
       </div>
+      </el-tooltip>
       <el-tooltip class="item" effect="dark" content="上传书签" placement="bottom">
         <div class="upload-div" @click="upload">
           <i class="upload el-icon-upload"></i>
@@ -253,11 +272,11 @@ import $ from 'jquery'
 import Vue from "vue";
 import axios from "axios";
 import {mapMutations} from "vuex";
-// import {getUserIP}  from '@/utils/getIp'
+import SearchInput from "@/components/home/SearchInput.vue";
 
 export default {
   name: "HomeHeader",
-  components: {},
+  components: {SearchInput},
   data() {
     return {
       visible: false,
@@ -319,13 +338,14 @@ export default {
       },
       userToken: '',
       isLogin: true,
-      ip:'',
+      searchDialog:false,
+
     }
   },
   mounted() {
     this.isLogin = !localStorage.getItem("Authorization");
     this.toggleActive();
-    this.reacherBarFun();
+    // this.reacherBarFun();
     this.changeImg();
   },
   created() {
@@ -333,6 +353,20 @@ export default {
   computed: {},
   methods: {
     ...mapMutations(['changeLogin', 'setUserId', 'setUserRole']),
+    openSearchDialog(){
+      if(localStorage.getItem('userId') && localStorage.getItem('Authorization')){
+        this.searchDialog=true;
+      }else{
+        Vue.prototype.$notify.info({
+          title: '提示',
+          message: "登录状态失效，请重新登录！",
+          offset: 0
+        });
+      }
+
+    },
+
+
 
     upload(){
       if(localStorage.getItem('Authorization')&&localStorage.getItem('userId')){
@@ -340,7 +374,7 @@ export default {
           path:'/importExport',
         })
       }else {
-        Vue.prototype.$notify.error({
+        Vue.prototype.$notify.info({
           title: '错误',
           message: "登录状态失效，请重新登录！",
           offset: 0
@@ -412,13 +446,13 @@ export default {
       });
     },
     // 搜索框
-    reacherBarFun() {
-      $(".search-bar input").focus(function () {
-        $(".header").addClass("wide");
-      }).blur(function () {
-        $(".header").removeClass("wide");
-      });
-    },
+    // reacherBarFun() {
+    //   $(".search-bar input").focus(function () {
+    //     $(".header").addClass("wide");
+    //   }).blur(function () {
+    //     $(".header").removeClass("wide");
+    //   });
+    // },
     // 显示密码
     showPass() {
       if (this.passwordVisible === "text") {
@@ -696,6 +730,15 @@ export default {
 }
 </script>
 <style scoped>
+
+::v-deep .el-dialog{
+  background: transparent;
+  border-color: transparent;
+  box-shadow: transparent;
+}
+::v-deep .el-dialog__header{
+  display: none;
+}
 .dialog {
   backdrop-filter: blur(20px);
   color: var(--theme-color);
@@ -776,4 +819,22 @@ export default {
 .avatar-div:hover {
   border: 2px solid var(--theme-color);
 }
+.search {
+  font-size: 25px;
+  font-weight: bold;
+  color: var(--theme-color);
+}
+.search-div {
+  border-radius: 50px;
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.search-div:hover {
+  border: 2px solid var(--theme-color);
+  cursor: pointer;
+}
 </style>
diff --git a/src/components/home/NavList.vue b/src/components/home/NavList.vue
index 0b8ad29..b957f7c 100644
--- a/src/components/home/NavList.vue
+++ b/src/components/home/NavList.vue
@@ -30,7 +30,7 @@
 <!--          </div>-->
         </div>
         <i @click="openShowQR(nav.urlId)" class="qr el-icon-s-grid"></i>
-      <el-dialog
+        <el-dialog
           :title="'【'+nav.name+'】'+'手机二维码'"
           :visible.sync="dialogVisible"
           :show-close="true"
diff --git a/src/components/home/SearchInput.vue b/src/components/home/SearchInput.vue
new file mode 100644
index 0000000..a202be2
--- /dev/null
+++ b/src/components/home/SearchInput.vue
@@ -0,0 +1,394 @@
+<template>
+    <div class="search-item">
+        <el-popover
+                placement="bottom"
+                width="300"
+                ref="popover"
+                trigger="focus"
+                :visible-arrow="false"
+                style="padding-top: 0"
+                v-model="visible"
+                >
+            <div class="search-content">
+                <div class="search-his">
+                    <div>
+                        <span class="title">热搜榜</span>
+<!--                        <span class="clear" @click="clearHistory" v-show="isShowClearHistory"><i class="el-icon-circle-close"></i>清空</span>-->
+                    </div>
+                    <div v-if="hotSearchKeyWords.length===0" v-show="isShowClearHistory">
+                        <el-tag
+                            :v-if="hotSearchKeyWords.length!==0"
+                            v-for="(tag,index) in hotSearchKeyWords"
+                            :key="index"
+                            size="small"
+                            closable
+                            @close="handleClose(tag)"
+                            style="margin-right: 10px; margin-top: 10px; cursor: pointer"
+                            @click="handleSearch(tag)"
+                        >
+                            {{ tag }}
+                        </el-tag>
+                    </div>
+                    <div v-if="hotSearchKeyWords.length===0" v-show="isShowClearHistory">
+                      <span  v-show="searchResults.length===0" >暂无搜索结果...</span>
+                    </div>
+                    <div
+                        v-show="!isShowClearHistory">
+                        <span style="font-size: 15px">你还没有登录哦~</span>
+                    </div>
+
+                </div>
+                <div class="search-his">
+                    <div>
+                        <span class="title">搜索历史</span>
+                        <span class="clear" @click="clearHistory" v-show="isShowClearHistory"><i class="el-icon-circle-close"></i>清空</span>
+                    </div>
+                    <div v-if="historySearch.length===0" v-show="isShowClearHistory">
+                        <el-tag
+                            :v-if="historySearch.length!==0"
+                            v-for="(tag,index) in historySearch"
+                            :key="index"
+                            size="small"
+                            closable
+                            @close="handleClose(tag)"
+                            style="margin-right: 10px; margin-top: 10px; cursor: pointer"
+                            @click="handleSearch(tag)"
+                        >
+                            {{ tag }}
+                        </el-tag>
+                    </div>
+                    <div v-if="historySearch.length===0" v-show="isShowClearHistory">
+                      <span  v-show="searchResults.length===0" >暂无搜索结果...</span>
+                    </div>
+                    <div
+                        v-show="!isShowClearHistory">
+                        <span style="color: var(--theme-color);font-size: 15px">你还没有登录哦~</span>
+                    </div>
+
+                </div>
+                <div style="margin-top: 10px">
+                    <div style="display: flex;flex-direction: row;justify-content: space-between">
+                        <span class="title">搜索结果: {{searchResults.length}} 条</span>
+                        <span class="clear" @click="clearSearchResults"><i class="el-icon-circle-close"></i>清空</span>
+                    </div>
+                    <div  style="max-height: 300px;overflow-y: scroll">
+                        <el-scrollbar  v-show="searchResults.length!==0">
+                            <div  v-for="(item,index) in searchResults" :key="index">
+                               <SearchResults :search-results="item"></SearchResults>
+                            </div>
+                        </el-scrollbar>
+                        <span  v-show="searchResults.length===0" >暂无搜索结果...</span>
+                    </div>
+
+                </div>
+            </div>
+
+
+        </el-popover>
+
+
+
+        <el-input
+                size="medium"
+                :placeholder="tipsWord"
+                style="width: 310px"
+                clearable
+                v-popover:popover
+                @keyup.enter.native="searchByInput"
+                v-model="search">
+            <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="searchByInput"></i>
+        </el-input>
+    </div>
+</template>
+
+
+<script>
+import axios from "axios";
+import Vue from "vue";
+import SearchResults from "@/components/home/SearchResults.vue";
+
+
+
+export default {
+    components: {SearchResults},
+    data() {
+        return {
+
+            visible: false,
+            isMouseOver: false,
+            search: '',
+            tipsWord: '',
+            historySearch: [],
+            searchResults:[],
+            update:true,
+
+            hotSearchKeyWords:[],
+
+        }
+    },
+
+    methods: {
+      isShowClearHistory(){
+        return !!(localStorage.getItem('Authorization') && localStorage.getItem('userId'));
+      },
+        handleSearch(word) {
+            this.search = word
+            this.searchByInput()
+        },
+        clearSearchResults(){
+          this.searchResults=[];
+        },
+        clearHistory() {
+            // var that=this;
+            // axios({
+            //     method: 'post',
+            //     // 请求的地址
+            //     url: 'http://localhost:8082/helloGithub_war_exploded/deleteAllLabel',
+            //     // URL 中的查询参数
+            //     params: {
+            //     }
+            // }).then((res)=>{
+            //     if (res.data.code === 200) {
+            //         Vue.prototype.$notify({
+            //             title: '成功',
+            //             message: ('i', {style: 'color: teal'}, res.data.msg),
+            //             type: 'success',
+            //             offset: 50
+            //         });
+            //         setTimeout(()=>{
+            //             that.gethistorySearch();
+            //         })
+            //     } else {
+            //         Vue.prototype.$notify.error({
+            //             title: '错误',
+            //             message: res.data.msg,
+            //             offset: 50
+            //         });
+            //     }
+            // }).catch((error)=>{
+            //     Vue.prototype.$notify.error({
+            //         title: '错误',
+            //         message: error,
+            //         offset: 50
+            //     });
+            // })
+        },
+        // searchRequest() {
+        //     const params = {
+        //         word: this.search || this.tipsWord
+        //     }
+        //     const queryString = new URLSearchParams(params).toString();
+        //     const url = `${window.location.origin}/video/search?${queryString}`;
+        //     window.open(url, '_blank');
+        // },
+        gethistorySearch(){
+            // var that=this;
+            // axios({
+            //     method: 'post',
+            //     // 请求的地址
+            //     url: 'http://localhost:8082/helloGithub_war_exploded/selectUserLabel',
+            //     // URL 中的查询参数
+            //     params: {
+            //     }
+            // }).then((res)=>{
+            //     that.historySearch=res.data;
+            //
+            // }).catch((error)=>{
+            //     Vue.prototype.$notify.error({
+            //         title: '错误',
+            //         message: error,
+            //         offset: 50
+            //     });
+            // })
+        },
+        handleClose(tag){
+            // var that=this;
+            // axios({
+            //     method: 'post',
+            //     // 请求的地址
+            //     url: 'http://localhost:8082/helloGithub_war_exploded/deletelabel',
+            //     // URL 中的查询参数
+            //     params: {
+            //         tag:tag
+            //     }
+            // }).then((res)=>{
+            //     if(res.data.code===200){
+            //         Vue.prototype.$notify({
+            //             title: '成功',
+            //             message: ('i', {style: 'color: teal'}, res.data.msg),
+            //             type: 'success',
+            //             offset: 50
+            //         });
+            //         setTimeout(()=>{
+            //             that.gethistorySearch();
+            //         })
+            //     }else{
+            //         Vue.prototype.$notify.error({
+            //             title: '错误',
+            //             message: res.data.msg,
+            //             offset: 50
+            //         });
+            //     }
+            // }).catch((error)=>{
+            //     Vue.prototype.$notify.error({
+            //         title: '错误',
+            //         message: error,
+            //         offset: 50
+            //     });
+            // })
+        },
+        searchByInput(){
+            var that=this;
+            if(localStorage.getItem('userId')&& localStorage.getItem('Authorization') ){
+              if(this.search!==''){
+                axios({
+                  method: 'post',
+                  // 请求的地址
+                  url: '/api/Search/searchByInput',
+                  // URL 中的查询参数
+                  params: {
+                    searchKey:this.search,
+                    userId:localStorage.getItem('userId')
+                  }
+                }).then((res)=>{
+                  if(res.data.code!==200){
+                    Vue.prototype.$notify.error({
+                      title: '错误',
+                      message: "查询失败！",
+                      offset: 0
+                    });
+                    that.reload()
+                  }else{
+                    Vue.prototype.$notify({
+                      title: '成功',
+                      message: ('i', {style: 'color: teal'}, "查询成功"),
+                      type:"success",
+                      offset: 50
+                    });
+                    that.searchResults=res.data.data;
+                    setTimeout(() => {
+                      that.visible = true;
+                      that.gethistorySearch();
+                    }, 200);
+                  }
+                }).catch((error)=>{
+                  Vue.prototype.$notify.error({
+                    title: '错误',
+                    message: error,
+                    offset: 50
+                  });
+                })
+              }else{
+                Vue.prototype.$notify.info({
+                  title: '提示',
+                  message: '请输入搜索内容',
+                  offset: 50
+                });
+              }
+            }else{
+              Vue.prototype.$notify.info({
+                title: '提示',
+                message: "登录状态失效，请重新登录！",
+                offset: 0
+              });
+            }
+
+
+
+        },
+        reload() {
+            // 移除组件
+            this.update = false
+            // 在组件移除后，重新渲染组件
+            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
+            this.$nextTick(() => {
+                this.update = true
+            })
+        }
+    },
+    mounted() {
+        this.tipsWord = "搜索书签";
+        this.gethistorySearch();
+
+    },
+
+};
+</script>
+
+<style scoped>
+.search-item ::v-deep .el-input .el-input__inner {
+    border-radius: 8px !important;
+}
+
+
+.search-content span.title {
+    display: inline-block;
+    font-size: 15px;
+    font-weight: bold;
+}
+
+.search-content .search-his span.clear {
+    float: right;
+    cursor: pointer;
+}
+
+.search-content .search-his span.clear:hover {
+    color: #ec0014;
+}
+.clear{
+    cursor: pointer;
+}
+.clear:hover{
+    color: #ec0014;
+}
+.search-content .mt {
+    margin-top: 10px;
+}
+
+.search-content .search-hot {
+    width: 100%;
+}
+
+.search-content .search-hot ul.hot-list {
+    width: 100%;
+    display: flex;
+    padding: 0;
+    flex-wrap: wrap;
+    margin-top: 5px;
+    list-style: none;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item {
+    width: 50%;
+    height: 30px;
+    font-size: 15px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item span:first-child {
+    width: 10%;
+    color: #999999;
+    text-align: center;
+    display: inline-block;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item span:last-child {
+    margin-left: 5px;
+    width: 80%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item span.top {
+    color: #EA322BFF;
+}
+
+.search-content .search-hot ul.hot-list li.hot-item:hover {
+    background-color: #f2f2f2;
+}
+
+</style>
+
diff --git a/src/components/home/SearchResults.vue b/src/components/home/SearchResults.vue
new file mode 100644
index 0000000..8625c16
--- /dev/null
+++ b/src/components/home/SearchResults.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="main" >
+    <div style="display: flex;align-items: center;">
+      <el-image style="width: 30px" :src="searchResults.icon">
+        <div slot="error" class="image-slot">
+          <img style="width: 28px" src="@/assets/img/null.png">
+        </div>
+      </el-image>
+    </div>
+    <div style="display: flex;margin-left: 10px;flex-direction: row;align-items: center;width: 200px">
+      <el-tooltip v-if="searchResults.name" class="item" effect="dark" :content="searchResults.name" placement="top">
+      <span style="font-size: 18px;font-weight: bold;overflow-x: scroll;width: 200px;white-space: nowrap;">
+        {{ searchResults.name }}
+      </span>
+      </el-tooltip>
+      <el-tooltip effect="dark" content="详情" placement="right" @click="goToDetail(searchResults.id)">
+        <i style="margin-left: 10px" class="card-icon el-icon-d-arrow-right"></i>
+      </el-tooltip>
+      <el-tooltip effect="dark" :content="'【'+searchResults.name+'】'+'手机二维码'" placement="bottom">
+        <i style="margin-left: 10px" class="qr el-icon-s-grid"></i>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "SearchResults",
+  props: {
+    searchResults: Object,
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+
+  },
+  created() {
+
+  },
+  computed: {},
+  methods: {
+    goToDetail(id){
+      if(id){
+          let pathInfo = this.$router.resolve({
+            path: '/nav',
+            query: {
+              uid: id,
+            }
+          })
+          window.open(pathInfo.href, '_self');
+        } else {
+          return false;
+        }
+    },
+  }
+
+}
+</script>
+<style scoped>
+.main {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 270px;
+  background-color: var(--content-bg);
+  border-radius: 14px;
+  border: 1px solid var(--theme-bg-color);
+  padding: 10px;
+  cursor: pointer;
+  transition: 0.3s ease;
+  margin-top: 10px;
+}
+.card-icon {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.card-icon:hover {
+  color: #5ddcff;
+}
+
+.qr:hover {
+  color: #5ddcff;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/setting/layout/SettingHeader.vue b/src/components/setting/layout/SettingHeader.vue
index 12cbb08..989c662 100644
--- a/src/components/setting/layout/SettingHeader.vue
+++ b/src/components/setting/layout/SettingHeader.vue
@@ -127,6 +127,7 @@ export default {
   font-weight: bold;
   color: var(--theme-color);
 }
+
 .upload-div {
   border-radius: 50px;
   width: 32px;
@@ -141,6 +142,7 @@ export default {
   border: 2px solid var(--theme-color);
   cursor: pointer;
 }
+
 .notice-div {
   border-radius: 50px;
   width: 32px;