Authored by 郭成尧

'search'

1 <template> 1 <template>
2 <tab v-bind:page="page"></tab> 2 <tab v-bind:page="page"></tab>
  3 + <brand-search></brand-search>
3 <resources v-bind:content-code.sync="contentCode"></resources> 4 <resources v-bind:content-code.sync="contentCode"></resources>
4 <brand-list v-bind:channel="channel"></brand-list> 5 <brand-list v-bind:channel="channel"></brand-list>
5 </template> 6 </template>
@@ -10,6 +11,7 @@ @@ -10,6 +11,7 @@
10 const tab = require('channel/tab.vue'); 11 const tab = require('channel/tab.vue');
11 const resources = require('component/resources/index.vue'); 12 const resources = require('component/resources/index.vue');
12 const brandList = require('channel/brand-list.vue'); 13 const brandList = require('channel/brand-list.vue');
  14 + const brandSearch = require('channel/brand-search.vue');
13 15
14 16
15 module.exports = { 17 module.exports = {
@@ -21,6 +23,7 @@ @@ -21,6 +23,7 @@
21 }, 23 },
22 components: { 24 components: {
23 tab, 25 tab,
  26 + brandSearch,
24 resources, 27 resources,
25 brandList 28 brandList
26 } 29 }
  1 +<template>
  2 + <div class="search">
  3 + <input v-if="showInput" type="text" name="">
  4 + <div v-else class="input" @click="changeToInput()">
  5 + <span class="icon icon-search"></span> Search
  6 + </div>
  7 + </div>
  8 +</template>
  9 +<style>
  10 + .search {
  11 + width: 100%;
  12 + height: 85px;
  13 + padding: 15px 0;
  14 + background-color: #f6f6f6;
  15 + text-align: center;
  16 +
  17 + .input {
  18 + margin-left: auto;
  19 + margin-right: auto;
  20 + background-color: #fff;
  21 + text-align: center;
  22 + color: #b0b0b0;
  23 + height: 55px;
  24 + width: 92%;
  25 + font-size: 28px;
  26 + padding: 5px 0;
  27 + }
  28 +
  29 + input {
  30 + width: 92%;
  31 + height: 55px;
  32 + padding: 10px;
  33 + }
  34 + }
  35 +</style>
  36 +<script>
  37 + module.exports = {
  38 + data() {
  39 + return {
  40 + showInput: false
  41 + };
  42 + },
  43 + methods: {
  44 + changeToInput() {
  45 + this.showInput = true;
  46 + }
  47 + }
  48 + };
  49 +</script>