Authored by 2586703@qq.com

产品调整

@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 .iconfont { 16 .iconfont {
17 margin: 0 4px 0 0; 17 margin: 0 4px 0 0;
18 vertical-align: 9%; 18 vertical-align: 9%;
19 - font-size: 22rem / $pxConvertRem; 19 + font-size: 24rem / $pxConvertRem;
20 } 20 }
21 } 21 }
22 } 22 }
1 .article-type-four { 1 .article-type-four {
2 - padding: 0 0 5rem / $pxConvertRem 0; 2 + padding: 0 0 8rem / $pxConvertRem 0;
3 background: #fff; 3 background: #fff;
4 4
5 img { 5 img {
@@ -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>