style: search input

data/frontend/vue.ts

 export default {
   title: 'vue.js',
+  icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
   nav: [
     {
       title: '生态系统',
       nav: [
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'Vue.js',
           desc: '渐进式JavaScript 框架',
           link: 'https://cn.vuejs.org/',
@@ -16,7 +16,6 @@ export default {
           ]
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'Vue Router',
           desc: 'Vue Router 是 Vue.js 官方的路由管理器',
           link: 'https://router.vuejs.org/zh/',
@@ -27,7 +26,6 @@ export default {
           ]
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'Vuex',
           desc: 'Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。',
           link: 'https://vuex.vuejs.org/zh/',
@@ -38,7 +36,6 @@ export default {
           ]
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'vue-devtools',
           desc: 'vue.js调试工具',
           link: 'https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd',
@@ -49,7 +46,6 @@ export default {
           ]
         },
         {
-          icon: 'assets/icon/frontend/4.png',
           name: 'vue-cli',
           desc: 'Vue.js开发的标准脚手架工具',
           link: 'https://cli.vuejs.org/zh/',
@@ -60,7 +56,6 @@ export default {
           ]
         },
         {
-          icon: 'assets/icon/frontend/028.png',
           name: 'vuepress',
           desc: 'Vue 驱动的静态网站生成器',
           link: 'https://vuepress.vuejs.org/zh/',
@@ -71,7 +66,6 @@ export default {
           ]
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'Vue SSR',
           desc: 'Vue服务端渲染、SEO解决方案',
           link: 'https://vuepress.vuejs.org/zh/',
@@ -82,13 +76,11 @@ export default {
           ]
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'vue-class-component',
           desc: '用于类式Vue组件的ECMAScript / TypeScript装饰器。',
           link: 'https://github.com/vuejs/vue-class-component',
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'eslint-plugin-vue',
           desc: 'Vue.js的官方ESLint插件',
           link: 'https://eslint.vuejs.org/',
@@ -99,13 +91,11 @@ export default {
           ]
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'vite',
           desc: 'Vite是一个经过验证的Web开发人员构建工具，可在开发过程中通过本机ES模块导入为您的代码提供服务，并将其与Rollup捆绑在一起进行生产',
           link: 'https://github.com/vitejs/vite',
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'Vue 组合式 API',
           desc: 'Vue 组合式 API在线文档阅读',
           link: 'https://composition-api.vuejs.org/zh',
@@ -291,13 +281,11 @@ export default {
           ]
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'vue-meta',
           desc: '管理Vue 2.0组件中的页面元信息。支持SSR + Streaming',
           link: 'https://github.com/nuxt/vue-meta',
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'vue-scroller',
           desc: 'Vue Scroller是Vonic UI 的基础组件。为了平滑滚动，拉动刷新和无限加载。',
           link: 'https://wangdahoo.github.io/vue-scroller/#/',
@@ -308,7 +296,6 @@ export default {
           ]
         },
         {
-          icon: 'https://v3.vuejs.org/images/icons/apple-icon-152x152.png',
           name: 'vue-infinite-loading',
           desc: 'Vue.js的无限滚动插件(支持向上和向下)',
           link: 'https://peachscript.github.io/vue-infinite-loading/zh/',

src/components/search-engine/search-engine.component.html

@@ -2,7 +2,7 @@
   <div class="input-wrapper">
     <div
       class="left-icon"
-      (click)="toggleEngine()"
+      (click)="toggleEngine($event)"
       [ngStyle]="{ 'background-image': 'url(' + currentEngine.icon + ')' }"
     >
     </div>

src/components/search-engine/search-engine.component.scss

@@ -11,7 +11,7 @@ $width: 500px;
     width: $width;
     height: 40px;
     background: #fff;
-    border-radius: 15px;
+    border-radius: 5px;
     border: 1px solid #ccc;
     overflow: hidden;
 
@@ -22,10 +22,20 @@ $width: 500px;
       padding-right: 50px;
       border-color: transparent;
       font-size: 16px;
+      transition: all .3s;
 
       &::placeholder {
         font-size: 14px;
       }
+
+      &:hover {
+        border-color: #40a9ff;
+      }
+
+      &:focus {
+        border-color: #40a9ff;
+        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      }
     }
 
     .left-icon {

src/components/search-engine/search-engine.component.ts

@@ -26,10 +26,19 @@ export class SearchEngineComponent implements OnInit {
     if (inputEl) {
       inputEl.focus()
     }
+
+    document.addEventListener('click', () => {
+      this.toggleEngine(null, false)
+    })
   }
 
-  toggleEngine() {
-    this.showEngine = !this.showEngine
+  toggleEngine(e?: Event, isShow?: boolean) {
+    if (e) {
+      e.stopPropagation()
+    }
+    this.showEngine = typeof isShow === 'undefined'
+      ? !this.showEngine
+      : isShow
   }
 
   clickEngineItem(index) {