Merge remote-tracking branch 'origin/feature/live' into feature/live

@@ -61,7 +61,8 @@ const _getBestList = () => {
                     item.now_living = true;
                     break;
                 case 2:
-                    item.rec_living = true;
+                    //直播结束不显示
+                    result.data = [];
                     break;
             }
 

@@ -16,8 +16,10 @@
     {{/content}}
 
     {{#if content}}
+    {{#if best}}
         <div class="head_margin"></div>
     {{/if}}
+    {{/if}}
 
     {{! 精选房间}}
     {{#if best}}
@@ -35,7 +37,10 @@
             <div class="liverec_info">
                 <img class="liverec_head" src="{{image master_pic 120 120}}" alt="头像">
                 <div class="liverec_pannel">
-                    <p class="liverec_name">{{master_name}} <span class="name-tag">{{master_meta}}</span></p>
+                    <p class="liverec_name">
+                        <span class="name-name">{{master_name}}</span>
+                        <span class="name-tag">{{master_meta}}</span>
+                    </p>
                     <p class="liverec_tag">{{title}}</p>
                 </div>
             </div>
@@ -46,9 +51,11 @@
     {{/if}}
 
     {{! 直播中房间}}
+    {{#if living}}
+    <h2 class="living_title">直播中</h2>
+    {{/if}}
     {{#living}}
     <div class="liveliving">
-        <h2 class="title">直播中</h2>
         <header>
             <img class="main-head" src="{{image master_pic 120 120}}" alt="头像">
             <div class="header-info">
@@ -93,9 +100,11 @@
     {{/if}}
 
     {{! 精彩回看}}
+    {{#if record}}
+    <h2 class="living_title">精彩回看</h2>
+    {{/if}}
     {{#record}}
     <div class="liveliving">
-        <h2 class="title">精彩回看</h2>
         <header>
             <img class="main-head" src="{{image master_pic 120 120}}" alt="头像">
             <div class="header-info">

@@ -10,6 +10,7 @@ $border: #e0e0e0;
     width: 100%;
     border-bottom: 1px solid $border;
 }
+
 .liverec {
     height: 423px;
     width: 640px;
@@ -56,61 +57,14 @@ $border: #e0e0e0;
         text-align: center;
         line-height: 1.5;
     }
-
-    /*&_info {
-        position: relative;
-        height: 102px;
-        width: 320px;
-        border-top: 1px solid $border;
-        border-bottom: 1px solid $border;
-    }*/
-
-    /*&_head {
-        position: absolute;
-        top: 20px;
-        left: 30px;
-        height: 60px;
-        width: 60px;
-        border-radius: 50%;
-    }*/
-
-    /*&_pannel {
-        position: absolute;
-        top: 20px;
-        left: 110px;
-    }*/
-
-    &_name {
-        margin-bottom: 14px;
-        font-size: 26px;
-        color: $black;
-        line-height: 100%;
-    }
-
-    /*.name-tag {
-        position: relative;
-        top: -2px;
-        display: inline-block;
-        height: 26px;
-        width: 86px;
-        font-size: 17.9px;
-        background: $black;
-        margin-left: 5px;
-        border-radius: 20px;
-        color: $white;
-        text-align: center;
-        line-height: 1.5;
-    }*/
-
+    
     &_tag {
         font-size: 20px;
+        line-height: 1.2;
         color: $black;
-        line-height: 100%;
-        display: -webkit-box;
         overflow: hidden;
-        word-break: break-all;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 }
 
@@ -128,39 +82,56 @@ $border: #e0e0e0;
 }
 
 .liverec_pannel {
+    line-height: 1;
     overflow: hidden;
 }
 
 .liverec_name {
-    line-height: 1;
     font-size: 26px;
     margin-bottom: 14px;
+    color: $black;
+    line-height: 1.2;
+
+    .name-name {
+        display: inline-block;
+        height: 26px;
+        max-width: 85px;
+        overflow: hidden;
+    }
 
     .name-tag {
         display: inline-block;
-        width: 100px;
-        text-align: center;
         font-size: 18px;
+        height: 26px;
+        line-height: 26px;
+        padding: 0 8px;
+        max-width: 90px;
+        text-align: center;
+        background: $black;
+        border-radius: 20px;
+        color: $white;
+        vertical-align: top;
     }           
 }
 
-.liveliving {
-    .title {
-        width: 640px;
-        height: 80px;
-        text-align: center;
-        line-height: 80px;
-        color: $black;
-        background: $titlebg;
-        font-size: 32px;
-    }
+.living_title {
+    width: 640px;
+    height: 80px;
+    text-align: center;
+    line-height: 80px;
+    color: $black;
+    background: $titlebg;
+    font-size: 32px;
+}
 
+.liveliving {
     header {
         position: relative;
         height: 102px;
         width: 640px;
         border-top: 1px solid $border;
         border-bottom: 1px solid $border;
+        overflow: hidden;
     }
 
     .main-head {
@@ -176,18 +147,25 @@ $border: #e0e0e0;
         position: absolute;
         top: 20px;
         left: 110px;
+        right: 0;
 
         .main-name {
             font-size: 26px;
             color: $black;
             margin-bottom: 14px;
-            line-height: 26px;
+            line-height: 1.2;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
         }
 
         .main-tag {
             font-size: 20px;
             color: $gray;
-            line-height: 20px;
+            line-height: 1.2;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
         }
     }
 
@@ -337,12 +315,13 @@ $border: #e0e0e0;
             position: absolute;
             top: 77px;
             left: 220px;
+            right: 0;
         }
 
         .pre-title {
             font-size: 28px;
             color: $black;
-            line-height: 100%;
+            line-height: 1.2;
             margin-bottom: 12px;
             display: -webkit-box;
             overflow: hidden;
@@ -355,6 +334,9 @@ $border: #e0e0e0;
             font-size: 22px;
             color: $gray;
             line-height: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
         }
     }
 }