直播间预约

src/assets/css/variable.scss

@@ -40,6 +40,7 @@ $font_12: 12px;
  */
 $bg_active: #09f;
 $bg_0078FF: #0078FF;
+$bg_0080FF: #0080FF;
 $bg_fff: #fff;
 $bg_000: #000;
 $bg_f4f4f4: #f4f4f4;

src/components/Index/index.js

@@ -153,7 +153,8 @@ class Index extends Component {
                 {/* 直播间预约 */}
                 {
                     this.state.islive &&
-                    <LiveRoom isShow={this.state.isShow} colseBox={this.colseBox} roomMess={this.state.roomMess}></LiveRoom>
+                    <LiveRoom isShow={this.state.isShow} colseBox={this.colseBox}
+                              roomMess={this.state.roomMess}></LiveRoom>
                 }
 
             </div>
@@ -258,10 +259,13 @@ function ScrollBox(props) {
                                     <div className="item-content">
                                         <h2 className="item-title">{item.live_title}</h2>
                                         <p className="item-teacher">讲师：{item.live_teacher_name}</p>
-                                        <p className="item-time">时间：{item.live_start_time}</p>
                                         {
-                                            item.live_status === 1 &&
-                                            <span>已预约</span>
+                                            item.is_prepare &&
+                                            <p className="item-time">时间：{item.live_start_time}</p>
+                                        }
+                                        {
+                                            !item.is_prepare &&
+                                            <p className='item-btn'>预约</p>
                                         }
                                     </div>
                                 </div>

src/components/Index/index.scss

@@ -185,10 +185,12 @@
             text-align: center;
             border-radius: 0 20px 20px 0;
           }
-          .no-start{
+
+          .no-start {
             background-color: $red;
           }
-          .start{
+
+          .start {
             background-color: $bg_active;
           }
 
@@ -205,6 +207,18 @@
             white-space: nowrap
           }
 
+          .item-btn {
+            width: 49px;
+            height: 20px;
+            text-align: center;
+            line-height: 20px;
+            background: linear-gradient(60deg, $bg_active 0%, $bg_0080FF 100%);
+            border-radius: 10px;
+            font-size: 14px;
+            color: $white;
+            margin-top: 10px;
+          }
+
           .item-title {
             font-size: 16px;
             color: $color_333;