03-30 19:40代码

@@ -3,7 +3,7 @@
  * @author: xuqi(qi.xu@yoho.cn)
  * @date；2015/3/30
  */
-var $ = require('jquery');
+var $ = require('jquery'); 
 
 /**
  * 初始化$事件并默认选中列表第一项

+.detail-tag {
+    margin: 28rem / $pxConvertRem 0 0 0;
+    padding: 0 0 30rem / $pxConvertRem 0;
+    border-top: 1px solid #e0e0e0;
+    border-bottom: 1px solid #e0e0e0;
+    background: #fff;
+
+    li {
+        float: left;
+        margin: 31rem / $pxConvertRem 0 0 31rem / $pxConvertRem;
+
+        a {
+            display: block;
+            padding: 0 36rem / $pxConvertRem;
+            height: 50rem / $pxConvertRem;
+            line-height: 50rem / $pxConvertRem;
+            font-size: 30rem / $pxConvertRem;
+            color: #fff;
+            background: #000;
+            text-decoration: none;
+        }
+    }
+}
\ No newline at end of file

 $pxConvertRem : 40;
 
 .article-type-three {
-    padding-left: 30rem / $pxConvertRem;
+    padding:0 0 0 15rem / $pxConvertRem;
+    background: #fff;
 
     .thumb-container {
         letter-spaceing: -1px;
         font-size: 0;
+        padding: 0 0 0 30rem / $pxConvertRem;
+        margin: 0 0 28rem / $pxConvertRem -15rem / $pxConvertRem;
+        background: #fff;
+        z-index: 10;
 
         .thumb {
             display: inline-block;
@@ -27,5 +32,36 @@ $pxConvertRem : 40;
         }
     }
 
+    .prod-list {
+        position: relative;
+        border-top: 2px solid #efefef;
+        padding: 31rem / $pxConvertRem 0 0 0;
+
+        .arrow {
+            position: absolute;
+            top: -49px;
+            left: 50rem / $pxConvertRem;
+
+            em{
+                font-style:normal;
+                font-size:36rem / $pxConvertRem;
+                position:absolute;
+                left:0;
+                top:39px;
+                color:#e0e0e0;
+            }
+
+            span{
+                font-style:normal;
+                font-size:36rem / $pxConvertRem;
+                position:absolute;
+                left:0;
+                top:40px;
+                color:white;
+            }
+
+        }
+    }
+
 
 }
\ No newline at end of file

+@mixin relatedTitle {
+    margin: 0 29rem / $pxConvertRem;
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-bottom: none;
+    line-height: 72rem / $pxConvertRem;
+    font-size: 30rem / $pxConvertRem;
+    color: #b0b0b0;
+    text-align: center;
+}
+
 .related-brand {
+
     h2 {
-        margin: 0 29rem / $pxConvertRem;
+        @include relatedTitle;
+    }
+
+    .brand-list {
+        padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem 30rem / $pxConvertRem;
         background: #fff;
-        border: 1px solid #e0e0e0;
-        line-height: 72rem / $pxConvertRem;
-        font-size: 30rem / $pxConvertRem;
-        color: #b0b0b0;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+
+        li {
+            float: left;
+            margin: 0 0 0 20rem / $pxConvertRem;
+            border: 1px solid #e0e0e0;
+
+            a{
+                display: table-cell;
+                width: 128rem / $pxConvertRem;
+                height: 128rem / $pxConvertRem;
+                vertical-align:middle;
+            }
+
+            img {
+                display: block;
+                max-width: 128rem / $pxConvertRem;
+                max-height: 128rem / $pxConvertRem;
+                vertical-align: middle;
+                margin: 0 auto;
+            }
+        }
+
+        li:first-child {
+            margin: 0;
+        }
     }
 }
\ No newline at end of file

+.related-post {
+    margin: 30rem / $pxConvertRem 0 0 0;
+
+    h2 {
+        @include relatedTitle;
+    }
+
+    .post-list{
+        background: #fff;
+        padding: 0 0 30rem / $pxConvertRem 0;
+        border-top: 1px solid #e0e0e0;
+
+        li{
+            padding: 30rem / $pxConvertRem 0 0 0;
+            margin: 0 0 10rem / $pxConvertRem 0;
+
+            img{
+                float: left;
+                margin: 0 0 0 30rem / $pxConvertRem;
+                width: 182rem / $pxConvertRem;
+                height: 162rem / $pxConvertRem;
+            }
+            
+            span{
+                float: left;
+                width: 360rem / $pxConvertRem;
+                margin: 20rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
+                line-height: 45rem / $pxConvertRem;
+                color: #444;
+                font-size: 28rem / $pxConvertRem;
+            }
+        }
+    }
+}
\ No newline at end of file

 $pxConvertRem : 40;
 @import "compass";
 @include global-reset();
-@import "article-author", "article", "related-brand";
+@import "article-author", "article", "related-brand", "article-tag", "related-post";
 
 
 body {

@@ -2,4 +2,6 @@
     {{> article_author}}
     {{> article}}
     {{> related_brand}}
+    {{> article_tag}}
+    {{> related_post}}
 {{/ detail}}
\ No newline at end of file

+<div class="detail-tag">
+    <ul class="tag-list clearfix">
+        {{# tags}}
+        <li><a href="{{url}}">{{name}}</a></li>
+        {{/ tags}}    
+    </ul>
+</div>
+

@@ -7,7 +7,11 @@
                 </li>
             {{/ collocation}}
         </ul>
-        <div class="prod-list">
+        <div class="prod-list clearfix">
+            <div class="arrow">
+                <em>&#9670;</em>
+                <span>&#9670;</span>
+            </div>
             {{# collocation}}
                 <div class="prod hide">
                     {{# products}}

 <div class="related-brand">
     <h2>相关品牌</h2>
-    <ul class="brand-list">
+    <ul class="brand-list clearfix">
     {{# brands}}
         <li><a href="{{url}}">
             <img src="{{thumb}}" alt="{{name}}">

+<div class="related-post">
+    <h2>相关文章</h2>
+    <ul class="post-list">
+        {{# otherArticle}}
+        <li><a class="clearfix" href="{{url}}">
+            <img src="{{thumb}}" alt="">
+            <span>{{title}}</span>
+        </a></li>
+        {{/ otherArticle}}
+    </ul>
+</div>
\ No newline at end of file