fe / yoho-blk · Commits

Go to a project

Authored by biao
Commit ad6ae285391acc6d3c1571c5b5fc1ff701db0564 1 parent 427f9121

update for classic brands

Inline Side-by-side
Showing 13 changed files with 167 additions and 6 deletions
@@ -72,11 +72,73 @@ const getContent = () => { @@ -72,11 +72,73 @@ const getContent = () => {
72 ], 72 ],
73 small: [ 73 small: [
74 { 74 {
  75 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/30/10/01714bacda5e9fa323a1dc5f720a7f7140.jpg?imageView2/1/w/185/h/248',
  76 + link: ''
  77 + },
  78 + {
  79 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/30/10/01714bacda5e9fa323a1dc5f720a7f7140.jpg?imageView2/1/w/185/h/248',
  80 + link: ''
  81 + }
  82 + ],
  83 + bottomSpace: true
  84 + },
  85 + {
  86 + big: [
  87 + {
  88 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
  89 + link: ''
  90 + }
  91 + ],
  92 + small: [
  93 + {
  94 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
  95 + link: ''
  96 + },
  97 + {
  98 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
  99 + link: ''
  100 + }
  101 + ],
  102 + right: true,
  103 + bottomSpace: true
  104 + },
  105 + {
  106 + big: [
  107 + {
  108 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
  109 + link: ''
  110 + }
  111 + ],
  112 + small: [
  113 + {
  114 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
  115 + link: ''
  116 + },
  117 + {
75 img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 118 img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
76 link: '' 119 link: ''
77 } 120 }
78 ] 121 ]
79 }, 122 },
  123 + {
  124 + big: [
  125 + {
  126 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
  127 + link: ''
  128 + }
  129 + ],
  130 + small: [
  131 + {
  132 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
  133 + link: ''
  134 + },
  135 + {
  136 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
  137 + link: ''
  138 + }
  139 + ],
  140 + right: true
  141 + }
