style:调整样式

48941dd4 · zhangleyuan · c9779f85 · 48941dd4 · 48941dd4 · 48941dd4
Commit 48941dd4 authored Mar 11, 2021 by zhangleyuan
6 changed files
--- a/src/modules/course-manage/components/LiveCourseList.jsx
+++ b/src/modules/course-manage/components/LiveCourseList.jsx
@@ -291,7 +291,7 @@ class LiveCourseList extends React.Component {
          dataIndex: "planList",
          render: (val, record) => {
            return  (
-              <span>
+              <div className="related-task">
                  { record.relatedPlanList ?
                    record.relatedPlanList.map((item,index)=>{
                      return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
@@ -299,7 +299,7 @@ class LiveCourseList extends React.Component {
                    :
                    <span></span>
                  }
-              </span>
+              </div>
            )
          },
        },
@@ -508,7 +508,7 @@ class LiveCourseList extends React.Component {
          dataIndex: "planList",
          render: (val, record) => {
            return  (
-              <span>
+              <div className="related-task">
                  { record.relatedPlanList ?
                    record.relatedPlanList.map((item,index)=>{
                      return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
@@ -516,7 +516,7 @@ class LiveCourseList extends React.Component {
                    :
                    <span></span>
                  }
-              </span>
+              </div>
            )
          },
        },

--- a/src/modules/course-manage/components/LiveCourseList.less
+++ b/src/modules/course-manage/components/LiveCourseList.less
@@ -67,6 +67,15 @@
  }
+  .related-task{
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
  .categoryName{
    font-size: 14px;
    color: #666666;

--- a/src/modules/course-manage/video-course/components/VideoCourseList.jsx
+++ b/src/modules/course-manage/video-course/components/VideoCourseList.jsx
@@ -2,7 +2,7 @@
 * @Author: 吴文洁
 * @Date: 2020-08-05 10:12:45
 * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-03-10 15:53:11
+ * @LastEditTime: 2021-03-11 17:16:20
 * @Description: 视频课-列表模块
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
@@ -93,7 +93,7 @@ class VideoCourseList extends React.Component {
        title: '课程分类',
        key: 'categoryName',
        dataIndex: 'categoryName',
-        width: '20%',
+        width: 200,
        render: (val, record) => {
          return (
            <div className="record__item">
@@ -106,7 +106,7 @@ class VideoCourseList extends React.Component {
        title: '创建人',
        key: 'createName',
        dataIndex: 'createName',
-        width: '10%',
+        width: 100,
        render: (val) => {
          return (
              <div>
@@ -128,7 +128,7 @@ class VideoCourseList extends React.Component {
          <span>店铺展示</span>
          <Tooltip  title={<div>开启后，用户可在店铺内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”店铺展示。<br/>关闭后，店铺内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip>
        </span>,
-        width: '12%',
+        width: 120,
        dataIndex: "courseware",
        render: (val, item, index) => {
          return  (
@@ -174,7 +174,7 @@ class VideoCourseList extends React.Component {
        dataIndex: "planList",
        render: (val, record) => {
          return  (
-            <span>
+            <div className="related-task">
                { record.relatedPlanList ?
                  record.relatedPlanList.map((item,index)=>{
                    return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
@@ -182,7 +182,7 @@ class VideoCourseList extends React.Component {
                  :
                  <span></span>
                }
-            </span>
+            </div>
          )
        }
      },

--- a/src/modules/course-manage/video-course/components/VideoCourseList.less
+++ b/src/modules/course-manage/video-course/components/VideoCourseList.less
@@ -70,7 +70,15 @@
      height:48px;
    }
  }
+  .related-task{
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 }
 .video-course-more-menu {

--- a/src/modules/plan-manage/components/BasicInfo.jsx
+++ b/src/modules/plan-manage/components/BasicInfo.jsx
@@ -2,7 +2,7 @@
 * @Author: zhangleyuan
 * @Date: 2021-02-20 16:45:51
 * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-03-10 19:03:09
+ * @LastEditTime: 2021-03-11 16:29:59
 * @Description: 描述一下
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -16,6 +16,7 @@ import Upload from '@/core/upload';
 // import PhotoClip from 'photoclip'
 import './BasicInfo.less';
 const { TextArea } = Input;
 const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
 let cutFlag = false;
@@ -308,28 +309,32 @@ class BasicInfo extends React.Component{
            </div>
          </div>
          <div className="done-standard">
-              <span className="label"><span className="require">*</span>完成标准：</span>
+              <span className="label standard-label"><span className="require">*</span>完成标准：</span>
              <div>
                <div className="live-standard-info">
                  <span className="icon iconfont">&#xe865;</span>
-                  <span>直播课单个课程，用户学习进度达到
+                  <span className="instro">直播课单个课程，用户学习进度达到
                    <Input
                      width="40" 
                      value={percentCompleteLive} 
                      onChange={(e) => { this.props.onChange('percentCompleteLive', e.target.value.replace(/\D/g,'')) }} 
                      onBlur={(e)=>this.percentCompleteBlur(e,'percentCompleteLive')}
-                    />% 
+                      className="input-box"
-                    即视为“已完成”学习
+                    />%，即视为"已完成"学习
                  </span>
                </div>
                <div className="video-standard-info">
                  <span className="icon iconfont">&#xe864;</span>
-                  <span>视频课单个课程，用户学习进度达到
+                  <span className="instro">视频课单个课程，用户学习进度达到
-                    <Input  width="40" 
+                    <Input  
-                    value={percentCompleteVideo} 
+                      width="40" 
-                    onChange={(e) => { this.props.onChange('percentCompleteVideo', e.target.value.replace(/\D/g,'')) }} 
+                      value={percentCompleteVideo} 
-                    onBlur={(e)=>this.percentCompleteBlur(e,'percentCompleteVideo')}/>
+                      onChange={(e) => { this.props.onChange('percentCompleteVideo', e.target.value.replace(/\D/g,'')) }} 
-                    %即视为“已完成”学习
+                      onBlur={(e)=>this.percentCompleteBlur(e,'percentCompleteVideo')}
+                      className="input-box"
+                    />
+                    %，即视为"已完成"学习
                  </span>
                </div>
              </div>  

--- a/src/modules/plan-manage/components/BasicInfo.less
+++ b/src/modules/plan-manage/components/BasicInfo.less
@@ -3,6 +3,8 @@
      width: 110px;
      text-align: right;
      display:inline-block;
+      font-size:14px;
+      color:#666;
      .require {
        color: #EC4B35;
      }
@@ -29,16 +31,10 @@
            left: 8px;
          }
        }
-        .cover__wrap {
-          display: flex;
-          flex-direction: row;
-        }
        .img-content {
          margin-right: 20px;
          width: 299px;
          height: 169px;
          img {
            width: 100%;
            height: 100%;
@@ -46,6 +42,24 @@
            border: 1px solid #E8e8e8;
          }
        }
+        .opt-btns{
+          display:flex;
+          align-items: center;
+          margin-top:12px;
+          .default-btn {
+            margin:0 8px;
+            color: #5289FA;
+            cursor: pointer;
+            &.disabled {
+              color: #CCC;
+              cursor: not-allowed;
+            }
+          }  
+          .tips{
+            font-size:14px;
+            color:#999;
+          }
+        }
    }
    .introduction{
        margin-top:16px;
@@ -74,10 +88,17 @@
        .choose-business{
            margin-top:16px;
        }
+        .playback__text{
+          margin-left:12px;
+          color:#999999;
+        }
    }
    .done-standard{
      display: flex;
      margin-top:22px;
+      .standard-label{
+        margin-top:2px;
+      }
      .live-standard-info{
        margin-bottom:10px;
      }
@@ -86,7 +107,24 @@
        width:90px;
        height:32px;
      }
+      .icon{
+        color:#A0A0A0;
+        font-size:14px;
+        margin-right:4px;
+      }
+      .instro{
+        color:#333333;
+        font-size:14px;
+      }
+      .input-box{
+        width: 60px;
+        height: 32px;
+        border-radius: 4px;
+        border: 1px solid #E8E8E8;
+        color:#333333;
+        font-size:14px;
+        margin:0 2px;
+      }
    }
 }