Skip to content

X
xiaomai-cloud-class-web
Commit 0edaa54e by zhangleyuan
Options

feat:处理名称过长的显示问题

parent e0cfc003
Showing with 90 additions and 20 deletions
src/modules/course-manage/components/LiveCourseList.jsx
...@@ -166,24 +166,47 @@ class LiveCourseList extends React.Component { ...@@ -166,24 +166,47 @@ class LiveCourseList extends React.Component {
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} /> <img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
} }
<div> <div>
<div className="course-name">{record.courseName}</div> { record.courseName.length > 17?
<Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div>
</Tooltip>
:
<div className="course-name">{record.courseName}</div>
}
<div> <div>
<span className="course-time">{formatDate("YYYY-MM-DD H:i",parseInt(record.startTime))}~{formatDate("H:i", parseInt(record.endTime))}</span> <span className="course-time">{formatDate("YYYY-MM-DD H:i",parseInt(record.startTime))}~{formatDate("H:i", parseInt(record.endTime))}</span>
<span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span> <span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span>
</div> </div>
<div className="teacher-assistant"> <div className="teacher-assistant">
<span className="teacher">讲师：{record.teacherName}</span> { record.teacherName.length > 4 ?
<Tooltip title={record.teacherName}>
<span className="teacher">讲师：{record.teacherName}</span>
</Tooltip>
:
<span className="teacher">讲师：{record.teacherName}</span>
}
{ record.admins.length >0 && { record.admins.length >0 &&
<> <>
<span className="split"> | </span> <span className="split"> | </span>
<span className="assistant">助教： { this.handleAdminName(record.admins).length > 4?
<Tooltip title={this.handleAdminName(record.admins)}>
{ record.admins.map((item,index)=>{ <span className="assistant">助教：
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span> { record.admins.map((item,index)=>{
}) return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
} })
</span> }
</span>
</Tooltip>
:
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
})
}
</span>
}
</> </>
} }
</div> </div>
...@@ -342,24 +365,47 @@ class LiveCourseList extends React.Component { ...@@ -342,24 +365,47 @@ class LiveCourseList extends React.Component {
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} /> <img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
} }
<div> <div>
<div className="course-name">{record.courseName}</div> { record.courseName.length > 17?
<Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div>
</Tooltip>
:
<div className="course-name">{record.courseName}</div>
}
<div> <div>
<span className="course-time">{formatDate("YYYY-MM-DD H:i",parseInt(record.startTime))}~{formatDate("H:i", parseInt(record.endTime))}</span> <span className="course-time">{formatDate("YYYY-MM-DD H:i",parseInt(record.startTime))}~{formatDate("H:i", parseInt(record.endTime))}</span>
<span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span> <span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span>
</div> </div>
<div className="teacher-assistant"> <div className="teacher-assistant">
{ record.teacherName.length > 4 ?
<Tooltip title={record.teacherName}>
<span className="teacher">讲师：{record.teacherName}</span>
</Tooltip>
:
<span className="teacher">讲师：{record.teacherName}</span> <span className="teacher">讲师：{record.teacherName}</span>
}
{ record.admins.length >0 && { record.admins.length >0 &&
<> <>
<span className="split"> | </span> <span className="split"> | </span>
<span className="assistant">助教： { this.handleAdminName(record.admins).length > 4?
<Tooltip title={this.handleAdminName(record.admins)}>
{ record.admins.map((item,index)=>{ <span className="assistant">助教：
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span> { record.admins.map((item,index)=>{
}) return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
} })
</span> }
</span>
</Tooltip>
:
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
})
}
</span>
}
</> </>
} }
</div> </div>
...@@ -416,6 +462,17 @@ class LiveCourseList extends React.Component { ...@@ -416,6 +462,17 @@ class LiveCourseList extends React.Component {
this.setState({ columns }) this.setState({ columns })
} }
handleAdminName = (adminArray)=>{
let adminStr = "";
adminArray.map((item,index)=>{
if(index < adminArray.length-1){
adminStr = adminStr + item.adminName + '、';
}else{
adminStr = adminStr + item.adminName
}
})
return adminStr
}
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
return ( return (
<div className="live-course-more-menu"> <div className="live-course-more-menu">
......
src/modules/course-manage/components/LiveCourseList.less
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
color: #333333; color: #333333;
line-height: 20px; line-height: 20px;
font-weight: bold; font-weight: bold;
max-width:238px; max-width:244px;
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
white-space: nowrap; white-space: nowrap;
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-01-15 11:22:50 * @LastEditTime: 2021-01-15 19:58:12
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -75,7 +75,13 @@ class VideoCourseList extends React.Component { ...@@ -75,7 +75,13 @@ class VideoCourseList extends React.Component {
<div className="record__item"> <div className="record__item">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} /> <img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} />
<span className="course-name">{record.courseName}</span> { record.courseName.length > 25?
<Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div>
</Tooltip>
:
<div className="course-name">{record.courseName}</div>
}
</div> </div>
) )
} }
......
src/modules/course-manage/video-course/components/VideoCourseList.less
...@@ -34,6 +34,13 @@ ...@@ -34,6 +34,13 @@
.course-name { .course-name {
color: #666; color: #666;
width:188px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height:48px;
} }
} }
} }
......
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