Showing
2 changed files
with
52 additions
and
0 deletions
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 | } |
public/vue/channel/brand-search.vue
0 → 100644
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> |
-
Please register or login to post a comment