Commit 69f61e8a by wufan

style:创建线上课和培训计划样式优化

parent caff480a
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: yuananting * @LastEditors: wufan
* @LastEditTime: 2021-07-15 18:12:59 * @LastEditTime: 2021-07-15 19:53:52
* @Description: 线上课新增/编辑页 * @Description: 线上课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -679,6 +679,14 @@ class AddVideoCourse extends React.Component { ...@@ -679,6 +679,14 @@ class AddVideoCourse extends React.Component {
}) })
} }
} }
renderToolTipTitle = ()=> {
return (<div>
<p>视频支持mp4格式,大小不超过2G;</p>
<p>文件支持PDF、docx、doc格式,大小不超过100M</p>
</div>)
}
render() { render() {
const { const {
pageType, pageType,
...@@ -732,7 +740,7 @@ class AddVideoCourse extends React.Component { ...@@ -732,7 +740,7 @@ class AddVideoCourse extends React.Component {
<div className='upload-video mt16'> <div className='upload-video mt16'>
<div className='content flex'> <div className='content flex'>
<span className='label required'>上传课节:</span> <span className='label required upload-chapter'>上传课节:</span>
</div> </div>
<div className='sub-content'> <div className='sub-content'>
<div className="btn-wrap"> <div className="btn-wrap">
...@@ -755,7 +763,7 @@ class AddVideoCourse extends React.Component { ...@@ -755,7 +763,7 @@ class AddVideoCourse extends React.Component {
</div> </div>
<div className='tips'> <div className='tips'>
课节数量限制20个,文件规格说明 课节数量限制20个,文件规格说明
<Tooltip title="视频支持mp4格式,大小不超过2G;文件支持PDF、docx、doc格式,大小不超过100M"> <Tooltip title={this.renderToolTipTitle()} overlayClassName="my-chapter-tooltip">
<i className='icon iconfont' style={{ cursor: 'pointer', color: '#bfbfbf', fontSize: '14px'}}> &#xe61d;</i> <i className='icon iconfont' style={{ cursor: 'pointer', color: '#bfbfbf', fontSize: '14px'}}> &#xe61d;</i>
</Tooltip> </Tooltip>
</div> </div>
...@@ -815,7 +823,7 @@ class AddVideoCourse extends React.Component { ...@@ -815,7 +823,7 @@ class AddVideoCourse extends React.Component {
</If> </If>
<div className='cover-url flex mt16'> <div className='cover-url flex mt16'>
<div className='label'>封面图:</div> <div className='label cover'>封面图:</div>
<div className='cover-url__wrap'> <div className='cover-url__wrap'>
<div className='opt-btns'> <div className='opt-btns'>
<div> <div>
......
...@@ -32,6 +32,12 @@ ...@@ -32,6 +32,12 @@
display:inline-block; display:inline-block;
text-align:right; text-align:right;
width:85px; width:85px;
&.upload-chapter {
margin-top: 6px;
}
&.cover {
margin-top: 2px;
}
} }
.required { .required {
position: relative; position: relative;
...@@ -172,10 +178,9 @@ ...@@ -172,10 +178,9 @@
} }
.course-chapter-list { .course-chapter-list {
max-height: 245px; max-height: 245px;
min-height: 130px;
overflow-y: auto ; overflow-y: auto ;
border-radius: 4px; border-radius: 4px;
padding: 16px; padding: 12px 16px 16px 16px;
.course-ware { .course-ware {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -258,3 +263,26 @@ ...@@ -258,3 +263,26 @@
min-height: 0; min-height: 0;
} }
} }
.course-chapter-title-popover {
.tag-title {
color: #333333;
margin-bottom: 8px;
width: 318px;
}
.chapter-btns {
margin-top: 16px;
display: flex;
justify-content: flex-end;
.confirm {
margin-left: 8px;
}
}
.ant-form-item {
margin-bottom: 0 !important;
}
}
.my-chapter-tooltip {
max-width: 600px!important;
}
\ No newline at end of file
...@@ -89,6 +89,7 @@ ...@@ -89,6 +89,7 @@
} }
.choose-business { .choose-business {
margin-top: 12px; margin-top: 12px;
margin-left: 24px;
.ant-btn { .ant-btn {
margin-right: 12px; margin-right: 12px;
} }
......
/* /*
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46 * @Date: 2021-02-20 16:46:46
* @LastEditors: fusanqiasng * @LastEditors: wufan
* @LastEditTime: 2021-06-01 11:45:34 * @LastEditTime: 2021-07-15 20:03:56
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -52,7 +52,7 @@ function PlanList(props) { ...@@ -52,7 +52,7 @@ function PlanList(props) {
title: '课程总数量', title: '课程总数量',
key: 'courseNum', key: 'courseNum',
dataIndex: 'courseNum', dataIndex: 'courseNum',
width: 110, align: 'right',
render: (val, record) => { render: (val, record) => {
return <div className='course-number'>{val}</div>; return <div className='course-number'>{val}</div>;
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment