单集购买

src/components/classify/index.js

 import React, {Component} from 'react';
+import {WithTab} from '@/HOCs'
 import './index.scss';
 
 class Classify extends Component {
@@ -118,4 +119,4 @@ class Classify extends Component {
 
 }
 
-export default Classify;
\ No newline at end of file
+export default WithTab(Classify);

src/components/detail/index.js

@@ -794,7 +794,7 @@ class Detail extends Component {
                                           <p>
                                               <i className='iconfont iconzhifubaox-'></i>
                                               <span>支付宝</span>
-                                              <i className='iconfont icondanseshixintubiao-5 redio'></i>
+                                              <i className='iconfont icondanseshixintubiao-5 redioed'></i>
                                           </p>
                                           <p>
                                               <i className='iconfont iconweixinzhifu buy'></i>
@@ -840,7 +840,7 @@ class Detail extends Component {
                                       <div className='btn btn-FF4000'>0元购</div>
                                   </div>
                               }
-                              {/*<i onClick={this.colse.bind(this)} className={'iconfont iconiconfront-2 close'}></i>*/}
+                              <i onClick={this.colse.bind(this)} className={'iconfont iconiconfront-2 close'}></i>
                           </div>
                       </div>
                 }

src/components/detail/index.scss

@@ -334,18 +334,15 @@
     .content {
       width: 300px;
       position: relative;
-      margin-left: -150px;
       background-color: $white;
-      left: 50%;
       padding-top: 20px;
       border-radius: 3px;
     }
 
     .close {
-      position: absolute;
-      top: 380px;
       color: #fff;
       font-size: 22px;
+      position: relative;
       left: 50%;
       margin-left: -11px;
     }
@@ -390,8 +387,8 @@
 
     .audition-box {
       height: 144px;
-      top: 212px;
       text-align: center;
+      margin: 212px auto 22px auto;
 
       .audition-header {
         font-size: 16px;
@@ -407,7 +404,7 @@
 
     .singleset-payment {
       height: 305px;
-      top: 140px;
+      margin: 140px auto 22px auto;
       padding: 17px 20px;
 
       .price-box {
@@ -461,12 +458,17 @@
           line-height: 22px;
           margin-top: 10px;
           position: relative;
+
           .iconzhifubaox- {
             font-size: 22px;
+            color: #01aaef;
           }
+
           .iconweixinzhifu {
             font-size: 22px;
+            color: #3baf34;
           }
+
           span {
             display: inline-block;
             margin-left: 10px;
@@ -474,10 +476,16 @@
             font-size: 14px;
             vertical-align: text-bottom;
           }
-          .redio {
+          .icondanseshixintubiao-5 {
             position: absolute;
             right: 0;
-            font-size: 20px;
+            font-size: 24px;
+          }
+          .redioed {
+            color: #4cd964;
+          }
+          .redio {
+            color: $border_ccc;
           }
         }
       }
@@ -485,7 +493,7 @@
 
     .zero {
       height: 147px;
-      top: 213px;
+      margin: 213px auto 22px auto;
       text-align: center;
 
       .header {
@@ -515,7 +523,7 @@
 
     .payment-success {
       height: 258px;
-      top: 143px;
+      margin: 143px auto 22px auto;
       padding: 20px 24px;
 
       .dec {