80 ] 142 ]
81 }, 143 },
82 { 144 {
@@ -115,7 +177,7 @@ const getContent = () => { @@ -115,7 +177,7 @@ const getContent = () => {
115 }, 177 },
116 { 178 {
117 adBanner: { 179 adBanner: {
118 - img: '', 180 + img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
119 link: '' 181 link: ''
120 } 182 }
121 }, 183 },
@@ -12,9 +12,15 @@ @@ -12,9 +12,15 @@
12 {{#if newArrivals}} 12 {{#if newArrivals}}
13 {{> new-arrival}} 13 {{> new-arrival}}
14 {{/if}} 14 {{/if}}
  15 + {{#if classicBrands}}
  16 + {{> classic-brands}}
  17 + {{/if}}
15 {{#if styleIcon}} 18 {{#if styleIcon}}
16 {{> style-icon}} 19 {{> style-icon}}
17 {{/if}} 20 {{/if}}
  21 + {{#if adBanner}}
  22 + {{> ad-banner}}
  23 + {{/if}}
18 {{/ content}} 24 {{/ content}}
19 </div> 25 </div>
20 </div> 26 </div>
  1 +<div class="ad-banner">
  2 + {{#adBanner}}
  3 + <img src="{{image img 864 120}}" alt="">
  4 + {{/adBanner}}
  5 +</div>
  1 +{{# classicBrands}}
  2 + <div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
  3 + {{# big}}
  4 + <img class="big-img" src="{{image img 426 250}}" alt="big-img">
  5 + {{/ big}}
  6 + {{# small}}
  7 + <img class="small-img {{#if @first}}first{{/if}}" src="{{image img 213 213}}" alt="big-img">
  8 + {{/ small}}
  9 +</div>
  10 +{{/ classicBrands}}
  1 +<div class="classic-brands-container">
  2 + {{> floor-header}}
  3 + {{#if classicBrands}}
  4 + {{> brand-img-box}}
  5 + {{/if}}
  6 +</div>
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 {{> floor-header}} 2 {{> floor-header}}
3 <div class="smooth-card-container"> 3 <div class="smooth-card-container">
4 {{# styleIcon}} 4 {{# styleIcon}}
5 - <div class="card {{#if @first}}active{{/if}}"> 5 + <div class="card {{#if @first}}active{{/if}} {{#if @last}}last{{/if}}">
6 <div class="img" style="background-image: url('{{image img 160 240}}')"></div> 6 <div class="img" style="background-image: url('{{image img 160 240}}')"></div>
7 {{> brand-text-box}} 7 {{> brand-text-box}}
8 </div> 8 </div>
  1 +.ad-banner {
  2 + height: 120px;
  3 + margin-top: 15px;
  4 +
  5 + img {
  6 + width: 100%;
  7 + height: 100%;
  8 + border: none;
  9 + }
  10 +}
  1 +.brand-img-box {
  2 + width: 426px;
  3 + box-sizing: border-box;
  4 + display: inline-block;
  5 +
  6 + &.mb10 {
  7 + margin-bottom: 10px;
  8 + }
  9 +
  10 + &.right {
  11 + float: right;
  12 + }
  13 +
  14 +
  15 + img {
  16 + float: left;
  17 + }
  18 +
  19 + .big-img {
  20 + width: 100%;
  21 + height: 250px;
  22 + }
  23 +
  24 + .small-img {
  25 + width: 50%;
  26 + height: 213px;
  27 + display: inline-block;
  28 + box-sizing: border-box;
  29 + border: 1px solid $grayBorder;
  30 + border-top: none;
  31 +
  32 + &.first {
  33 + border-right: none;
  34 + }
  35 + }
  36 +}
@@ -38,5 +38,6 @@ @@ -38,5 +38,6 @@
38 outline: none; 38 outline: none;
39 border: 1PX solid black; 39 border: 1PX solid black;
40 font-size: 12px; 40 font-size: 12px;
  41 + cursor: pointer;
41 } 42 }
42 } 43 }
  1 +.classic-brands-container {
  2 + @extend .resource-container;
  3 +}
@@ -4,9 +4,15 @@ $grayBorder: #f0f0f0; @@ -4,9 +4,15 @@ $grayBorder: #f0f0f0;
4 margin-top: 60px; 4 margin-top: 60px;
5 } 5 }
6 6
  7 +.cursor-pointer {
  8 + cursor: pointer;
  9 +}
7 10
8 @import "home"; 11 @import "home";
9 @import "ad"; 12 @import "ad";
10 @import "brand-text-box"; 13 @import "brand-text-box";
  14 +@import "brand-img-box";
11 @import "new-arrival"; 15 @import "new-arrival";
  16 +@import "classic-brands";
12 @import "style-icon"; 17 @import "style-icon";
  18 +@import "ad-banner";
@@ -20,6 +20,8 @@ @@ -20,6 +20,8 @@
20 font-size: 12px; 20 font-size: 12px;
21 21
22 span { 22 span {
  23 + @extend .cursor-pointer;
  24 +
23 padding-bottom: 3px; 25 padding-bottom: 3px;
24 border-bottom: 1px solid #000; 26 border-bottom: 1px solid #000;
25 27
@@ -35,13 +37,15 @@ @@ -35,13 +37,15 @@
35 37
36 38
37 img { 39 img {
  40 + @extend .cursor-pointer;
  41 +
38 width: 100%; 42 width: 100%;
39 height: $imgHeight; 43 height: $imgHeight;
40 } 44 }
41 45
42 &.normal { 46 &.normal {
43 float: left; 47 float: left;
44 - margin-right: 17px; 48 + margin-right: 18px;
45 } 49 }
46 50
47 &.last { 51 &.last {
1 .style-icon-container { 1 .style-icon-container {
2 - $width: 160px; 2 + $width: 164px;
3 $height: 240px; 3 $height: 240px;
4 $space: 15px; 4 $space: 15px;
5 5
6 @extend .resource-container; 6 @extend .resource-container;
7 - clear: both;  
8 7
9 .smooth-card-container { 8 .smooth-card-container {
  9 + width: 880px;
  10 + height: $height;
10 margin: 0 auto; 11 margin: 0 auto;
  12 + overflow: hidden;
11 } 13 }
12 14
13 .card { 15 .card {
@@ -17,6 +19,7 @@ @@ -17,6 +19,7 @@
17 position: relative; 19 position: relative;
18 box-sizing: border-box; 20 box-sizing: border-box;
19 21
  22 +
20 .img { 23 .img {
21 width: $width; 24 width: $width;
22 height: 100%; 25 height: 100%;
@@ -27,6 +30,12 @@ @@ -27,6 +30,12 @@
27 background-position: center center; 30 background-position: center center;
28 } 31 }
29 32
  33 + &.last {
  34 + .img {
  35 + margin-right: 0;
  36 + }
  37 + }
  38 +
30 .brand-text-box { 39 .brand-text-box {
31 $size: 12px; 40 $size: 12px;
32 $line-height: 1.2; 41 $line-height: 1.2;
@@ -35,6 +44,7 @@ @@ -35,6 +44,7 @@
35 width: 0; 44 width: 0;
36 border: none; 45 border: none;
37 46
  47 +
38 p { 48 p {
39 height: calc($size*$line-height*$lines-to-show); 49 height: calc($size*$line-height*$lines-to-show);
40 width: calc($width-2*$space); 50 width: calc($width-2*$space);
@@ -58,6 +68,7 @@ @@ -58,6 +68,7 @@
58 68
59 &.active { 69 &.active {
60 width: calc($width*2+$space); 70 width: calc($width*2+$space);
  71 + float: left;
61 72
62 .img { 73 .img {
63 margin-right: 0; 74 margin-right: 0;
@@ -69,7 +80,7 @@ @@ -69,7 +80,7 @@
69 display: inline-block; 80 display: inline-block;
70 float: left; 81 float: left;
71 padding: 25px 0 25px $space; 82 padding: 25px 0 25px $space;
72 - border: 1px solid #ccc; 83 + border: 1px solid #404040;
73 border-left: none; 84 border-left: none;
74 85
75 * { 86 * {
@@ -81,5 +92,6 @@ @@ -81,5 +92,6 @@
81 } 92 }
82 } 93 }
83 94
  95 +
84 } 96 }
85 } 97 }