style:直播课表格优化

src/modules/course-manage/components/LiveCourseList.jsx

@@ -125,7 +125,7 @@ class LiveCourseList extends React.Component {
       columns = [
         {
           title: '直播课',
-          width: '23%',
+
           key: 'course',
           fixed: 'left',
           dataIndex: 'courseName',
@@ -144,7 +144,7 @@ class LiveCourseList extends React.Component {
                 {!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} alt='' />}
                 <div>
                   <Choose>
-                    <When condition={record.courseName.length > 17}>
+                    <When condition={record.courseName.length > 14}>
                       <Tooltip title={record.courseName}>
                         <div className='course-name'>{record.courseName}</div>
                       </Tooltip>
@@ -332,7 +332,7 @@ class LiveCourseList extends React.Component {
         },
         {
           title: '操作',
-          width: '10%',
+          width: 210,
           key: 'operate',
           fixed: 'right',
           dataIndex: 'operate',

src/modules/course-manage/components/LiveCourseList.less

-
 .live-course-list {
   margin-top: 12px;
   .record__item {
+    overflow: hidden;
     display: flex;
     align-items: center;
     .course-cover {
@@ -11,63 +11,61 @@
       border-radius: 2px;
       margin-right: 8px;
     }
-    .course-name{
+    .course-name {
       font-size: 14px;
       font-weight: 500;
       color: #333333;
       line-height: 20px;
       font-weight: bold;
-      max-width:244px;
+      max-width: 200px;
       overflow: hidden;
-      text-overflow:ellipsis;
+      text-overflow: ellipsis;
       white-space: nowrap;
     }
-    .course-time{
+    .course-time {
       font-size: 12px;
       font-weight: 400;
       color: #666666;
       line-height: 20px;
     }
     .course-status {
-       font-size:12px;
-       line-height:18px;
-       display:inline-block;
-       border-radius:2px;
-       padding:0 8px;
-       margin-left:4px;
+      font-size: 12px;
+      line-height: 18px;
+      display: inline-block;
+      border-radius: 2px;
+      padding: 0 8px;
+      margin-left: 4px;
     }
-    .teacher-assistant{
-      display:flex;
-      .teacher{
+    .teacher-assistant {
+      display: flex;
+      .teacher {
         font-size: 12px;
         color: #666666;
         max-width: 96px;
         overflow: hidden;
-        text-overflow:ellipsis;
+        text-overflow: ellipsis;
         white-space: nowrap;
-        display:inline-block;
-        padding-top:2px;
+        display: inline-block;
+        padding-top: 2px;
       }
-      .assistant{
+      .assistant {
         font-size: 12px;
         color: #666666;
         max-width: 96px;
         overflow: hidden;
-        text-overflow:ellipsis;
+        text-overflow: ellipsis;
         white-space: nowrap;
-        display:inline-block;
-        padding-top:2px;
+        display: inline-block;
+        padding-top: 2px;
       }
       .split {
         margin: 0 4px;
-        color: #BFBFBF;
+        color: #bfbfbf;
         display: inline-blcok;
       }
     }
-    
-
   }
-  .related-task{
+  .related-task {
     text-overflow: -o-ellipsis-lastline;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -76,37 +74,37 @@
     line-clamp: 2;
     -webkit-box-orient: vertical;
   }
-  .categoryName{
+  .categoryName {
     font-size: 14px;
     color: #666666;
     line-height: 20px;
   }
-  .courseware{
+  .courseware {
     font-size: 14px;
-    color: #2966FF;
+    color: #2966ff;
     line-height: 20px;
-    text-align:right;
-    cursor:pointer;
+    text-align: right;
+    cursor: pointer;
   }
-  .quota-icon{
-    color:#2966FF;
-    cursor:pointer;
+  .quota-icon {
+    color: #2966ff;
+    cursor: pointer;
   }
   .operate {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     .operate__item {
-      color: #2966FF;
+      color: #2966ff;
       cursor: pointer;
       &.split {
         margin: 0 8px;
-        color: #BFBFBF;
+        color: #bfbfbf;
       }
     }
   }
   .operate-text {
-    color: #2966FF;
+    color: #2966ff;
     cursor: pointer;
   }
   .course-start-end {
@@ -135,7 +133,27 @@
       font-size: 12px;
     }
   }
-  
+  tbody {
+    tr {
+      &:nth-child(even) {
+        background: transparent !important;
+        td {
+          background: #fff !important;
+        }
+      }
+      &:nth-child(odd) {
+        background: #fafafa !important;
+        td {
+          background: #fafafa !important;
+        }
+      }
+      &:hover {
+        td {
+          background: #f3f6fa !important;
+        }
+      }
+    }
+  }
 }
 .live-course-more-menu {
   background: white;
@@ -155,4 +173,4 @@
   .type {
     font-weight: 700;
   }
-}
\ No newline at end of file
+}

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

@@ -147,7 +147,7 @@ class VideoCourseList extends React.Component {
                   关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。
                 </div>
               }>
-              <i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
+              <i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: 'normal' }}>
                 &#xe61d;
               </i>
             </Tooltip>