增加导航，修改样式

 <div class="yoho-live yoho-page">
+    {{! 导航条}}
+    <div class="home-header clearfix yoho-header">
+        <a href="javascript:history.go(-1);" class="iconfont nav-back buriedpoint" data-bp-id="page_header_back_0"></a>
+        <p class="nav-title">YOHO!BUY有货直播间</p>
+    </div>
+
+
     {{#content}}
         {{! 头部banner}}
         {{#if focus}}
@@ -6,6 +13,7 @@
         {{/if}}
     {{/content}}
 
+    {{! 精选房间}}
     <div class="live-rec">
         {{#best}}
         <div class="rec-child">
@@ -31,6 +39,7 @@
         {{/best}}
     </div>
 
+    {{! 直播中房间}}
     {{#living}}
     <div class="live-living">
         <h2 class="title">直播中</h2>
@@ -55,6 +64,7 @@
     </div>
     {{/living}}
 
+    {{! 直播预告列表}}
     {{#if pre}}
     <div class="live-list">
         <h2 class="title">直播预告</h2>
@@ -76,7 +86,7 @@
     </div>
     {{/if}}
 
-
+    {{! 精彩回看}}
     {{#record}}
     <div class="live-living">
         <h2 class="title">精彩回看</h2>

 var $ = require('yoho-jquery'),
     lazyLoad = require('yoho-jquery-lazyload');
+var Swiper = require('yoho-swiper');
 
 lazyLoad($('img'));
+
+$('.swiper-container').each(function() {
+    if ($(this).find('.swiper-slide').length > 1) {
+        new Swiper($(this).get(0), {
+            lazyLoading: true,
+            lazyLoadingInPrevNext: true,
+            loop: true,
+            autoplay: 3000,
+            autoplayDisableOnInteraction: true,
+            paginationClickable: true,
+            pagination: $(this).closest('.banner-top').find('.pagination-inner').get(0)
+        });
+    }
+});

-var Swiper = require('yoho-swiper');
-
-$('.swiper-container').each(function() {
-    if ($(this).find('.swiper-slide').length > 1) {
-        new Swiper($(this).get(0), {
-            lazyLoading: true,
-            lazyLoadingInPrevNext: true,
-            loop: true,
-            autoplay: 3000,
-            autoplayDisableOnInteraction: true,
-            paginationClickable: true,
-            pagination: $(this).closest('.banner-top').find('.pagination-inner').get(0)
-        });
-    }
-});

@@ -3,16 +3,21 @@ $white: #fff;
 $black: #444;
 $red: #d0021b;
 $gray: #b0b0b0;
+$border: #e0e0e0;
 
 .live-rec {
-    height: 420px;
+    margin-top: 30px;
+    height: 423px;
     width: 640px;
+    border-top: 1px solid $border;
 
     .rec-child {
         position: relative;
         height: 100%;
         width: 50%;
         float: left;
+        border-right: 1px solid $border;
+        overflow: hidden;
 
         img {
             height: 320px;
@@ -50,8 +55,10 @@ $gray: #b0b0b0;
 
         .rec-info {
             position: relative;
-            height: 100px;
+            height: 102px;
             width: 320px;
+            border-top: 1px solid $border;
+            border-bottom: 1px solid $border;
 
             .rec-head {
                 position: absolute;
@@ -116,8 +123,10 @@ $gray: #b0b0b0;
 
     header {
         position: relative;
-        height: 100px;
+        height: 102px;
         width: 640px;
+        border-top: 1px solid $border;
+        border-bottom: 1px solid $border;
 
         .main-head {
             position: absolute;
@@ -188,7 +197,7 @@ $gray: #b0b0b0;
             bottom: 75px;
             left: 30px;
             font-size: 28px;
-            color: $gray;
+            color: $white;
             display: -webkit-box;
             overflow: hidden;
             word-break: break-all;