'search'

 <template>
     <tab v-bind:page="page"></tab>
+    <brand-search></brand-search>
     <resources v-bind:content-code.sync="contentCode"></resources>
     <brand-list v-bind:channel="channel"></brand-list>
 </template>
@@ -10,6 +11,7 @@
     const tab = require('channel/tab.vue');
     const resources = require('component/resources/index.vue');
     const brandList = require('channel/brand-list.vue');
+    const brandSearch = require('channel/brand-search.vue');
 
 
     module.exports = {
@@ -21,6 +23,7 @@
         },
         components: {
             tab,
+            brandSearch,
             resources,
             brandList
         }

+<template>
+    <div class="search">
+        <input v-if="showInput" type="text" name="">
+        <div v-else class="input" @click="changeToInput()">
+            <span class="icon icon-search"></span> Search
+        </div>
+    </div>
+</template>
+<style>
+    .search {
+        width: 100%;
+        height: 85px;
+        padding: 15px 0;
+        background-color: #f6f6f6;
+        text-align: center;
+
+        .input {
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #fff;
+            text-align: center;
+            color: #b0b0b0;
+            height: 55px;
+            width: 92%;
+            font-size: 28px;
+            padding: 5px 0;
+        }
+
+        input {
+            width: 92%;
+            height: 55px;
+            padding: 10px;
+        }
+    }
+</style>
+<script>
+    module.exports = {
+        data() {
+            return {
+                showInput: false
+            };
+        },
+        methods: {
+            changeToInput() {
+                this.showInput = true;
+            }
+        }
+    };
+</script>