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 {
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
}
<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>
<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>
</div>
<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 &&
<>
<span className="split"> | </span>
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
})
}
</span>
{ this.handleAdminName(record.admins).length > 4?
<Tooltip title={this.handleAdminName(record.admins)}>
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<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>
......@@ -342,24 +365,47 @@ class LiveCourseList extends React.Component {
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
}
<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>
<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>
</div>
<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>
}
{ record.admins.length >0 &&
<>
<span className="split"> | </span>
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
})
}
</span>
{ this.handleAdminName(record.admins).length > 4?
<Tooltip title={this.handleAdminName(record.admins)}>
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<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>
......@@ -416,6 +462,17 @@ class LiveCourseList extends React.Component {
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) => {
return (
<div className="live-course-more-menu">
......
src/modules/course-manage/components/LiveCourseList.less
......@@ -17,7 +17,7 @@
color: #333333;
line-height: 20px;
font-weight: bold;
max-width:238px;
max-width:244px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
......
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-01-15 11:22:50
* @LastEditTime: 2021-01-15 19:58:12
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -75,7 +75,13 @@ class VideoCourseList extends React.Component {
<div className="record__item">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<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>
)
}
......
src/modules/course-manage/video-course/components/VideoCourseList.less
......@@ -34,6 +34,13 @@
.course-name {
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