限时免费

src/components/limit-free/index.js

@@ -100,7 +100,7 @@ class LimitFree extends Component {
                     <ul className={'courses'}>
                       {
                         courses && courses.length && courses.map((item, index) => {
-                          if(item.category_id != key){
+                          if (item.category_id != key) {
                             return null
                           }
                           /*
@@ -120,14 +120,26 @@ class LimitFree extends Component {
                                 <button>免费领取</button>
                               </div>
                               break
-                            case 2:
+                            case 1:
                               des = <div className={'remain-time'}>
                                 <i className={'iconfont iconiconfront-21'}/>
                                 <span>12天55时55分后过期</span>
                               </div>
+                              bottom = <div className={'bottom'}>
+                                <span className={'red'}>限时免费</span>
+                                <span className={'origin-price'}>¥{item.price0}</span>
+                                <button>立即学习</button>
+                              </div>
                               break
                             case 3:
-
+                              des = <div className={'purchased'}>
+                                <i className='iconfont iconRectangleCopy4'/>
+                                <span>{item.play_times}人学习</span>
+                              </div>
+                              bottom = <div className="bottom">
+                                <span>已购买</span>
+                                <button>立即学习</button>
+                              </div>
                           }
 
                           const info = (

src/components/limit-free/index.scss

@@ -128,7 +128,7 @@
     .red {
       color: #FF2121;
       font-size: 15px;
-
+      margin-right: 10px;
     }
 
     .origin-price {
@@ -140,6 +140,7 @@
     button {
       width: 68px;
       height: 24px;
+      float: right;
       border-radius: 3px;
       background: #09f;
       border: none;
@@ -147,10 +148,19 @@
       font-size: 13px;
       color: #fff;
       line-height: 24px;
+      -webkit-appearance: none;
     }
 
     .bottom {
+      width: 100%;
+      height: 24px;
       align-self: flex-end;
+      font-size: 0;
+      line-height: 24px;
+
+      span {
+        font-size: 12px;
+      }
     }
   }