Showing
3 changed files
with
114 additions
and
64 deletions
@@ -4,23 +4,19 @@ | @@ -4,23 +4,19 @@ | ||
4 | <div class="reds-shop"> | 4 | <div class="reds-shop"> |
5 | {{!--shop-header--}} | 5 | {{!--shop-header--}} |
6 | <div class="shop-header brand-header" data-id="{{brand.brand_id}}"> | 6 | <div class="shop-header brand-header" data-id="{{brand.brand_id}}"> |
7 | - <img class="banner" {{#if banner}} src="{{image banner 750 234}}"{{/if}} alt="banner"> | ||
8 | - <div class="shop-info"> | ||
9 | - <img class="logo" src="{{image brand.brand_ico 120 120}}" alt="logo"> | ||
10 | - <div class="shop-info-base"> | ||
11 | - <h1 class="shopname">{{brand.brand_name}}</h1> | ||
12 | - <div class="favs">粉丝数: 534 <i class="iconfont favs-btn like"></i></div> | ||
13 | - </div> | ||
14 | - {{#shopIntro}} | ||
15 | - <div class="shop-intro"> | ||
16 | - <div id="shortIntro" class="line-clamp-2">{{{short_intro}}}</div> | ||
17 | - <div id="shopIntro" class="hide">{{{shop_intro}}}</div> | ||
18 | - <div class="shop-intro-folder"> | ||
19 | - <i id="shopIntrArrw" class="iconfont"></i> | 7 | + {{#if banner}} |
8 | + <div class="branner-top"> | ||
9 | + <img class="shop-back-img" src="{{image banner 750 234}}"> | ||
10 | + {{#if brand.brand_ico}} | ||
11 | + <img class="logo" src="{{image brand.brand_ico 120 120}}"> | ||
12 | + {{/if}} | ||
13 | + <p class="store-name">{{brand.brand_name}}</p> | ||
14 | + <div class="fav-box clearfix"> | ||
15 | + <div class="favs pull-left">粉丝数: 534 </div> | ||
16 | + <div class="not-collect buriedpoint pull-left" id="collect" data-bp-id="shop_branner_collect_1"></div> | ||
20 | </div> | 17 | </div> |
21 | </div> | 18 | </div> |
22 | - {{/shopIntro}} | ||
23 | - </div> | 19 | + {{/if}} |
24 | </div> | 20 | </div> |
25 | {{!--shop-tab-nav: 首页 | 全部商品--}} | 21 | {{!--shop-tab-nav: 首页 | 全部商品--}} |
26 | <div class="tab"> | 22 | <div class="tab"> |
1 | -const $ = require('yoho-jquery'); | ||
2 | -const allProduct = require('./shop/all-product'); | ||
3 | -let Tab = require('../plugin/tab'); | ||
4 | - | ||
5 | require('layout/_swiper.css'); | 1 | require('layout/_swiper.css'); |
6 | require('product/search/list.page.css'); | 2 | require('product/search/list.page.css'); |
7 | require('product/shop/redshop.page.css'); | 3 | require('product/shop/redshop.page.css'); |
8 | 4 | ||
5 | +const $ = require('yoho-jquery'); | ||
6 | +const allProduct = require('./shop/all-product'); | ||
7 | +let Tab = require('../plugin/tab'); | ||
8 | + | ||
9 | let $filterBox = $('.filter-box'); | 9 | let $filterBox = $('.filter-box'); |
10 | let $goodsContainer = $('#goods-container'); | 10 | let $goodsContainer = $('#goods-container'); |
11 | 11 |
1 | -.shop-header { | ||
2 | - .banner { | ||
3 | - height: 234px; | 1 | +.reds-shop { |
2 | + .pull-left { | ||
3 | + float: left; | ||
4 | } | 4 | } |
5 | -} | ||
6 | 5 | ||
7 | -.shop-info { | ||
8 | - position: relative; | ||
9 | - padding-right: 30px; | ||
10 | - padding-left: 30px; | 6 | + .clearfix:after { |
7 | + content: ""; | ||
8 | + display: table; | ||
9 | + clear: both; | ||
10 | + } | ||
11 | 11 | ||
12 | - .logo { | ||
13 | - position: absolute; | ||
14 | - top: -40px; | ||
15 | - width: 120px; | ||
16 | - height: 120px; | ||
17 | - box-shadow: 0 0 2px 1px #dedede; | 12 | + .shop-info { |
13 | + position: relative; | ||
14 | + padding-right: 30px; | ||
15 | + padding-left: 30px; | ||
16 | + height: 234px; | ||
17 | + | ||
18 | + .logo { | ||
19 | + position: absolute; | ||
20 | + width: 120px; | ||
21 | + height: 120px; | ||
22 | + box-shadow: 0 0 2px 1px #dedede; | ||
23 | + } | ||
24 | + | ||
25 | + .shopname { | ||
26 | + font-size: 32px; | ||
27 | + color: #444; | ||
28 | + margin-left: 180px; | ||
29 | + } | ||
30 | + | ||
31 | + .favs-btn { | ||
32 | + margin-left: 30px; | ||
33 | + | ||
34 | + &.like { | ||
35 | + color: #e33333; | ||
36 | + } | ||
37 | + } | ||
18 | } | 38 | } |
19 | 39 | ||
20 | - .shopname { | ||
21 | - font-size: 32px; | 40 | + .shop-intro { |
41 | + font-size: 28px; | ||
22 | color: #444; | 42 | color: #444; |
23 | - margin-left: 180px; | 43 | + |
44 | + .hide { | ||
45 | + display: none; | ||
46 | + } | ||
47 | + | ||
48 | + .active { | ||
49 | + display: block; | ||
50 | + } | ||
51 | + } | ||
52 | + | ||
53 | + .shop-intro-folder { | ||
54 | + margin-top: 26px; | ||
55 | + margin-bottom: 24px; | ||
56 | + text-align: center; | ||
57 | + font-size: 18px; | ||
58 | + line-height: 1; | ||
24 | } | 59 | } |
25 | 60 | ||
26 | - .favs-btn { | ||
27 | - margin-left: 30px; | 61 | + .branner-top { |
62 | + width: 100%; | ||
63 | + height: 234px; | ||
64 | + position: relative; | ||
65 | + overflow: hidden; | ||
28 | 66 | ||
29 | - &.like { | ||
30 | - color: #e33333; | 67 | + .shop-back-img { |
68 | + height: 100%; | ||
69 | + width: 100%; | ||
31 | } | 70 | } |
32 | } | 71 | } |
33 | -} | ||
34 | 72 | ||
35 | -.shop-info-base { | ||
36 | - display: flex; | ||
37 | - justify-content: space-between; | ||
38 | - line-height: 1; | ||
39 | - padding-top: 38px; | ||
40 | - padding-bottom: 35px; | 73 | + .logo { |
74 | + position: absolute; | ||
75 | + overflow: hidden; | ||
76 | + left: 30px; | ||
77 | + bottom: 30px; | ||
78 | + width: 100px; | ||
79 | + height: 100px; | ||
80 | + } | ||
41 | 81 | ||
42 | - .favs { | ||
43 | - margin-top: -90px; | 82 | + .store-name { |
44 | color: #fff; | 83 | color: #fff; |
84 | + font-size: 28px; | ||
85 | + position: absolute; | ||
86 | + overflow: hidden; | ||
87 | + left: 148px; | ||
88 | + bottom: 20px; | ||
45 | } | 89 | } |
46 | -} | ||
47 | 90 | ||
48 | -.shop-intro { | ||
49 | - font-size: 28px; | ||
50 | - color: #444; | 91 | + .fav-box { |
92 | + position: absolute; | ||
93 | + bottom: 30px; | ||
94 | + right: 30px; | ||
95 | + border-radius: 10px; | ||
96 | + text-align: center; | ||
97 | + background-size: contain; | ||
98 | + color: #fff; | ||
51 | 99 | ||
52 | - .hide { | ||
53 | - display: none; | 100 | + .favs { |
101 | + line-height: 48px; | ||
102 | + margin-right: 16px; | ||
103 | + } | ||
54 | } | 104 | } |
55 | 105 | ||
56 | - .active { | ||
57 | - display: block; | 106 | + .already-collect { |
107 | + width: 128px; | ||
108 | + height: 50px; | ||
109 | + border-radius: 10px; | ||
110 | + background-image: url("/product/already-collect.png") no-repeat; | ||
111 | + background-size: contain; | ||
58 | } | 112 | } |
59 | -} | ||
60 | 113 | ||
61 | -.shop-intro-folder { | ||
62 | - margin-top: 26px; | ||
63 | - margin-bottom: 24px; | ||
64 | - text-align: center; | ||
65 | - font-size: 18px; | ||
66 | - line-height: 1; | 114 | + .not-collect { |
115 | + width: 128px; | ||
116 | + height: 50px; | ||
117 | + border-radius: 10px; | ||
118 | + background-image: url("/product/not-collect.png") no-repeat; | ||
119 | + background-size: contain; | ||
120 | + } | ||
67 | } | 121 | } |
-
Please register or login to post a comment