Skip to content

X
xiaomai-cloud-class-web
Commit be216d6f by zhangleyuan
Options

feat:UI优化

parent 00153e8b
Showing with 69 additions and 84 deletions
src/core/antd.less
...@@ -616,7 +616,9 @@ mr0 { ...@@ -616,7 +616,9 @@ mr0 {
.ant-table-thead > tr > th{ .ant-table-thead > tr > th{
font-weight:normal !important; font-weight:normal !important;
} }
td.ant-table-column-sort{
background: none;
}
......
src/modules/plan-manage/LearningData.less
...@@ -3,6 +3,9 @@ ...@@ -3,6 +3,9 @@
.ant-tabs-tab.ant-tabs-tab-active{ .ant-tabs-tab.ant-tabs-tab-active{
font-weight:normal; font-weight:normal;
} }
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
font-weight:normal;
}
.plan-info{ .plan-info{
margin:16px; margin:16px;
padding:16px; padding:16px;
......
src/modules/plan-manage/components/EmployeeShareData.jsx
...@@ -162,10 +162,11 @@ class EmployeeShareData extends React.Component { ...@@ -162,10 +162,11 @@ class EmployeeShareData extends React.Component {
title: '学习人数', title: '学习人数',
key: 'learnNum', key: 'learnNum',
dataIndex: 'learnNum', dataIndex: 'learnNum',
width:110,
sorter:true, sorter:true,
render: (val, record) => { render: (val, record) => {
return ( return (
<div> <div className="learn-num">
{val} {val}
</div> </div>
) )
...@@ -175,10 +176,11 @@ class EmployeeShareData extends React.Component { ...@@ -175,10 +176,11 @@ class EmployeeShareData extends React.Component {
title: '已学完', title: '已学完',
key: 'learnFinishNum', key: 'learnFinishNum',
dataIndex: 'learnFinishNum', dataIndex: 'learnFinishNum',
width:110,
sorter:true, sorter:true,
render: (val, record) => { render: (val, record) => {
return ( return (
<div> <div className="learn-finish-num">
{val} {val}
</div> </div>
) )
...@@ -188,10 +190,11 @@ class EmployeeShareData extends React.Component { ...@@ -188,10 +190,11 @@ class EmployeeShareData extends React.Component {
title: '未学完', title: '未学完',
key: 'learnNoFinishNum', key: 'learnNoFinishNum',
dataIndex: 'learnNoFinishNum', dataIndex: 'learnNoFinishNum',
width:110,
sorter:true, sorter:true,
render: (val, record) => { render: (val, record) => {
return ( return (
<div> <div className="learn-no-finish-num">
{val} {val}
</div> </div>
) )
......
src/modules/plan-manage/components/EmployeeShareData.less
...@@ -7,4 +7,16 @@ ...@@ -7,4 +7,16 @@
color:#5289FA; color:#5289FA;
cursor: pointer; cursor: pointer;
} }
.learn-num{
text-align:right;
margin-right:20px;
}
.learn-finish-num{
text-align:right;
margin-right:30px;
}
.learn-no-finish-num{
text-align:right;
margin-right:35px;
}
} }
\ No newline at end of file
src/modules/plan-manage/components/UserLearningData.jsx
...@@ -229,10 +229,11 @@ class UserLearningData extends React.Component { ...@@ -229,10 +229,11 @@ class UserLearningData extends React.Component {
</span>, </span>,
key: 'learnNum', key: 'learnNum',
dataIndex: 'learnNum', dataIndex: 'learnNum',
width:130,
sorter:true, sorter:true,
render: (val, record) => { render: (val, record) => {
return ( return (
<div> <div className="learn-num">
<span>{record.courseFinishNum}</span> <span>{record.courseFinishNum}</span>
<span>/</span> <span>/</span>
<span>{record.courseNum}</span> <span>{record.courseNum}</span>
......
src/modules/plan-manage/components/UserLearningData.less
...@@ -13,4 +13,8 @@ ...@@ -13,4 +13,8 @@
color: #BFBFBF; color: #BFBFBF;
} }
} }
.learn-num{
text-align:right;
margin-right:20px;
}
} }
\ No newline at end of file
src/modules/plan-manage/components/UserLearningDataFilter.jsx
...@@ -42,12 +42,15 @@ function UserLearningDataFilter(props) { ...@@ -42,12 +42,15 @@ function UserLearningDataFilter(props) {
useEffect(() => { useEffect(() => {
Bus.bind('watchDataView',(record) => handleChangeCreatorQuery(record)) Bus.bind('watchDataView',(record) => handleChangeCreatorQuery(record))
}, []); });
useEffect(() => { useEffect(() => {
getCreatorList(); getCreatorList();
}, []); }, []);
function handleChangeCreatorQuery (record){ function handleChangeCreatorQuery (record){
console.log('11');
const _creatorQuery = {...creatorQuery}; const _creatorQuery = {...creatorQuery};
_creatorQuery.operateId = record.storeUserId; _creatorQuery.operateId = record.storeUserId;
setCreatorQuery(_creatorQuery); setCreatorQuery(_creatorQuery);
......
src/modules/plan-manage/modal/SharePlanModal.jsx
...@@ -142,8 +142,7 @@ class ShareLiveModal extends React.Component { ...@@ -142,8 +142,7 @@ class ShareLiveModal extends React.Component {
<div className="share-url right__item"> <div className="share-url right__item">
<div className="title">② 链接分享</div> <div className="title">② 链接分享</div>
<div className="sub-title">用户可通过微信或浏览器打开以下链接，查看培训计划</div>
<div className="sub-title">用户可通过微信打开以下链接，查看培训计划</div>
<div className="content url-content"> <div className="content url-content">
<div className="share-url" id="shareUrl">{shareUrl}</div> <div className="share-url" id="shareUrl">{shareUrl}</div>
<Button type="primary" onClick={this.handleCopy}>复制</Button> <Button type="primary" onClick={this.handleCopy}>复制</Button>
......
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
...@@ -36,7 +36,7 @@ class UserLearnDetailModal extends React.Component { ...@@ -36,7 +36,7 @@ class UserLearnDetailModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
planDataSource:[], planDataSource:{},
taskDataSource:[], taskDataSource:[],
taskSize:10, taskSize:10,
taskQuery: { taskQuery: {
...@@ -72,11 +72,11 @@ class UserLearnDetailModal extends React.Component { ...@@ -72,11 +72,11 @@ class UserLearnDetailModal extends React.Component {
} }
return item; return item;
}) })
const planDataSource = [{ const planDataSource = {
planName, planName,
learnFinishPercentage, learnFinishPercentage,
coverUrl:coverUrl || defaultCover coverUrl:coverUrl || defaultCover
}] }
this.setState({ this.setState({
storeCustomerName, storeCustomerName,
storeCustomerPhone, storeCustomerPhone,
...@@ -85,39 +85,6 @@ class UserLearnDetailModal extends React.Component { ...@@ -85,39 +85,6 @@ class UserLearnDetailModal extends React.Component {
}) })
}) })
} }
parsePlanColumns = () => {
const columns = [
{
title: '培训计划名称',
key: 'planInfo',
dataIndex: 'planInfo',
render: (val, record) => {
return (
<div className="plan-instro">
<div className="img-con">
<img src={record.coverUrl}/>
</div>
<div className="plan-name">{record.planName}</div>
</div>
)
}
},
{
title: '学习进度',
key: 'learnFinishPercentage',
dataIndex: 'learnFinishPercentage',
width:167,
render: (val, record) => {
return (
<div className="plan-learn-percentage">
{val}%
</div>
)
}
}
];
return columns;
}
parseTaskColumns = () => { parseTaskColumns = () => {
const columns = [ const columns = [
...@@ -210,15 +177,18 @@ class UserLearnDetailModal extends React.Component { ...@@ -210,15 +177,18 @@ class UserLearnDetailModal extends React.Component {
<span>{storeCustomerPhone}</span> <span>{storeCustomerPhone}</span>
</span> </span>
</div> </div>
<div> <div className="plan-instro">
<Table <div className="img-con">
dataSource={planDataSource} <img src={planDataSource.coverUrl}/>
columns={this.parsePlanColumns()} </div>
pagination={false} <div>
bordered <div className="plan-name">{planDataSource.planName}</div>
className="plan-table" <div className="task-learn-percentage">
/> <span>学习进度: {planDataSource.learnFinishPercentage}%</span>
</div>
</div>
</div> </div>
<div> <div>
<Table <Table
rowKey={(record) => record.taskId} rowKey={(record) => record.taskId}
......
src/modules/plan-manage/modal/UserLearnDetailModal.less
...@@ -12,40 +12,26 @@ ...@@ -12,40 +12,26 @@
color:#333; color:#333;
} }
} }
.plan-table{ .plan-instro{
margin-bottom:8px; display: flex;
.ant-table-thead{ align-items: center;
tr { margin-bottom:16px;
th{ .img-con{
padding:9px 24px; margin-right:8px;
} img{
width: 97px;
height: 54px;
display: inline-block;
border-radius:4px;
} }
} }
tr{ .plan-name{
td{ color:#333;
padding:8px 24px; font-size:14px;
}
} }
.plan-instro{ .plan-learn-percentage{
display: flex; color:#333;
align-items: center; font-size:14px;
.img-con{
margin-right:8px;
img{
width: 97px;
height: 54px;
display: inline-block;
border-radius:4px;
}
}
.plan-name{
color:#666666;
font-size:14px;
}
.plan-learn-percentage{
color:#666666;
font-size:14px;
}
} }
} }
.task-table{ .task-table{
...@@ -62,7 +48,7 @@ ...@@ -62,7 +48,7 @@
} }
} }
.taskName{ .taskName{
color:#666666; color:#333;
font-size:14px; font-size:14px;
} }
.task-learn-percentage{ .task-learn-percentage{
......
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