Showing
8 changed files
with
46 additions
and
17 deletions
mobile/public/img/li-current-bg.png
deleted
100644 → 0
1.77 KB
@@ -14,11 +14,10 @@ $pxConvertRem : 40; | @@ -14,11 +14,10 @@ $pxConvertRem : 40; | ||
14 | .thumb-container { | 14 | .thumb-container { |
15 | position: relative; | 15 | position: relative; |
16 | font-size: 0; | 16 | font-size: 0; |
17 | - padding-left: 30rem / $pxConvertRem; | 17 | + padding: 20rem / $pxConvertRem 0 0 30rem / $pxConvertRem; |
18 | background: #fff; | 18 | background: #fff; |
19 | z-index: 10; | 19 | z-index: 10; |
20 | - background: url('../img/li-bg.png') repeat-x; | ||
21 | - background-size: auto 100%; | 20 | + border-bottom: 1px solid #969696; |
22 | 21 | ||
23 | &.fixed{ | 22 | &.fixed{ |
24 | position: fixed; | 23 | position: fixed; |
@@ -40,11 +39,21 @@ $pxConvertRem : 40; | @@ -40,11 +39,21 @@ $pxConvertRem : 40; | ||
40 | } | 39 | } |
41 | 40 | ||
42 | &.focus { | 41 | &.focus { |
43 | - background: url('../img/li-current-bg.png'); | ||
44 | - background-size: 100% 100%; | ||
45 | .thumb-img { | 42 | .thumb-img { |
46 | border-color: #000; | 43 | border-color: #000; |
47 | } | 44 | } |
45 | + | ||
46 | + .arrow { | ||
47 | + position: absolute; | ||
48 | + width: 32rem / $pxConvertRem; | ||
49 | + height: 19rem / $pxConvertRem; | ||
50 | + bottom: -1px; | ||
51 | + left: 50%; | ||
52 | + margin: 0 0 0 -16rem / $pxConvertRem; | ||
53 | + z-index: 12; | ||
54 | + background: url('../img/arrow.png') no-repeat; | ||
55 | + background-size: 100% 100%; | ||
56 | + } | ||
48 | } | 57 | } |
49 | 58 | ||
50 | .thumb-img { | 59 | .thumb-img { |
@@ -16,34 +16,50 @@ | @@ -16,34 +16,50 @@ | ||
16 | } | 16 | } |
17 | 17 | ||
18 | .brand-list { | 18 | .brand-list { |
19 | - padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem 30rem / $pxConvertRem; | 19 | + padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem; |
20 | background: #fff; | 20 | background: #fff; |
21 | border-top: 1px solid #e0e0e0; | 21 | border-top: 1px solid #e0e0e0; |
22 | border-bottom: 1px solid #e0e0e0; | 22 | border-bottom: 1px solid #e0e0e0; |
23 | 23 | ||
24 | li { | 24 | li { |
25 | float: left; | 25 | float: left; |
26 | - margin: 0 0 0 20rem / $pxConvertRem; | ||
27 | - border: 1px solid #e0e0e0; | 26 | + width: 158rem / $pxConvertRem; |
27 | + height: 120rem / $pxConvertRem; | ||
28 | + border-left: 1px solid #e0e0e0; | ||
29 | + | ||
30 | + a { | ||
31 | + display: block; | ||
32 | + } | ||
28 | 33 | ||
29 | - a{ | 34 | + .brand-logo { |
30 | display: table-cell; | 35 | display: table-cell; |
31 | - width: 128rem / $pxConvertRem; | ||
32 | - height: 128rem / $pxConvertRem; | 36 | + width: 158rem / $pxConvertRem; |
37 | + height: 94rem / $pxConvertRem; | ||
33 | vertical-align:middle; | 38 | vertical-align:middle; |
34 | - } | ||
35 | 39 | ||
36 | img { | 40 | img { |
37 | display: block; | 41 | display: block; |
38 | - max-width: 128rem / $pxConvertRem; | ||
39 | - max-height: 128rem / $pxConvertRem; | 42 | + max-width: 158rem / $pxConvertRem; |
43 | + max-height: 94rem / $pxConvertRem; | ||
40 | vertical-align: middle; | 44 | vertical-align: middle; |
41 | margin: 0 auto; | 45 | margin: 0 auto; |
42 | } | 46 | } |
43 | } | 47 | } |
44 | 48 | ||
49 | + .brand-name { | ||
50 | + line-height: 26rem / $pxConvertRem; | ||
51 | + font-size: 14rem / $pxConvertRem; | ||
52 | + color: #babac2; | ||
53 | + text-align: center; | ||
54 | + text-decoration: none; | ||
55 | + border-bottom: none; | ||
56 | + overflow: hidden; | ||
57 | + } | ||
58 | + | ||
59 | + } | ||
60 | + | ||
45 | li:first-child { | 61 | li:first-child { |
46 | - margin: 0; | 62 | + border-left: none; |
47 | } | 63 | } |
48 | } | 64 | } |
49 | } | 65 | } |
@@ -6,6 +6,7 @@ | @@ -6,6 +6,7 @@ | ||
6 | <li class="thumb"> | 6 | <li class="thumb"> |
7 | <img class="thumb-img lazy" src="{{thumb}}"> | 7 | <img class="thumb-img lazy" src="{{thumb}}"> |
8 | <span class="clothe-type {{type}}"></span> | 8 | <span class="clothe-type {{type}}"></span> |
9 | + <em class="arrow"></em> | ||
9 | </li> | 10 | </li> |
10 | {{/ list}} | 11 | {{/ list}} |
11 | </ul> | 12 | </ul> |
@@ -3,7 +3,10 @@ | @@ -3,7 +3,10 @@ | ||
3 | <ul class="brand-list clearfix"> | 3 | <ul class="brand-list clearfix"> |
4 | {{# brands}} | 4 | {{# brands}} |
5 | <li><a href="{{url}}"> | 5 | <li><a href="{{url}}"> |
6 | + <div class="brand-logo"> | ||
6 | <img class="lazy" src="{{thumb}}" alt="{{name}}"> | 7 | <img class="lazy" src="{{thumb}}" alt="{{name}}"> |
8 | + </div> | ||
9 | + <p class="brand-name">{{name}}</p> | ||
7 | </a></li> | 10 | </a></li> |
8 | {{/ brands}} | 11 | {{/ brands}} |
9 | </ul> | 12 | </ul> |
-
Please register or login to post a comment