Merge branch 'feature/brand' of git.yoho.cn:fe/yohoblk-wap into feature/brand
Showing
13 changed files
with
128 additions
and
24 deletions
@@ -19,7 +19,8 @@ router.get('/women', channel.index); // 首页 | @@ -19,7 +19,8 @@ router.get('/women', channel.index); // 首页 | ||
19 | router.get('/lifestyle', channel.index); // 首页 | 19 | router.get('/lifestyle', channel.index); // 首页 |
20 | router.get('/resources', channel.resources); // 资源位接口 | 20 | router.get('/resources', channel.resources); // 资源位接口 |
21 | router.get('/brand', brand.index); // 店铺首页 | 21 | router.get('/brand', brand.index); // 店铺首页 |
22 | -router.get('/brandList', brand.brandList); // 店铺首页 | 22 | +router.get('/brand-list', brand.brandList); // 店铺首页 |
23 | router.get('/cate', brand.cate); // 全部分类 | 23 | router.get('/cate', brand.cate); // 全部分类 |
24 | 24 | ||
25 | + | ||
25 | module.exports = router; | 26 | module.exports = router; |
1 | -{{# result}} | ||
2 | - <div class="brand-top-box" style="background: url({{brandBg}})"> | ||
3 | - <div class="brand-bottom"> | ||
4 | - {{#if brandLogo}} | ||
5 | - <img src="{{brandLogo}}" alt="{{brandName}}"> | ||
6 | - {{^}} | ||
7 | - <div class="brand-title">{{brandName}}</div> | ||
8 | - {{/if}} | ||
9 | - <hr> | ||
10 | - <div class="brand-intro line-clamp">{{brandIntro}}</div> | 1 | +<div id="brand"> |
2 | + <brand-box></brand-box> | ||
3 | + {{# result}} | ||
4 | + <div class="brand-top-box" style="background: url({{brandBg}})"> | ||
5 | + <div class="brand-bottom"> | ||
6 | + {{#if brandLogo}} | ||
7 | + <img src="{{brandLogo}}" alt="{{brandName}}"> | ||
8 | + {{^}} | ||
9 | + <div class="brand-title">{{brandName}}</div> | ||
10 | + {{/if}} | ||
11 | + <hr> | ||
12 | + <div class="brand-intro line-clamp">{{brandIntro}}</div> | ||
13 | + </div> | ||
14 | + <div class="expand"></div> | ||
15 | + <div class="collapse"></div> | ||
11 | </div> | 16 | </div> |
12 | - <div class="expand"></div> | ||
13 | - <div class="collapse"></div> | ||
14 | - </div> | ||
15 | -{{/ result}} | ||
17 | + {{/ result}} | ||
18 | +</div> |
public/img/channel/back.png
0 → 100644
1.28 KB
public/img/channel/favorite.png
0 → 100644
1.65 KB
public/img/channel/filter.png
0 → 100644
1.35 KB
public/img/channel/share.png
0 → 100644
1.48 KB
@@ -5,18 +5,15 @@ | @@ -5,18 +5,15 @@ | ||
5 | * Time: 14:13 | 5 | * Time: 14:13 |
6 | */ | 6 | */ |
7 | 7 | ||
8 | -const $ = require('yoho-jquery'); | ||
9 | const Vue = require('yoho-vue'); | 8 | const Vue = require('yoho-vue'); |
10 | 9 | ||
11 | -const resources = require('channel/resources.vue'); | ||
12 | -const letterList = require('channel/letter-list.vue'); | 10 | +const brandListBox = require('channel/brand-list-box.vue'); |
13 | 11 | ||
14 | require('common/vue-filter'); | 12 | require('common/vue-filter'); |
15 | 13 | ||
16 | new Vue({ | 14 | new Vue({ |
17 | - el: '#brand', | 15 | + el: '#brand-list', |
18 | components: { | 16 | components: { |
19 | - resources, | ||
20 | - letterList | 17 | + brandListBox |
21 | } | 18 | } |
22 | }); | 19 | }); |
@@ -5,6 +5,16 @@ | @@ -5,6 +5,16 @@ | ||
5 | * Time: 16:05 | 5 | * Time: 16:05 |
6 | */ | 6 | */ |
7 | const $ = require('yoho-jquery'); | 7 | const $ = require('yoho-jquery'); |
8 | +const Vue = require('yoho-vue'); | ||
9 | + | ||
10 | +const brandBox = require('channel/brand-box.vue'); | ||
11 | + | ||
12 | +new Vue({ | ||
13 | + el: '#brand', | ||
14 | + components: { | ||
15 | + brandBox | ||
16 | + } | ||
17 | +}); | ||
8 | 18 | ||
9 | const $expand = $('.expand'), | 19 | const $expand = $('.expand'), |
10 | $collapse = $('.collapse'), | 20 | $collapse = $('.collapse'), |
public/vue/channel/brand-box.vue
0 → 100644
1 | +<template> | ||
2 | + <div> | ||
3 | + <brand-top-component v-bind:share-data="123456"></brand-top-component> | ||
4 | + </div> | ||
5 | +</template> | ||
6 | +<style> | ||
7 | + | ||
8 | +</style> | ||
9 | +<script> | ||
10 | + const brandTopComponent = require('channel/brand-top.vue'); | ||
11 | + | ||
12 | + module.exports = { | ||
13 | + components: { | ||
14 | + brandTopComponent | ||
15 | + } | ||
16 | + }; | ||
17 | +</script> |
public/vue/channel/brand-list-box.vue
0 → 100644
1 | +<template> | ||
2 | + <div> | ||
3 | + <resources v-bind:content="'men'"></resources> | ||
4 | + <letter-list></letter-list> | ||
5 | + </div> | ||
6 | +</template> | ||
7 | +<style> | ||
8 | +</style> | ||
9 | +<script> | ||
10 | + const resources = require('channel/resources.vue'); | ||
11 | + const letterList = require('channel/letter-list.vue'); | ||
12 | + | ||
13 | + module.exports = { | ||
14 | + components: { | ||
15 | + resources, | ||
16 | + letterList | ||
17 | + } | ||
18 | + }; | ||
19 | +</script> |
public/vue/channel/brand-top.vue
0 → 100644
1 | +<template> | ||
2 | + <div class="top-box clearfix"> | ||
3 | + <i class="back"></i> | ||
4 | + <div class="right"> | ||
5 | + <i class="favorite"></i> | ||
6 | + <i class="share"><a href="{{shareData}}"></a></i> | ||
7 | + <i class="filter"></i> | ||
8 | + </div> | ||
9 | + </div> | ||
10 | +</template> | ||
11 | + | ||
12 | +<style> | ||
13 | + .top-box { | ||
14 | + width: 100%; | ||
15 | + height: 60px; | ||
16 | + position: fixed; | ||
17 | + top: 0; | ||
18 | + left: 0; | ||
19 | + z-index: 99; | ||
20 | + | ||
21 | + .back { | ||
22 | + width: 60px; | ||
23 | + height: 60px; | ||
24 | + float: left; | ||
25 | + background: url("/channel/back.png") no-repeat; | ||
26 | + } | ||
27 | + | ||
28 | + .right { | ||
29 | + height: 60px; | ||
30 | + float: right; | ||
31 | + | ||
32 | + i { | ||
33 | + width: 60px; | ||
34 | + height: 60px; | ||
35 | + margin: 0 5px; | ||
36 | + display: inline-block; | ||
37 | + } | ||
38 | + | ||
39 | + .favorite { | ||
40 | + background: url("/channel/favorite.png") no-repeat; | ||
41 | + } | ||
42 | + | ||
43 | + .share { | ||
44 | + background: url("/channel/share.png") no-repeat; | ||
45 | + } | ||
46 | + | ||
47 | + .filter { | ||
48 | + background: url("/channel/filter.png") no-repeat; | ||
49 | + } | ||
50 | + } | ||
51 | + } | ||
52 | +</style> | ||
53 | + | ||
54 | +<script> | ||
55 | + module.exports = { | ||
56 | + props: ['shareData'] | ||
57 | + }; | ||
58 | +</script> |
-
Please register or login to post a comment