Skip to content

X
xiaomai-cloud-class-web
Commit 4fb83424 by zhangleyuan
Options

style:调整Ui样式

parent 895db2f4
Showing with 68 additions and 31 deletions
src/modules/plan-manage/LearningData.jsx
...@@ -27,6 +27,7 @@ class LearningData extends React.Component { ...@@ -27,6 +27,7 @@ class LearningData extends React.Component {
createName:"" createName:""
} }
} }
componentDidMount(){ componentDidMount(){
this.getPlanDetail(); this.getPlanDetail();
Bus.bind('watchDataView',() =>{this.setState({activeKey:"userLearningData"}) }) Bus.bind('watchDataView',() =>{this.setState({activeKey:"userLearningData"}) })
...@@ -62,6 +63,7 @@ class LearningData extends React.Component { ...@@ -62,6 +63,7 @@ class LearningData extends React.Component {
}) })
}) })
} }
render() { render() {
const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey,createName} = this.state; const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey,createName} = this.state;
return ( return (
......
src/modules/plan-manage/LearningData.less
.plan-learn-data-list{ .plan-learn-data-list{
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
font-weight:normal; font-weight:normal;
......
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
...@@ -158,14 +158,13 @@ class UserLearnDetailModal extends React.Component { ...@@ -158,14 +158,13 @@ class UserLearnDetailModal extends React.Component {
render: (val, record,index) => { render: (val, record,index) => {
return ( return (
<div className="course-info"> <div className="course-info">
<span className="course-type">{CourseType[record.courseType].text}</span> <div className="course-type">{CourseType[record.courseType].text}</div>
<span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span> <div className="name-and-state">
{record.courseState === "EXPIRED" && <span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span>
<span className="icon iconfont tip">&#xe834;</span> { record.courseType==="LIVE" &&
} <span className="course-state">{courseStateShow[record.courseState].title}</span>
{ record.courseType==="LIVE" && }
<span className="course-state">{courseStateShow[record.courseState].title}</span> </div>
}
</div> </div>
) )
} }
...@@ -217,7 +216,6 @@ class UserLearnDetailModal extends React.Component { ...@@ -217,7 +216,6 @@ class UserLearnDetailModal extends React.Component {
pagination={false} pagination={false}
bordered bordered
className="plan-table" className="plan-table"
size="middle"
/> />
</div> </div>
<div> <div>
......
src/modules/plan-manage/modal/UserLearnDetailModal.less
.user-Learn-modal{ .user-Learn-modal{
.ant-table-thead{
tr {
th{
padding:9px 8px !important;
}
}
}
.customer-info{ .customer-info{
margin-bottom:16px; margin-bottom:16px;
.customer-name{ .customer-name{
...@@ -20,6 +14,18 @@ ...@@ -20,6 +14,18 @@
} }
.plan-table{ .plan-table{
margin-bottom:8px; margin-bottom:8px;
.ant-table-thead{
tr {
th{
padding:9px 24px;
}
}
}
tr{
td{
padding:8px 24px;
}
}
.plan-instro{ .plan-instro{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -27,7 +33,7 @@ ...@@ -27,7 +33,7 @@
margin-right:8px; margin-right:8px;
img{ img{
width: 97px; width: 97px;
height: 55px; height: 54px;
display: inline-block; display: inline-block;
border-radius:4px; border-radius:4px;
} }
...@@ -43,6 +49,18 @@ ...@@ -43,6 +49,18 @@
} }
} }
.task-table{ .task-table{
.ant-table-thead{
tr {
th{
padding:9px 16px;
}
}
}
tr{
td{
padding:14px 16px;
}
}
.taskName{ .taskName{
color:#666666; color:#666666;
font-size:14px; font-size:14px;
...@@ -52,8 +70,12 @@ ...@@ -52,8 +70,12 @@
font-size:14px; font-size:14px;
} }
.course-info{ .course-info{
display:flex;
margin-left:57px; margin-left:57px;
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:1px 8px;
...@@ -61,19 +83,28 @@ ...@@ -61,19 +83,28 @@
margin-right:4px; margin-right:4px;
border-radius: 2px; border-radius: 2px;
} }
.course-name{ .name-and-state{
color:#666666; flex:1;
font-size:14px; .course-name{
margin-right:8px; color:#666666;
} font-size:14px;
.tip{ margin-right:8px;
font-size:14px; }
color:#FF4F4F; .tip{
margin-right:2px; font-size:14px;
color:#FF4F4F;
margin-right:2px;
}
.course-state{
color:#999;
font-size:14px;
}
} }
.course-state{
color:#999; }
font-size:14px; .ant-table-expanded-row{
td{
padding:0 16px;
} }
} }
.ant-table-content{ .ant-table-content{
...@@ -83,13 +114,18 @@ ...@@ -83,13 +114,18 @@
border:none; border:none;
} }
.child-table{ .child-table{
.ant-table-content{ .ant-table-content{
border:none; border:none;
thead{ thead{
display:none; display:none;
} }
tbody tr td{ tbody tr {
border-bottom:none; td{
border-bottom:none;
padding:14px 16px;
}
} }
} }
......
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