related-brand 样式

@@ -4,6 +4,7 @@
     height: 88rem / $pxConvertRem;
     line-height: 88rem / $pxConvertRem;
     border-bottom: 1px solid #e0e0e0;
+    background: #fff;
 
     > * {
         margin-left: 30rem / $pxConvertRem;

 .article-title {
-    padding: 0 0 0 30rem / $pxConvertRem;
-    margin: 0 0 26rem / $pxConvertRem 0;
+    padding: 16rem / $pxConvertRem 0 26rem / $pxConvertRem 30rem / $pxConvertRem;
+    background: #fff;
+
     .title {
-        margin-top:16rem / $pxConvertRem;
         line-height: 60rem / $pxConvertRem;
         color: #000;
         font-size: 40rem / $pxConvertRem;

 .article-type-five {
+    background: #fff;
     padding: 0 0 0 15rem / $pxConvertRem;
+    margin: 0 0 30rem / $pxConvertRem 0;
+    border-top: 1px solid #e0e0e0;
+    border-bottom: 1px solid #e0e0e0;
+
+    h2 {
+        margin: 0 0 0 -15rem / $pxConvertRem;
+        line-height: 104rem / $pxConvertRem;
+        font-size: 30rem / $pxConvertRem;
+        color: #b0b0b0;
+        text-align: center;
+    }
+
+    .more-good {
+        padding: 0 0 0 15rem / $pxConvertRem;
+        line-height: 88rem / $pxConvertRem;
+
+        a {
+            text-decoration: none;
+            color: #444;
+            font-size: 30rem / $pxConvertRem;
+        }
+
+        i {
+            float: right;
+            margin: 0 30rem / $pxConvertRem 0 0;
+            font-size: 28rem / $pxConvertRem;
+            color: #b0b0b0
+        }
+    }
 }
 
 .good-info {
     float: left;
     width: 276rem / $pxConvertRem;
     height: 466rem / $pxConvertRem;
-    margin: 0 14rem / $pxConvertRem;
+    margin: 0 15rem / $pxConvertRem;
 }
 
 .good-detail-img {

+.article-type-four {
+    padding: 0 0 5rem / $pxConvertRem 0;
+    background: #fff;
+
+    img {
+        float: right;
+        width: 315rem / $pxConvertRem;
+        height: 420rem / $pxConvertRem;
+    }
+
+    img:first-child{
+        float: left;
+    }
+}
\ No newline at end of file

 $pxConvertRem : 40;
 
 .article-type-one {
-    margin: 0 0 20rem / $pxConvertRem 0;
+    padding: 0 0 5rem / $pxConvertRem 0;
+    background: #fff;
 }
 .article-type-one .img {
     width: 640rem / $pxConvertRem;

 .article-type-two {
-    margin: 20rem / $pxConvertRem 30rem / $pxConvertRem;
+    background: #fff;
+    padding: 20rem / $pxConvertRem 30rem / $pxConvertRem;
     line-height: 46rem / $pxConvertRem;
     font-size: 28rem / $pxConvertRem;
     color: #444;

+.related-brand {
+    h2 {
+        margin: 0 29rem / $pxConvertRem;
+        background: #fff;
+        border: 1px solid #e0e0e0;
+        line-height: 72rem / $pxConvertRem;
+        font-size: 30rem / $pxConvertRem;
+        color: #b0b0b0;
+    }
+}
\ No newline at end of file

 $pxConvertRem : 40;
 @import "compass";
 @include global-reset();
-@import "article-author", "article";
+@import "article-author", "article", "related-brand";
 
 
 body {
     font-family: helvetica,Arial,"黑体";
+    background: #f0f0f0;
 }
 
 .hide {

 {{# detail}}
     {{> article_author}}
     {{> article}}
+    {{> related_brand}}
 {{/ detail}}
\ No newline at end of file

 {{# type5}}
     <div class="article-type-five clearfix">
+        <h2>相关推荐</h2>
         {{# products}}
             {{> good_info}}
         {{/ products}}
+        <div class="more-good clearfix"><a href="javascript:;">
+            更多商品
+            <i class="iconfont">&#xe612;</i>
+        </a></div>
     </div>
 {{/ type5}}
\ No newline at end of file

 {{# type4}}
-    <div class="article-type-four">
+    <div class="article-type-four clearfix">
         {{# img}}
             <img src="{{img}}" alt="{{alt}}">
         {{/ img}}

+<div class="related-brand">
+    <h2>相关品牌</h2>
+    <ul class="brand-list">
+    {{# brands}}
+        <li><a href="{{url}}">
+            <img src="{{thumb}}" alt="{{name}}">
+        </a></li>
+    {{/ brands}}
+    </ul>
+</div>
\ No newline at end of file