Skip to content

X
xiaomai-cloud-class-web
Commit 1a754a5a by zhangleyuan
Options

feat:UI样式优化

parent be216d6f
Showing with 56 additions and 47 deletions
src/modules/course-manage/modal/RelatedPlanModal.less
...@@ -43,7 +43,8 @@ ...@@ -43,7 +43,8 @@
.course-type{ .course-type{
font-size:11px; font-size:11px;
color:#666666; color:#666666;
padding:1px 8px; padding:0px 6px;
line-height: 16px;
border: 1px solid #999999; border: 1px solid #999999;
margin-right:4px; margin-right:4px;
border-radius: 2px; border-radius: 2px;
......
src/modules/plan-manage/AddPlan.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39 * @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-15 14:19:22 * @LastEditTime: 2021-03-16 11:27:06
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -120,7 +120,8 @@ function AddPlan() { ...@@ -120,7 +120,8 @@ function AddPlan() {
function submitInfo(){ function submitInfo(){
const {planName,enableState,selectOperatorList,instro,operateType,percentCompleteLive,percentCompleteVideo,coverId,coverUrl} = basicData; const {planName,enableState,selectOperatorList,instro,operateType,percentCompleteLive,percentCompleteVideo,coverId,coverUrl} = basicData;
if(!planName){ let input = /^[\s]*$/;
if(!planName || input.test(planName)){
message.warning('请输入的培训计划名称'); message.warning('请输入的培训计划名称');
return; return;
} }
...@@ -140,7 +141,6 @@ function AddPlan() { ...@@ -140,7 +141,6 @@ function AddPlan() {
message.warning('请输入培训计划内容'); message.warning('请输入培训计划内容');
return; return;
} }
let input = /^[\s]*$/;
for(let i=0;i<taskList.length;i++){ for(let i=0;i<taskList.length;i++){
if(input.test(taskList[i].taskName)){ if(input.test(taskList[i].taskName)){
message.warning('培训任务名称不能为空'); message.warning('培训任务名称不能为空');
......
src/modules/plan-manage/components/EmployeeShareData.jsx
...@@ -172,34 +172,34 @@ class EmployeeShareData extends React.Component { ...@@ -172,34 +172,34 @@ class EmployeeShareData extends React.Component {
) )
} }
}, },
{ // {
title: '已学完', // title: '已学完',
key: 'learnFinishNum', // key: 'learnFinishNum',
dataIndex: 'learnFinishNum', // dataIndex: 'learnFinishNum',
width:110, // width:110,
sorter:true, // sorter:true,
render: (val, record) => { // render: (val, record) => {
return ( // return (
<div className="learn-finish-num"> // <div className="learn-finish-num">
{val} // {val}
</div> // </div>
) // )
} // }
}, // },
{ // {
title: '未学完', // title: '未学完',
key: 'learnNoFinishNum', // key: 'learnNoFinishNum',
dataIndex: 'learnNoFinishNum', // dataIndex: 'learnNoFinishNum',
width:110, // width:110,
sorter:true, // sorter:true,
render: (val, record) => { // render: (val, record) => {
return ( // return (
<div className="learn-no-finish-num"> // <div className="learn-no-finish-num">
{val} // {val}
</div> // </div>
) // )
} // }
}, // },
{ {
title: '操作', title: '操作',
key: 'operate', key: 'operate',
......
src/modules/plan-manage/components/ExpiredCourseList.less
.expired-course-list{ .expired-course-list{
margin:18px 10px 16px; margin:8px 10px 16px;
.course-item{ .course-item{
display:flex; display:flex;
padding:16px 0; padding:16px 0;
border-bottom:1px solid #E8E8E8; border-bottom:1px dotted #E8E8E8;
justify-content: space-between; justify-content: space-between;
&:last-child{
border-bottom:none;
}
.course-left{ .course-left{
display:flex; display:flex;
...@@ -19,11 +21,12 @@ ...@@ -19,11 +21,12 @@
.course-type{ .course-type{
margin-right:16px; margin-right:16px;
span{ span{
padding:2px 8px; padding:0px 6px;
color:#666666; color:#666666;
font-size:11px; font-size:11px;
border-radius: 2px; border-radius: 2px;
border: 1px solid #999999; border: 1px solid #999999;
line-height: 16px;
} }
} }
.course-instro{ .course-instro{
......
src/modules/plan-manage/components/TrainingTask.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51 * @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-15 16:14:50 * @LastEditTime: 2021-03-16 11:36:36
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -342,7 +342,7 @@ class TrainingTask extends React.Component { ...@@ -342,7 +342,7 @@ class TrainingTask extends React.Component {
<Input className="course-name-input" defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入课程名称（40字以内）" maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item> <Input className="course-name-input" defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入课程名称（40字以内）" maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item>
</Form> </Form>
: :
<span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span> <span className="course-name">{parentIndex + 1}.{index + 1} {record.courseName}</span>
} }
{record.courseState === "EXPIRED" && {record.courseState === "EXPIRED" &&
<span className="icon iconfont tip">&#xe834;</span> <span className="icon iconfont tip">&#xe834;</span>
......
src/modules/plan-manage/components/TrainingTask.less
...@@ -92,9 +92,11 @@ ...@@ -92,9 +92,11 @@
} }
.plan-course-sort-item{ .plan-course-sort-item{
display:flex; display:flex;
padding:16px 16px 16px 51px; padding:16px 16px 16px 0px;
margin-left:51px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom:1px dotted #E8E8E8;
&:hover{ &:hover{
.course-operate{ .course-operate{
display:block; display:block;
...@@ -127,10 +129,11 @@ ...@@ -127,10 +129,11 @@
.course-type{ .course-type{
font-size:11px; font-size:11px;
color:#666666; color:#666666;
padding:1px 8px; padding:0px 6px;
border: 1px solid #999999; border: 1px solid #999999;
margin-right:4px; margin-right:4px;
border-radius: 2px; border-radius: 2px;
line-height: 16px;
} }
.course-name{ .course-name{
color:#666666; color:#666666;
......
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
...@@ -125,9 +125,12 @@ class UserLearnDetailModal extends React.Component { ...@@ -125,9 +125,12 @@ class UserLearnDetailModal extends React.Component {
render: (val, record,index) => { render: (val, record,index) => {
return ( return (
<div className="course-info"> <div className="course-info">
<div className="course-type">{CourseType[record.courseType].text}</div> <div>
<span className="course-type">{CourseType[record.courseType].text}</span>
<span>{parentIndex + 1}.{index + 1}&nbsp;</span>
</div>
<div className="name-and-state"> <div className="name-and-state">
<span className="course-name">{parentIndex + 1}.{index + 1} {record.courseName}</span> <span className="course-name">{record.courseName}</span>
{ record.courseType==="LIVE" && { record.courseType==="LIVE" &&
<span className="course-state">{courseStateShow[record.courseState].title}</span> <span className="course-state">{courseStateShow[record.courseState].title}</span>
} }
......
src/modules/plan-manage/modal/UserLearnDetailModal.less
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
} }
.plan-name{ .plan-name{
color:#333; color:#333;
font-size:14px; font-size:16px;
} }
.plan-learn-percentage{ .plan-learn-percentage{
color:#333; color:#333;
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
font-size:14px; font-size:14px;
} }
.task-learn-percentage{ .task-learn-percentage{
color:#666666; color:#333;
font-size:14px; font-size:14px;
} }
.course-info{ .course-info{
...@@ -60,14 +60,13 @@ ...@@ -60,14 +60,13 @@
margin-left:57px; margin-left:57px;
align-items: center; align-items: center;
.course-type{ .course-type{
width:54px;
height: 22px;
font-size:11px; font-size:11px;
color:#666666; color:#666666;
padding:1px 8px; padding:0px 6px;
border: 1px solid #999999; border: 1px solid #999999;
margin-right:4px; margin-right:4px;
border-radius: 2px; border-radius: 2px;
line-height: 16px;
} }
.name-and-state{ .name-and-state{
flex:1; flex:1;
......
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