Skip to content

X
xiaomai-cloud-class-web
Commit 1070de6a by zhangleyuan
Options

style:修改计划页的样式

parent 7343b741
Showing with 153 additions and 34 deletions
src/modules/course-manage/modal/RelatedPlanModal.jsx
......@@ -118,7 +118,9 @@ class RelatedPlanModal extends React.Component {
let item = {};
if(selectPlanList[key].taskBaseVOList){
item.planId = selectPlanList[key].planId;
item.taskId = selectPlanList[key].taskBaseVOList[0].taskId;
if(selectPlanList[key].taskBaseVOList[0]){
item.taskId = selectPlanList[key].taskBaseVOList[0].taskId;
}
}
_selectPlanList.push(item)
}
......
src/modules/plan-manage/AddPlan.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-10 16:18:28
* @LastEditTime: 2021-03-10 16:51:57
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -222,7 +222,7 @@ function AddPlan() {
window.RCHistory.goBack();
}
}
return (
<div className="page add-plan-page">
......
src/modules/plan-manage/components/UserLearningDataFilter.jsx
......@@ -190,8 +190,8 @@ function UserLearningDataFilter(props) {
onChange={(value) => { handleChangeQuery('learnState', value) }}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
>
<Option value="YES">开启</Option>
<Option value="NO">关闭</Option>
<Option value="UNDER_WAY">进行中</Option>
<Option value="FINISH">已完成</Option>
</Select>
</div>
}
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
......@@ -81,7 +81,7 @@ class SelectOperatorModal extends React.Component {
});
const params ={
...liveQuery,
liveSize,
size:liveSize,
excludeCourseIdList:currentLiveCourseListData
}
......@@ -113,7 +113,7 @@ class SelectOperatorModal extends React.Component {
});
const params ={
...videoQuery,
videoSize,
size:videoSize,
excludeCourseIdList:currentVideoCourseListData
}
CourseService.videoScheduleBasePage(params).then((res) => {
......@@ -161,7 +161,6 @@ class SelectOperatorModal extends React.Component {
videoSize:size
},()=>{this.handleFetchLiveDataList()})
}
// 请求表头
parseLiveColumns = () => {
const columns = [
......@@ -169,23 +168,26 @@ class SelectOperatorModal extends React.Component {
title: <span><span>课程信息</span><Tooltip title="以下为该培训计划暂未关联的课程。 已关联的课程不支持重复选择，因此不显示。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>,
key: 'course',
dataIndex: 'course',
width:'45%',
render: (val, record) => {
let hasCover = false;
return (
<div className="record__item">
<div className="course-info">
{
record.courseMediaVOS.map((item,index)=>{
if( item.contentType === "COVER"){
hasCover = true;
return <img className="course-cover" src={item.mediaUrl} style={{width:'100px',height:'50px'}}/>
return <img className="course-cover" src={item.mediaUrl}/>
}
})
}
{ !hasCover &&
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} style={{width:'100px',height:'50px'}} />
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
}
<div className="course-name">{record.courseName}</div>
<div><span className="course-status">{courseStateShow[record.courseState].title}</span></div>
<div>
<div className="course-name">{record.courseName}</div>
<span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span>
</div>
</div>
)
}
......@@ -194,9 +196,10 @@ class SelectOperatorModal extends React.Component {
title: '上课时间',
key: 'courseTime',
dataIndex: 'courseTime',
width:'40%',
render: (val, record) => {
return (
<span>{formatDate('YYYY-MM-DD H:i', record.startTime)} ~ {formatDate('YYYY-MM-DD H:i', record.endTime)}</span>
<span>{formatDate('YYYY-MM-DD H:i', record.startTime)}</span>
)
}
},
......@@ -204,6 +207,7 @@ class SelectOperatorModal extends React.Component {
title: '店铺展示',
key: 'shelfState',
dataIndex: 'shelfState',
width:'15%',
render: (val, record) => {
return (
<span>
......@@ -228,12 +232,13 @@ class SelectOperatorModal extends React.Component {
title: <span><span>课程信息</span><Tooltip title="以下为该培训计划暂未关联的课程。 已关联的课程不支持重复选择，因此不显示。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>,
key: 'course',
dataIndex: 'course',
width:'60%',
render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record;
return (
<div className="record__item">
<div className="course-info">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} style={{width:'100px',height:'50px'}}/>
<img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`}/>
<div className="course-name">{record.courseName}</div>
</div>
)
......@@ -243,6 +248,7 @@ class SelectOperatorModal extends React.Component {
title: '课程时长',
key: 'courseTime',
dataIndex: 'courseTime',
width:'20%',
render: (val, record) => {
return (
<span className="course-status">{dealTimeDuration(record.videoDuration)}</span>
......@@ -253,6 +259,7 @@ class SelectOperatorModal extends React.Component {
title: '店铺展示',
key: 'shelfState',
dataIndex: 'shelfState',
width:'20%',
render: (val, record) => {
return (
<span>
......@@ -341,9 +348,9 @@ class SelectOperatorModal extends React.Component {
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
footer={[
activeKey ==='live'?
<a target='_blank' class="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-live-course?type=add">没有找到需要的直播课？<span>去创建</span></a>
<a target='_blank' className="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-live-course?type=add">没有找到需要的直播课？<span>去创建</span></a>
:
<a target='_blank' class="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-video-course?type=add">没有找到需要的视频课？<span>去创建</span></a>
<a target='_blank' className="link-create-course" href="https://dev.xiaomai5.com/xiaomai-cloud-class-web/index.html#/create-video-course?type=add">没有找到需要的视频课？<span>去创建</span></a>
,
<Button
onClick={() => {
......@@ -364,13 +371,17 @@ class SelectOperatorModal extends React.Component {
<div className="search-container">
<Search enterButton={<span className="icon iconfont">&#xe832;</span>} placeholder="搜索课程名称" style={{ width: 200 }} onChange={(e) => { this.handleChangVideoCourseName(e.target.value)}} onSearch={ () => { this.handleFetchVideoDataList()}}/>
</div>
<div>
<span>
<span className="iconfont">&#xe61d;</span>
<span>已选择{selectVideo.length + selectLive.length}个</span>
<span onClick={this.clearSelectCourse}>清空</span>
</span>
<span>该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</span>
<div className="select-area">
<div className="select-box">
<div>
<span className="icon iconfont tip-icon">&#xe61d;</span>
<span className="select-num">已选择{selectVideo.length + selectLive.length}个</span>
</div>
<div>
<span className="clear-btn" onClick={this.clearSelectCourse}>清空</span>
</div>
</div>
<div className="related-box">该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</div>
</div>
<div>
<Table
......@@ -378,6 +389,7 @@ class SelectOperatorModal extends React.Component {
dataSource={videoDataSource}
columns={this.parseVideoColumns()}
pagination={false}
bordered
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectVideo, 'id'),
......@@ -404,6 +416,7 @@ class SelectOperatorModal extends React.Component {
<PageControl
current={videoQuery.current - 1}
pageSize={videoSize}
size="small"
total={videoTotalCount}
toPage={(page) => {
const _query = {...videoQuery, current: page + 1};
......@@ -411,7 +424,7 @@ class SelectOperatorModal extends React.Component {
videoQuery:_query
},()=>{ this.handleFetchVideoDataList()})
}}
onShowVideoSizeChange={this.onShowVideoSizeChange}
onShowSizeChange={this.onShowVideoSizeChange}
/>
</div>
}
......@@ -421,13 +434,18 @@ class SelectOperatorModal extends React.Component {
<div className="search-container">
<Search enterButton={<span className="icon iconfont">&#xe832;</span>} placeholder="搜索课程名称" style={{ width: 200 }} onChange={(e) => { this.handleChangLiveCourseName(e.target.value)}} onSearch={ () => { this.handleFetchLiveDataList()}} />
</div>
<div>
<span>
<span className="iconfont">&#xe61d;</span>
<span>已选择{selectVideo.length + selectLive.length}个</span>
<span onClick={this.clearSelectCourse}>清空</span>
</span>
<span>该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</span>
<div className="select-area">
<div className="select-box">
<div>
<span className="icon iconfont tip-icon">&#xe61d;</span>
<span className="select-num">已选择{selectVideo.length + selectLive.length}个</span>
</div>
<div>
<span className="clear-btn" onClick={this.clearSelectCourse}>清空</span>
</div>
</div>
<div className="related-box">该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</div>
</div>
<div>
<Table
......@@ -435,6 +453,7 @@ class SelectOperatorModal extends React.Component {
dataSource={liveDataSource}
columns={this.parseLiveColumns()}
pagination={false}
bordered
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
......@@ -461,6 +480,7 @@ class SelectOperatorModal extends React.Component {
<PageControl
current={liveQuery.current - 1}
pageSize={liveSize}
size="small"
total={liveTotalCount}
toPage={(page) => {
const _query = {...liveQuery, current: page + 1};
......@@ -468,7 +488,7 @@ class SelectOperatorModal extends React.Component {
liveQuery:_query
},()=>{ this.handleFetchLiveDataList()})
}}
onShowLiveSizeChange={this.onShowLiveSizeChange}
onShowSizeChange={this.onShowLiveSizeChange}
/>
</div>
}
......
src/modules/plan-manage/modal/relatedCourseModal.less
.related-course-modal{
.ant-tabs-top > .ant-tabs-nav::before{
border-bottom: 0px;
}
.ant-tabs-nav-list{
margin:0 auto;
}
.ant-tabs-nav .ant-tabs-tab{
padding:6px 12px !important;
margin:0;
border: 1px solid #E8E8E8;
font-size:14px !important;
color:#999;
&:nth-child(1){
border-radius: 4px 0px 0px 4px;
}
&:nth-child(2){
border-radius: 0px 4px 4px 0px;
}
}
.ant-tabs-nav .ant-tabs-tab-active{
border: 1px solid #FFB714;
color:#FFB714;
}
.ant-tabs-top .ant-tabs-ink-bar-animated:after{
height:0;
}
.link-create-course{
color:#666666;
font-size:14px;
......@@ -12,4 +40,72 @@
.search-container{
margin-bottom:16px;
}
.select-area{
margin-bottom:12px;
display:flex;
justify-content:space-between;
.select-box{
display:inline-box;
width: 186px;
background: #FFF4DD;
border-radius: 4px;
padding:6px 16px;
margin-right:8px;
display: flex;
justify-content: space-between;
.tip-icon{
color:#FF9D14;
font-size:14px;
margin-right:4px;
}
.select-num{
color:#666666;
font-size:14px;
}
.clear-btn{
text-align:right;
color:#5289FA;
font-size:14px;
}
}
.related-box{
padding:6px 16px;
background: #FFF4DD;
border-radius: 4px;
flex:1;
color:#666666;
font-size:14px;
}
}
.course-info{
display: flex;
align-items: center;
.course-cover{
width: 97px;
height: 55px;
display: inline-block;
border-radius:4px;
margin-right:8px;
}
.course-name{
font-size:14px;
color:#666;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
width:238px;
}
.course-status {
font-size:12px;
line-height:18px;
display:inline-block;
border-radius:2px;
padding:0 8px;
margin-top:8px;
}
}
}
\ No newline at end of file
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