Skip to content

X
xiaomai-cloud-class-web
Commit 794a7085 by chenshu
Options

fix:优化样式

parent 610ef3d7
Showing with 18 additions and 7 deletions
src/modules/home/Home.jsx
...@@ -331,9 +331,11 @@ class Home extends React.Component { ...@@ -331,9 +331,11 @@ class Home extends React.Component {
: <span className="table-number">{index + 1}</span> : <span className="table-number">{index + 1}</span>
} }
<div className="table-data"> <div className="table-data">
<Tooltip placement="topLeft" title={item.courseName}> <div className="table-name">
<div className="table-name">{item.courseName}</div> <Tooltip title={item.courseName}>
</Tooltip> {item.courseName}
</Tooltip>
</div>
<div className="table-tag">{item.categoryName}</div> <div className="table-tag">{item.categoryName}</div>
</div> </div>
<span className="table-study">{item.studyNum || 0}人已学习</span> <span className="table-study">{item.studyNum || 0}人已学习</span>
...@@ -343,7 +345,7 @@ class Home extends React.Component { ...@@ -343,7 +345,7 @@ class Home extends React.Component {
</div> </div>
<div className="study-item"> <div className="study-item">
<div className="study-title">培训计划完成情况 <div className="study-title">培训计划完成情况
<Tooltip title="若某人加入多个培训计划，则需完成所有已加入的培训计划后，才视为已完成培训"> <Tooltip overlayClassName="data-plan-tooltip" title="若某人加入多个培训计划，则需完成所有已加入的培训计划后，才视为已完成培训">
<span className="iconfont icon">&#xe61d;</span> <span className="iconfont icon">&#xe61d;</span>
</Tooltip> </Tooltip>
<span className="tip">(本月)</span> <span className="tip">(本月)</span>
...@@ -390,7 +392,7 @@ class Home extends React.Component { ...@@ -390,7 +392,7 @@ class Home extends React.Component {
<div className="chart-tip"> <div className="chart-tip">
<div>学习人数(人) <div>学习人数(人)
<Tooltip title="参与任意课程进行学习的人数"> <Tooltip title="参与任意课程进行学习的人数">
<span className="iconfont icon">&#xe61d;</span> <span className="iconfont icon">&#xe61d;</span>
</Tooltip> </Tooltip>
</div> </div>
<div>人均学习时长(分钟)</div> <div>人均学习时长(分钟)</div>
......
src/modules/home/Home.less
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
} }
.data { .data {
display: flex; display: flex;
align-items: center; align-items: flex-end;
.course-number { .course-number {
font-size: 16px; font-size: 16px;
font-family: 'number'; font-family: 'number';
...@@ -127,6 +127,7 @@ ...@@ -127,6 +127,7 @@
font-size: 14px; font-size: 14px;
color: #999999; color: #999999;
margin-left: 8px; margin-left: 8px;
font-weight: 400;
} }
} }
.study-header { .study-header {
...@@ -229,6 +230,7 @@ ...@@ -229,6 +230,7 @@
height: 204px; height: 204px;
border-radius: 102px; border-radius: 102px;
background: #F1F3F6; background: #F1F3F6;
margin-top: -20px;
.small-circle { .small-circle {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -307,7 +309,7 @@ ...@@ -307,7 +309,7 @@
div { div {
color: #999; color: #999;
.iconfont { .iconfont {
color: #999; color: #bfbfbf;
font-size: 14px; font-size: 14px;
margin-left: 4px; margin-left: 4px;
} }
...@@ -318,4 +320,10 @@ ...@@ -318,4 +320,10 @@
.g2-tooltip { .g2-tooltip {
background-color: #fff !important; background-color: #fff !important;
}
.data-plan-tooltip {
.ant-tooltip-inner {
white-space: nowrap;
}
} }
\ No newline at end of file
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