star

@@ -110,6 +110,24 @@ exports.index = (req, res) => {
                     url: '',
                     url: '',
                     src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/01c4d65c836f3c210e192630109bb32e43.png?imageView/2/w/{width}/h/{height}'
                     src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/07/16/01c4d65c836f3c210e192630109bb32e43.png?imageView/2/w/{width}/h/{height}'
                 }
                 }
+            ],
+            articles: [
+                {
+                    articleId: '48187',
+                    src: 'http://img11.static.yhbimg.com/yhb-img02/2016/04/28/02/01c3e9be0e46915b124962b97d752557cd.jpg?imageView/0/w/{width}/h/{height}',
+                    name: 'DREAMER',
+                    title: 'dangerous people 跟着薛之谦维护世界和平T恤',
+                    url: 'http://guang.m.yohobuy.com/info/index?id=48187',
+                    articeTxt: '薛之谦以Dangerous People为主题，以暗黑街头的风格为主线，透过纸袋人的形象，从反面讽刺了社会的种种丑陋与黑暗现象， 从而反映出那些“边缘人物” 想让大家看到真实自我的渴望与期待世界和平的美好憧憬。 作为新一代潮流的引领人，薛之谦也有着自身对潮流文化的理解， Dangerous People的产品系列主要以黑白为主，在产品质量上也力求做到最好。',
+                    articeImg: [
+                        'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b9522beb59efd9863d67e246a7793de8.jpg?imageView/2/w/{width}/h/{height}',
+                        'http://img11.static.yhbimg.com/goodsimg/2016/06/01/03/015720dbe0dfd866a0cdf8701b19f4eebf.jpg?imageView/2/w/{width}/h/{height}',
+                        'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/024f7d9704e5a545e90125432db69cae5c.jpg?imageView/2/w/{width}/h/{height}',
+                        'http://img12.static.yhbimg.com/goodsimg/2016/06/01/03/02b246a819d5de16a0a22316fe8f668926.jpg?imageView/2/w/{width}/h/{height}'
+                    ],
+                    publishTime: '6月1日 11:30',
+                    viewsNum: '7694'
+                }
             ]
             ]
         }));
         }));
     });
     });

@@ -8,19 +8,6 @@
         {{/if}}
         {{/if}}
     {{/content}}
     {{/content}}
 
 
-{{!--     <div class="avatar-swiper swiper-container">
-        <ul class="swiper-wrapper">
-            {{#each starAvatar}}
-                <li class="swiper-slide">
-                    <a href="{{url}}">
-                        <img class="swiper-lazy" data-src="{{image src 180 180}}">
-                    </a>
-                    <div class="swiper-lazy-preloader"></div>
-                </li>
-            {{/each}}
-        </ul>
-    </div> --}}
-
     <div class="avatar-swiper">
     <div class="avatar-swiper">
         <ul class="clearfix swiper-wrapper">
         <ul class="clearfix swiper-wrapper">
             {{# starAvatar}}
             {{# starAvatar}}
@@ -32,5 +19,34 @@
                 </li>
                 </li>
             {{/ starAvatar}}
             {{/ starAvatar}}
         </ul>
         </ul>
-    </div>    
+    </div>
+
+    <ul class="star-info">
+        {{#each articles}}
+            <li data-id="{{articleId}}">
+                <div class="star-avatar">
+                    <img class="lazy" data-original="{{image src 100 100}}" />
+                    <p>{{name}}</p>
+                </div>
+                <div class="star-article">
+                    <i class="article-arrow"></i>
+                    <h2 class="article-title">{{title}}</h2>
+                    <div class="artice-cont">
+                        <a href="{{url}}">
+                            <p>{{articeTxt}}</p>
+                            <ul class="artice-imgs">
+                                {{#each articeImg}}
+                                    <li><img src="{{image . 130 130}}" /></li>
+                                {{/each}}
+                            </ul>
+                        </a>
+                    </div>
+                    <div class="artice-o">
+                        <span class="time"><i class="iconfont time-ico">&#xe603;</i>{{publishTime}}</span>
+                        <span class="see"><i class="iconfont see-ico">&#xe602;</i>{{viewsNum}}</span>
+                    </div>
+                </div>
+            </li>
+        {{/each}}
+    </ul> 
 </div>    
 </div>    

@@ -133,5 +133,85 @@
             margin-top: 27px;
             margin-top: 27px;
         }
         }
     }
     }
+
+    .star-info {
+        margin-top: 30px;
+    }
+
+    .star-avatar {
+        width: 150px;
+        text-align: center;
+        padding-left: 30px;
+        box-sizing: border-box;
+        float: left;
+
+        img {
+            width: 104px;
+            height: 104px;
+            border-radius: 50%;
+        }
+    }
+
+    .star-article {
+        width: 472px;
+        height: 439px;
+        position: relative;
+        border-radius: 8px;
+        background: #282828;
+        float: left;
+        padding: 30px;
+        box-sizing: border-box;
+
+        .article-arrow {
+            position: absolute;
+            left: -13px;
+            width: 0;
+            height: 0;
+            border-top: 13px solid transparent;   
+            border-bottom: 13px solid transparent;   
+            border-right: 13px solid #282828;
+        }
+
+        .article-title {
+            font-size: 28px;
+            line-height: 38px;
+            color: #fff;
+        }
+
+        .artice-cont {
+            margin-top: 20px;
+
+            p {
+                font-size: 18px;
+                color: #3e3a39;
+            }
+        }
+
+        .artice-imgs {
+            margin: 30px 0;
+            width: 100%;
+
+            li {
+                float: left;
+                margin-left: 6px;
+            }
+
+            li:first {
+                margin-left: 0;
+            }
+
+            img {
+                width: 130px;
+                height: 130px;
+                border-radius: 4px;
+            }
+        }
+
+        .artice-o {
+            width: 100%;
+
+            border-top: 1px solid #b0b0b0;
+        }
+    }
 }
 }