feat:新建线上课结构调整

src/modules/course-manage/video-course/AddVideoCourse.less

@@ -49,8 +49,8 @@
       }
       }
     }
     }
     .course-catalog{
     .course-catalog{
-      margin-bottom:16px;
-      margin-top:16px;
+      margin-bottom:24px;
+      margin-top:24px;
     }
     }
     .course-ware {
     .course-ware {
       display: flex;
       display: flex;
@@ -75,7 +75,19 @@
       .img-content {
       .img-content {
         width: 298px;
         width: 298px;
         height: 172px;
         height: 172px;
-        
+        position: relative;
+        .tag {
+          border-radius: 2px;
+          background: rgba(51, 51, 51, .2);
+          font-size: 12px;
+          height: 18px;
+          width: 52px;
+          text-align: center;
+          color: #FFF;
+          position: absolute;
+          top: 8px;
+          left: 8px;
+        }
         img {
         img {
           width: 100%;
           width: 100%;
           height: 100%;
           height: 100%;
@@ -85,7 +97,7 @@
       .empty-img {
       .empty-img {
         width: 298px;
         width: 298px;
         height: 172px;
         height: 172px;
-        border: 1px dashed #EBEBEB;
+        border: 1px dashed #ebebeb;
         border-radius: 4px;
         border-radius: 4px;
         padding: 12px;
         padding: 12px;
         color: #999;
         color: #999;
@@ -94,12 +106,17 @@
       }
       }
 
 
       .opt-btns {
       .opt-btns {
-        margin-top: 8px;
-        display: flex;
-        align-items: center;
-  
+        margin-bottom: 8px;
+        .span {
+          color: #ccc;
+          margin-left: 8px;
+        }
+        .defalut-span {
+          cursor: pointer;
+          color: #2966ff;
+        }
         .tips {
         .tips {
-          margin-left: 12px;
+          margin-top: 8px;
           color: #999;
           color: #999;
         }
         }
       }
       }
@@ -115,18 +132,90 @@
         color: #333;
         color: #333;
       }
       }
     }
     }
-
+    .upload-video {
+      display: flex;
+      margin-bottom: 24px;
       .sub-content {
       .sub-content {
-      margin-left: 85px;
         margin-top: 4px;
         margin-top: 4px;
-
+      .btn-wrap {
+        display: flex;
+        .course-ware--empty {
+          margin-left: 12px;
+          line-height: 28px;
+        }
+      }
         .tips {
         .tips {
-        margin-left: 4px;
+          margin-top: 8px;
           color: #999;
           color: #999;
         }
         }
       }
       }
     }
     }
 
 
+    .course-chapter-list-wrap {
+      position: relative;
+      .course-chapter-total {
+        height: 40px;
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        margin-bottom: 18px;
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        z-index: 10;
+        background: #fff;
+        width: 550px;
+        text-indent: 16px;
+        line-height: 40px;
+      }
+      .course-chapter-list {
+        margin-top: 8px;
+        width: 552px;
+        max-height: 247px;
+        min-height: 130px;
+        overflow-y: auto ;
+        border-radius: 4px;
+        border: 1px solid #E8E8E8;
+        padding: 50px 16px 20px 16px;
+        .course-ware {
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+          color: #666;
+          &:last-child {
+            margin-bottom: 0;
+          }
+          &__img {
+            width: 24px;
+            margin-right: 4px;
+            margin-left: 16px;
+          }
+    
+          &__name {
+            color: #333;
+            width: 356px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          .course-chapter__opt {
+            display: flex;
+            color: #2966FF;
+            .line {
+              color: #BFBFBF;
+              margin-left: 4px;
+              margin-right: 4px;
+            }
+            .delete, .rename {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+
   .footer {
   .footer {
     position: fixed;
     position: fixed;
     left: 196px;
     left: 196px;

src/modules/course-manage/video-course/components/AddVideoIntro.jsx

@@ -121,8 +121,14 @@ class AddVideoIntro extends React.Component {
             </div>  
             </div>  
             <div>
             <div>
               <div className="desc">
               <div className="desc">
-                <div>开启：允许未绑定手机号的学员观看</div>
-                <div>关闭：仅限绑定了手机号的学员可以进入观看视频</div>
+              <Choose>
+                <When condition={whetherVisitorsJoin==="YES"}>
+                <div>已开启，学员需绑定手机号才可观看</div>
+                </When>
+                <Otherwise>
+                <div>已关闭，学员无需绑定手机号即可观看</div>
+                </Otherwise>
+              </Choose>                
               </div>
               </div>
             </div> 
             </div> 
           </div>
           </div>
@@ -136,8 +142,14 @@ class AddVideoIntro extends React.Component {
                 </Col>  
                 </Col>  
                 <Col span={21}>
                 <Col span={21}>
                   <div className="desc">
                   <div className="desc">
-                    <div>开启：此视频将在学员学院的视频列表中出现</div>
-                    <div>关闭：此视频将在学员学院的视频列表中隐藏</div>
+                    <Choose>
+                      <When condition={shelfState==="YES"}>
+                      <div>已开启，课程将在该学院的学员课程列表中显示</div>
+                      </When>
+                      <Otherwise>
+                      <div>已关闭，课程将在该学院的学员课程列表中隐藏</div>
+                  </Otherwise>
+                </Choose>
                   </div>
                   </div>
                 </Col> 
                 </Col> 
               </Row>
               </Row>