Merge branch 'develop' of http://git.yoho.cn/fe/yoho-blk into develop

@@ -33,13 +33,13 @@ const getContent = () => {
             {
                 brandsAd: [
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'GINZA',
                         des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
                         btnText: 'shop now'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'STUSSY',
                         des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
                         btnText: 'shop now'
@@ -51,24 +51,24 @@ const getContent = () => {
                 floorEn: 'NEW ARRIVALS',
                 newArrivals: [
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'STUSSY',
                         link: '/',
                         smallImg: true
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'DAILY PAPER',
                         link: '/',
                         even: true
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'BAPE',
                         link: '/'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'SUPREME',
                         link: '/',
                         even: true,
@@ -83,7 +83,7 @@ const getContent = () => {
                     {
                         big: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
@@ -102,17 +102,17 @@ const getContent = () => {
                     {
                         big: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
                         small: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             },
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
@@ -122,17 +122,17 @@ const getContent = () => {
                     {
                         big: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
                         small: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             },
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ]
@@ -140,17 +140,17 @@ const getContent = () => {
                     {
                         big: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
                         small: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             },
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
@@ -163,28 +163,28 @@ const getContent = () => {
                 floorEn: 'STYLE ICON',
                 styleIcon: [
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'COTE&CIEL',
                         des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
                         link: '/ ',
                         btnText: '去看看'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'COTE&CIEL',
                         des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
                         link: '/ ',
                         btnText: '去看看'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'COTE&CIEL',
                         des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
                         link: '/ ',
                         btnText: '去看看'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'COTE&CIEL',
                         des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
                         link: '/ ',
@@ -194,7 +194,7 @@ const getContent = () => {
             },
             {
                 adBanner: {
-                    img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                    img: '//placehold.it/{width}x{height}',
                     link: ''
                 }
             },
@@ -203,28 +203,28 @@ const getContent = () => {
                 floorEn: 'EDITORIAL',
                 editorial: {
                     big: {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         link: ''
                     },
                     small: [
                         {
-                            img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                            img: '//placehold.it/{width}x{height}',
                             link: '/',
                             bottomSpace: true,
                             rightSpace: true
                         },
                         {
-                            img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                            img: '//placehold.it/{width}x{height}',
                             link: '/',
                             bottomSpace: true
                         },
                         {
-                            img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                            img: '//placehold.it/{width}x{height}',
                             link: '/',
                             rightSpace: true
                         },
                         {
-                            img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                            img: '//placehold.it/{width}x{height}',
                             link: ''
                         }
                     ]

 <div class="home-page">
+    <div class="top-slider-container">
     {{# content}}
         {{#if slider}}
         {{> slider}}
         {{/if}}
     {{/ content}}
-    <div class="main-container">
+    </div>
+    <div class="main-container clearfix">
         {{# content}}
             {{#if brandsAd}}
             {{> ad}}

 <div class="ad-banner">
     {{#adBanner}}
-    <img src="{{image img 864 120}}" alt="">
+    <img class="lazy-img" data-original="{{image img 864 120}}" alt="">
     {{/adBanner}}
 </div>

-<div class="ad-container">
+<div class="ad-container clearfix">
     {{# brandsAd}}
         <div class="ad {{#if @first}}first{{/if}}">
-        <img src="{{image img 165 165}}" alt="">
+        <img class="lazy-img" data-original="{{image img 165 165}}" alt="">
         {{> brand-text-box}}
     </div>
     {{/ brandsAd}}

 {{# classicBrands}}
     <div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
         {{# big}}
-            <img class="big-img" src="{{image img 426 250}}" alt="big-img">
+            <img class="big-img lazy-img" data-original="{{image img 426 250}}" alt="big-img">
         {{/ big}}
         {{# small}}
-            <img class="small-img {{#if @first}}first{{/if}}" src="{{image img 213 213}}" alt="big-img">
+            <img class="small-img lazy-img {{#if @first}}first{{/if}}" data-original="{{image img 213 213}}" alt="big-img">
         {{/ small}}
 </div>
 {{/ classicBrands}}

@@ -4,12 +4,12 @@
     {{# editorial}}
         <div class="news left">
             {{# big}}
-                <img src="{{image img 288 375}}" alt="">
+                <img class="lazy-img" data-original="{{image img 288 375}}" alt="">
             {{/ big}}
         </div>
         <div class="news right">
             {{# small}}
-                <img class="{{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" src="{{image img 260 176}}" alt="">
+                <img class="lazy-img {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image img 260 176}}" alt="">
             {{/ small}}
         </div>
     {{/ editorial}}

@@ -4,7 +4,7 @@
         {{# newArrivals}}
         <div class="arrival-item {{#if smallImg}}small-img{{/if}} {{#if @last}}last{{^}}normal{{/if}}">
             {{#if even}}
-            <img src="{{image img 245 370}}" alt="">
+            <img class="lazy-img" data-original="{{image img 245 370}}" alt="">
             <div class="brand-name">
                 <span class="bottom">{{name}}</span>
             </div>
@@ -12,7 +12,7 @@
             <div class="brand-name">
                 <span class="top">{{name}}</span>
             </div>
-            <img src="{{image img 245 370}}" alt="">
+            <img class="lazy-img" data-original="{{image img 245 370}}" alt="">
             {{/if}}
         </div>
         {{/ newArrivals}}

@@ -7,7 +7,7 @@
                     {{#if @first}}
                     <img src="{{image img 1150 450}}">
                     {{^}}
-                    <img class="lazy" data-original="{{image img 1150 450}}" alt="">
+                    <img class="lazy-img" data-original="{{image img 1150 450}}" alt="">
                     {{/if}}
                 </a>
                 {{# tips}}

@@ -46,17 +46,17 @@ const index = (req, res) => {
             navPath: {
                 nav: [
                     {
-                        link: '',
+                        link: '#',
                         pathTitle: '',
                         name: 'MEN首页'
                     },
                     {
-                        link: '',
+                        link: '#',
                         pathTitle: '',
                         name: '咨询'
                     },
                     {
-                        link: '',
+                        link: '#',
                         pathTitle: '',
                         name: '咨询'
                     }

@@ -33,7 +33,7 @@ exports.createPagination = function(pagination, options) {
         queryParams = '',                               // paginate with query parameter
         page = parseInt(pagination.page, 10),           // current page number
         leftText = '<i class="iconfont">&#xe607;</i>',  // prev
-        rightText = '<i class="iconfont">&#xe606;</i>', // next
+        rightText = '<i class="iconfont">&#xe61e;</i>', // next
         paginationClass = 'blk-pagination';             // pagination <ul> default class
 
     var pageCount,

-<span class="iconfont">&#xe61b;</span>
\ No newline at end of file
+<span class="iconfont">&#xe606;</span>
\ No newline at end of file

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Mon Jul  4 15:42:03 2016
+Created by FontForge 20120731 at Wed Jul  6 11:07:02 2016
  By admin
 </metadata>
 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Mon Jul  4 15:42:03 2016
     bbox="0 -212 1303 896.303"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E61C"
+    unicode-range="U+0078-E620"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -50,9 +50,10 @@ t-186.5 186.5t-257 68.5z" />
 d="M968 -37l-163 164q69 108 69 234q0 119 -57.5 219t-157 158.5t-216 58.5t-216 -58.5t-157 -158.5t-57.5 -218.5t57.5 -219t157 -158.5t216.5 -58q124 0 231 69l163 -164q27 -28 65 -28t65 27.5t27 66t-27 66.5zM443.5 50q-127.5 0 -217.5 91.5t-90 220t90 219.5t217.5 91
 t217.5 -91t90 -219.5t-90 -220t-217.5 -91.5z" />
     <glyph glyph-name="uniE606" unicode="&#xe606;" 
-d="M387 158l45 -46l272 272l-272 272l-45 -46l226 -226z" />
+d="M512 841q-94 0 -179.5 -37t-147.5 -99t-98.5 -147.5t-36.5 -179.5t36.5 -179.5t98.5 -147.5t147.5 -98.5t179.5 -36.5t179.5 36.5t147.5 98.5t98.5 147.5t36.5 179.5t-36.5 179.5t-98.5 147.5t-147.5 99t-179.5 37zM512 -33q-112 0 -206.5 55t-150 150t-55.5 206.5
+t55.5 206.5t150 150t206.5 55t206.5 -55t150 -150t55.5 -206.5t-55.5 -206.5t-150 -150t-206.5 -55zM522 680h-51v-352h5l296 -120l19 47l-269 109v316z" />
     <glyph glyph-name="uniE607" unicode="&#xe607;" 
-d="M704 665l-41 39l-343 -320l343 -320l41 39l-301 281z" />
+d="M770 83l-49 -49l-337 335l337 335l49 -50l-284 -285z" />
     <glyph glyph-name="uniE608" unicode="&#xe608;" 
 d="M959 -62l-85 -85l-362 362l-362 -362l-85 85l362 362l-362 362l85 85l362 -362l362 362l85 -85l-362 -362z" />
     <glyph glyph-name="uniE609" unicode="&#xe609;" 
@@ -105,10 +106,16 @@ d="M1303 538l-161 242h-304v-443h233q19 0 32.5 14t13.5 33t-13.5 33t-32.5 14h-140v
 q0 56 -31 105h363q-30 -49 -30 -105q0 -82 58 -140t140 -58t140 58t58 140q0 56 -31 105h77v363zM93 803h582v-535h-582v535zM465 70q0 -43 -30.5 -74t-74 -31t-74 31t-30.5 74t30.5 74t74 31t74 -31t30.5 -74zM1164 70q0 -43 -31 -74t-74 -31t-74 31t-31 74t31 74t74 31
 t74 -31t31 -74z" />
     <glyph glyph-name="uniE61B" unicode="&#xe61b;" 
-d="M512 -212q-104 0 -199 40.5t-163.5 109t-109 163.5t-40.5 199t40.5 199t109 163.5t163.5 109t199 40.5t199 -40.5t163.5 -109t109 -163.5t40.5 -199t-40.5 -199t-109 -163.5t-163.5 -109t-199 -40.5zM512 747q-91 0 -173.5 -35.5t-142.5 -95.5t-95.5 -142.5t-35.5 -173.5
-t35.5 -173.5t95.5 -142.5t142.5 -95.5t173.5 -35.5t173.5 35.5t142.5 95.5t95.5 142.5t35.5 173.5t-35.5 173.5t-95.5 142.5t-142.5 95.5t-173.5 35.5zM482 267l-1 351h63v-319l198 -166l-39 -55z" />
+d="M0 -128v1024h1024v-1024h-1024zM512 704q-133 0 -226.5 -93.5t-93.5 -226.5t93.5 -226.5t226.5 -93.5t226.5 93.5t93.5 226.5t-93.5 226.5t-226.5 93.5z" />
     <glyph glyph-name="uniE61C" unicode="&#xe61c;" horiz-adv-x="1093" 
 d="M1092 225v171q0 101 -39.5 193.5t-106.5 159.5t-160 107t-194 40h-92q-101 0 -193.5 -40t-159.5 -107t-107 -159.5t-40 -193.5v-173v-317q0 -14 10 -24t24 -10h175q15 0 24.5 10t9.5 24v317q0 15 -9.5 24.5t-24.5 9.5h-128v116q0 88 34 168t92 137.5t138 92t168 34.5h67
 q87 0 167 -34.5t138 -92t92 -137.5t34 -168v-113h-129q-15 0 -24.5 -10t-9.5 -25v-317q0 -14 9.5 -24t24.5 -10h175q14 0 24 10t10 24z" />
+    <glyph glyph-name="uniE61D" unicode="&#xe61d;" 
+d="M783 526l-45 45l-226 -226l-226 226l-45 -45l226 -226l-226 -226l45 -46l226 227l226 -227l45 46l-226 226z" />
+    <glyph glyph-name="uniE61E" unicode="&#xe61e;" 
+d="M384 570l48 50l338 -335l-338 -335l-48 49l284 286z" />
+    <glyph glyph-name="uniE620" unicode="&#xe620;" 
+d="M512 886q-102 0 -195 -39.5t-160.5 -107t-107 -160.5t-39.5 -195t39.5 -195t107 -160.5t160.5 -107t195 -39.5t195 39.5t160.5 107t107 160.5t39.5 195t-39.5 195t-107 160.5t-160.5 107t-195 39.5zM512 -79q-94 0 -180 36.5t-148 98.5t-98.5 148t-36.5 180t36.5 180
+t98.5 148t148 98.5t180 36.5t180 -36.5t148 -98.5t98.5 -148t36.5 -180t-36.5 -180t-98.5 -148t-148 -98.5t-180 -36.5z" />
   </font>
 </defs></svg>

+/**
+ * 频道页
+ * @author: 赵彪<bill.zhao@yoho.cn>
+ * @date: 2016/6/24
+ */
+
+var lazyLoad = require('yoho-jquery-lazyload');
+
 require('../plugins/slider');
+
+lazyLoad($('img.lazy-img'));
+
 $('.slide-container').slider();
 
 $('.card').mouseenter(function() {

@@ -45,8 +45,8 @@ var $ = require('yoho-jquery'),
         _createOrient: function() {
 
             var orientHtml = '<div class="slide-switch">' +
-                    '<a class="prev" href="javascript:;"><span class="iconfont">&#xe609;</span></a>' +
-                    '<a class="next" href="javascript:;"><span class="iconfont">&#xe608;</span></a>' +
+                    '<a class="prev" href="javascript:;"><span class="iconfont">&#xe607;</span></a>' +
+                    '<a class="next" href="javascript:;"><span class="iconfont">&#xe606;</span></a>' +
                 '</div>';
 
             if (this.$element.find('.slide-switch').length > 0) {

 .home-page {
+    $sliderHeight: 450px;
+
     width: 1150px;
     margin: 10px auto 0;
 
+    .top-slider-container {
+        height: $sliderHeight;
+    }
+
     .slide-container {
         position: absolute;
         left: 0;
         right: 0;
-        height: 450px;
+        height: $sliderHeight;
     }
 
     .slide-thumb-container {
@@ -485,7 +491,7 @@
 
     .main-container {
         position: relative;
-        top: 390px;
+        top: -60px;
         width: 864px;
         margin: 0 auto;
         box-sizing: border-box;

@@ -19,6 +19,7 @@
             height: $textHeight;
             text-align: center;
             font-size: 12px;
+            font-weight: normal;
 
             span {
                 @extend .cursor-pointer;

@@ -2,15 +2,16 @@
     font-size: 14px;
     height: 50px;
     line-height: 50px;
+    color: #666;
 
     a {
-        color: #666;
         text-decoration: none;
     }
 }
 
 .last {
     font-weight: 700;
+    color: #1b1b1b;
 }
 
 .icon {

@@ -8,7 +8,7 @@
     }
 
     .msg-nav {
-        height: 35px;
+        height: 40px;
         border-bottom: 1px solid #eee;
         padding-left: 300px;
         padding-bottom: 5px;
@@ -17,7 +17,7 @@
             float: left;
             height: 30px;
             width: 120px;
-            line-height: 35px;
+            line-height: 40px;
             text-align: center;
             font-size: 14px;
             display: list-item;

 .content-msg {
     margin-top: 40px;
     margin-left: 110px;
-}
-
-.msg-left {
-    position: relative;
-    float: left;
-    width: 200px;
-    height: 30px;
-    margin-right: 80px;
-    line-height: 30px;
-    text-align: center;
-    border-bottom: 1px solid #bbb;
-}
 
-.msg-right {
-    float: left;
-    width: 643px;
-    border-bottom: 1px solid #eee;
-    margin-top: 2px;
-    padding-bottom: 5px;
-}
+    .msg-left {
+        position: relative;
+        float: left;
+        width: 200px;
+        height: 30px;
+        margin-right: 80px;
+        line-height: 30px;
+        text-align: center;
+        border-bottom: 1px solid #bbb;
+    }
 
-.msg-title {
-    font-size: 20px;
-    color: #333;
-    line-height: 30px;
-    max-height: 64px;
-    word-wrap: break-word;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
+    .msg-right {
+        float: left;
+        width: 643px;
+        border-bottom: 1px solid #eee;
+        margin-top: 2px;
+        padding-bottom: 5px;
+    }
 
-.lazy {
-    width: 640px;
-    height: 430px;
-    margin-top: 15px;
-}
+    .msg-title {
+        font-size: 20px;
+        color: #333;
+        line-height: 30px;
+        max-height: 64px;
+        word-wrap: break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
 
-.content {
-    display: block;
-    font-size: 14px;
-    line-height: 24px;
-    word-wrap: break-word;
-    margin-top: 10px;
-    overflow: hidden;
-    word-wrap: break-word;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
+    .lazy {
+        width: 640px;
+        height: 430px;
+        margin-top: 15px;
+    }
 
-.msg-app {
-    height: 45px;
-    line-height: 45px;
-    font-size: 14px;
-}
+    .content {
+        display: block;
+        font-size: 14px;
+        line-height: 24px;
+        word-wrap: break-word;
+        margin-top: 10px;
+        overflow: hidden;
+        word-wrap: break-word;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
 
-.time {
-    color: #a6a6a6;
-    margin-left: 3px;
-}
+    .msg-app {
+        height: 45px;
+        line-height: 45px;
+        font-size: 14px;
+    }
 
-.iconfont {
-    font-size: 14px;
-    margin-top: 0;
-}
+    .time {
+        color: #a6a6a6;
+        margin-left: 3px;
+    }
 
-.time-word {
-    font-weight: normal;
-}
+    .iconfont {
+        font-size: 14px;
+        margin-top: 0;
+    }
 
-.like-comment {
-    margin-left: 40px;
-    color: #a6a6a6;
-    cursor: pointer;
-    font-size: 14px;
+    .time-word {
+        font-weight: normal;
+    }
 
-    .like-icon {
+    .like-comment {
+        margin-left: 40px;
+        color: #a6a6a6;
         cursor: pointer;
+        font-size: 14px;
+
+        .like-icon {
+            cursor: pointer;
 
-        &.liked {
-            color: #000;
+            &.liked {
+                color: #000;
+            }
         }
     }
-}
 
-.like-num {
-    font-weight: normal;
+    .like-num {
+        font-weight: normal;
+    }
 }