Authored by 郭成尧

shop-info

@@ -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">&#xe605;</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">&#xe616;</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 }