Commit 54b17ee1 authored by afc163's avatar afc163

Fix workspace style

parent d05a69be
......@@ -53,9 +53,11 @@ class Radar extends PureComponent {
hasLegend = true,
fit = true,
tickCount = 4,
margin = [16, 30, 16, 30] } = this.props;
margin = [24, 30, 16, 30] } = this.props;
const colors = ['#1890FF', '#FACC14', '#2FC25B'];
const colors = [
'#1890FF', '#FACC14', '#2FC25B', '#8543E0', '#F04864', '#13C2C2', '#fa8c16', '#a0d911',
];
if (!data || (data && data.length < 1)) {
return;
......@@ -87,16 +89,40 @@ class Radar extends PureComponent {
chart.axis('label', {
line: null,
labelOffset: 8,
labels: {
label: {
fill: 'rgba(0, 0, 0, .65)',
},
},
grid: {
line: {
stroke: '#e9e9e9',
lineWidth: 1,
lineDash: [0, 0],
},
},
});
chart.axis('value', {
grid: {
type: 'polygon',
line: {
stroke: '#e9e9e9',
lineWidth: 1,
lineDash: [0, 0],
},
},
labels: {
label: {
fill: 'rgba(0, 0, 0, .65)',
},
},
});
chart.line().position('label*value').color('name', colors);
chart.point().position('label*value').color('name', colors).shape('circle');
chart.point().position('label*value').color('name', colors).shape('circle')
.size(3);
chart.render();
......@@ -129,7 +155,7 @@ class Radar extends PureComponent {
return (
<div className={styles.radar} style={{ height }}>
<div>
{ title && <h4>{title}</h4>}
{title && <h4>{title}</h4>}
<div ref={this.handleRef} />
{
hasLegend && (
......@@ -147,9 +173,6 @@ class Radar extends PureComponent {
<span>{item.name}</span>
</p>
<h6>{item.value}</h6>
{
i !== (legendData.length - 1) && <div className={styles.split} />
}
</div>
</Col>
))
......
......@@ -7,33 +7,37 @@
.legendItem {
position: relative;
text-align: center;
p {
cursor: pointer;
}
cursor: pointer;
color: @text-color-secondary;
line-height: 22px;
h6 {
color: @heading-color;
padding-left: 16px;
font-size: 24px;
line-height: 32px;
margin-top: 2px;
margin-top: 4px;
}
.split {
&:after {
background-color: @border-color-split;
position: absolute;
top: 8px;
right: 0;
height: 40px;
width: 1px;
content: '';
}
}
> :last-child .legendItem:after {
display: none;
}
.dot {
border-radius: 8px;
border-radius: 6px;
display: inline-block;
margin-right: 8px;
margin-right: 6px;
position: relative;
top: -1px;
height: 8px;
width: 8px;
height: 6px;
width: 6px;
}
}
}
......@@ -189,9 +189,13 @@ export default class Workplace extends PureComponent {
<List.Item.Meta
avatar={<Avatar src={item.user.avatar} />}
title={
<p>
<a style={{ fontWeight: 'bold' }}>{item.user.name}</a> 在 <a>xx</a> 新建了项目 <a>xxxx</a>
</p>
<span>
<a className={styles.username}>{item.user.name}</a>
&nbsp;
<span className={styles.operation}>
<a>xx</a> 新建了项目 <a>xxxx</a>
</span>
</span>
}
description={
<span className={styles.datetime} title={item.updatedAt}>
......@@ -222,21 +226,15 @@ export default class Workplace extends PureComponent {
<Card
style={{ marginBottom: 24 }}
bordered={false}
title="xx 指数"
title="XX 指数"
loading={radarData.length === 0}
>
<div className={styles.chart}>
{
<Radar
hasLegend
height={286}
data={radarData}
/>
}
<Radar hasLegend height={286} data={radarData} />
</div>
</Card>
<Card
bodyStyle={{ paddingBottom: 0 }}
bodyStyle={{ paddingTop: 12, paddingBottom: 12 }}
bordered={false}
title="团队"
>
......@@ -246,8 +244,8 @@ export default class Workplace extends PureComponent {
members.map(item => (
<Col span={12} key={`members-item-${item.id}`}>
<Link to={item.link}>
<img src={item.logo} alt={item.title} />
<span>{item.title}</span>
<Avatar src={item.logo} size="small" />
<span className={styles.member}>{item.title}</span>
</Link>
</Col>
))
......
......@@ -2,11 +2,12 @@
@import "../../utils/utils.less";
.activitiesList {
padding: 0 24px 24px 24px;
:global {
.ant-list-item-meta-title:hover {
color: @text-color;
}
padding: 0 24px 8px 24px;
.username {
color: @text-color;
}
.operation {
font-weight: normal;
}
}
......@@ -80,28 +81,21 @@
}
.members {
margin-bottom: 35px;
a {
display: block;
margin-bottom: 24px;
margin: 12px 0;
line-height: 24px;
height: 24px;
.textOverflow();
img {
border-radius: 24px;
display: inline;
position: relative;
top: -2px;
width: 24px;
height: 24px;
margin-right: 12px;
vertical-align: middle;
}
span {
.member {
font-size: @font-size-base;
color: @text-color;
line-height: 24px;
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all .3s;
display: inline-block;
.textOverflow();
}
&:hover {
......
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