update live

Signed-off-by: liuboaibc <kukudehero@gmail.com>

assets/scss/live-detail.scss

@@ -58,6 +58,30 @@ header.navigation {
       padding: 20px;
     }
 
+    .live-div {
+      position: relative;
+      img {
+        width: 100%;
+      }
+      button {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        padding: 10px 20px;
+        border-radius: 28px;
+        font-size: 16px;
+        color: #ffffff;
+        border: none;
+        cursor: pointer;
+        box-shadow: 0 10px 50px 0 rgba(34, 43, 62, 0.1), 0 8px 16px 0 rgba(33, 43, 61, 0.2), 0 10px 50px 0 rgba(34, 43, 62, 0.1);
+        background-image: linear-gradient(to bottom, rgba(85, 188, 138, 0), rgba(85, 188, 138, 0.1) 97%), linear-gradient(to bottom, #55bc8a, #55bc8a);
+        &:hover {
+          box-shadow: none;
+        }
+      }
+    }
+
     .video-div {
       position: relative;
       margin-bottom:  24px;

i18n/zh.yaml

@@ -84,6 +84,8 @@
   translation: 全部
 - id: Watch replay
   translation: 观看回放
+- id: Watch live
+  translation: 观看直播
 - id: View details
   translation: 了解详情
 - id: Course theme

layouts/live/single.html

@@ -4,6 +4,16 @@
     <div>
       {{ with .Params.section1 }}
 
+      {{ if .liveUrl }}
+      <div class="live-div">
+        <a href="{{ .liveUrl }}" target="_blank">
+          <img src="{{ .snapshot }}" alt="snapshot">
+          <button>{{ i18n "Watch live" }}</button>
+        </a>
+      </div>
+
+      {{ end }}
+
       {{ if .videoUrl }}
       <div class="video-div">
         {{ if eq .type "iframe" }}
@@ -19,9 +29,9 @@
       </div>
       {{ end }}
       <div class="time-div">
-        <img src="{{ .timeIcon }}" alt="">
+        <img src="{{ .timeIcon }}" alt="icon">
         <span>{{ .time }}</span>
-        <img src="{{ .baseIcon }}" alt="">
+        <img src="{{ .baseIcon }}" alt="icon">
         <span>{{ .base }}</span>
       </div>
       {{ end }}