From c74c2088ac199660946448228ad1d0d28d1aafa4 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 12 Feb 2019 14:06:07 +0800
Subject: [PATCH] init

---
 src/components/HeaderSearch/index.vue  | 48 +++++++++++++++-----------
 src/icons/svg/search.svg               |  2 +-
 src/views/layout/components/Navbar.vue | 32 ++++++++++-------
 3 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index a9429e51..6f5e4b7b 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div :class="{'show':show}" class="headerSearch">
+  <div :class="{'show':show}" class="header-search">
     <svg-icon class-name="search-icon" icon-class="search" @click="click" />
     <el-select
       ref="headerSearchSelect"
       v-model="search"
-      :remote-method="remoteMethod"
+      :remote-method="querySearch"
       filterable
       default-first-option
       remote
@@ -23,7 +23,6 @@ import i18n from '@/lang'
 
 export default {
   name: 'HeaderSearch',
-
   data() {
     return {
       search: '',
@@ -60,8 +59,13 @@ export default {
     },
     blur() {
       this.$refs.headerSearchSelect.blur()
+      this.options = []
       this.show = false
     },
+    change(val) {
+      this.$router.push(val.path)
+      this.search = ''
+    },
     generateRouters(routers, basePath = '/') {
       const res = []
 
@@ -78,15 +82,23 @@ export default {
           data.title = i18ntitle
         }
         if (router.children) {
-          const tempTags = this.generateRouters(router.children, router.path)
-          if (tempTags.length >= 1) {
-            data.children = tempTags
+          const tempRouters = this.generateRouters(router.children, router.path)
+          if (tempRouters.length >= 1) {
+            data.children = tempRouters
           }
         }
         res.push(data)
       }
       return res
     },
+    querySearch(query) {
+      if (query !== '') {
+        this.options = this.matchRouters(this.routersArr, query)
+        console.log(this.options)
+      } else {
+        this.options = []
+      }
+    },
     matchRouters(routers, query = query.trim().toLowerCase(), preTitle = []) {
       let options = []
       routers.forEach(router => {
@@ -105,36 +117,30 @@ export default {
         }
       })
       return options
-    },
-    remoteMethod(query) {
-      if (query !== '') {
-        this.options = this.matchRouters(this.routersArr, query)
-        console.log(this.options)
-      } else {
-        this.options = []
-      }
-    },
-    change(val) {
-      this.$router.push(val.path)
-      this.search = ''
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.headerSearch {
+.header-search {
+  font-size: 0 !important;
+
   .search-icon {
     cursor: pointer;
+    font-size: 18px;
+    vertical-align: middle;
   }
 
   .header-search-select {
-    transition: width 0.3s, margin-left 0.3s;
+    font-size: 18px;
+    transition: width 0.3s;
     width: 0;
     overflow: hidden;
     background: transparent;
     border-radius: 0;
     display: inline-block;
+    vertical-align: middle;
 
     /deep/ .el-input__inner {
       border-radius: 0;
@@ -143,12 +149,14 @@ export default {
       padding-right: 0;
       box-shadow: none !important;
       border-bottom: 1px solid #d9d9d9;
+      vertical-align: middle;
     }
   }
 
   &.show {
     .header-search-select {
       width: 210px;
+      margin-left: 10px;
     }
   }
 }
diff --git a/src/icons/svg/search.svg b/src/icons/svg/search.svg
index 2eb8e174..84233dda 100644
--- a/src/icons/svg/search.svg
+++ b/src/icons/svg/search.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1549853555372" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2478" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M938.2 832.6L723.8 618.1c-2.5-2.5-5.3-4.4-7.9-6.4 36.2-55.6 57.3-121.8 57.3-193.1C773.3 222.8 614.6 64 418.7 64S64 222.8 64 418.6c0 195.9 158.8 354.6 354.6 354.6 71.3 0 137.5-21.2 193.2-57.4 2 2.7 3.9 5.4 6.3 7.8L832.5 938c14.6 14.6 33.7 21.9 52.8 21.9 19.1 0 38.2-7.3 52.8-21.8 29.2-29.1 29.2-76.4 0.1-105.5M418.7 661.3C284.9 661.3 176 552.4 176 418.6 176 284.9 284.9 176 418.7 176c133.8 0 242.6 108.9 242.6 242.7 0 133.7-108.9 242.6-242.6 242.6" p-id="2479"></path></svg>
\ No newline at end of file
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>
\ No newline at end of file
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index f4607eb5..dcb09ec1 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -6,27 +6,26 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
+        <search class="right-menu-item" />
 
-        <search class="right-menu-item" style="vertical-align: top;color: #5a5e66;font-size:20px;"/>
-
-        <error-log class="errLog-container right-menu-item"/>
+        <error-log class="errLog-container right-menu-item hover-effect"/>
 
         <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
-          <screenfull class="right-menu-item"/>
+          <screenfull class="right-menu-item hover-effect"/>
         </el-tooltip>
 
         <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
-          <size-select class="right-menu-item"/>
+          <size-select class="right-menu-item hover-effect"/>
         </el-tooltip>
 
-        <lang-select class="right-menu-item"/>
+        <lang-select class="right-menu-item hover-effect"/>
 
         <el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
-          <theme-picker class="theme-picker right-menu-item"/>
+          <theme-picker class="right-menu-item hover-effect"/>
         </el-tooltip>
       </template>
 
-      <el-dropdown class="avatar-container right-menu-item" trigger="click">
+      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
           <i class="el-icon-caret-bottom"/>
@@ -105,6 +104,7 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
+
     &:hover {
       background: rgba(0, 0, 0, .025)
     }
@@ -129,24 +129,30 @@ export default {
     }
 
     .right-menu-item {
-      cursor: pointer;
       display: inline-block;
       padding: 0 8px;
       height: 100%;
-      font-size: 20px;
+      font-size: 18px;
       color: #5a5e66;
       vertical-align: text-bottom;
-      transition: background .3s;
-      &:hover {
-        background: rgba(0, 0, 0, .025)
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background .3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, .025)
+        }
       }
     }
 
     .avatar-container {
       margin-right: 30px;
+
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
+
         .user-avatar {
           cursor: pointer;
           width: 40px;