Skip to content

Commit 20c145f

Browse files
author
liyuan-meng
committed
✨ UI 验收问题修改
1 parent ba97009 commit 20c145f

25 files changed

Lines changed: 368 additions & 290 deletions

File tree

‎src/components/avatar/demos/basic-avatar.md‎

Lines changed: 55 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -20,34 +20,67 @@ class AvatarDemos extends React.Component {
2020
return (
2121
<div className="avatar-basic-demo" >
2222
<div>
23-
<span>16px</span>
24-
<span>24px</span>
25-
<span>32px</span>
26-
<span>40px</span>
27-
<span>48px</span>
28-
<span>60px</span>
23+
<h5>24px</h5>
24+
<div>
25+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={24}/>
26+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={24} shape="square"/>
27+
<Avatar size={24} icon={<Icon type="user-fill"/>} />
28+
<Avatar size={24} icon={<Icon type="user-fill"/>} shape="square" />
29+
<Avatar size={24}>A</Avatar>
30+
<Avatar size={24} group shape="square">A</Avatar>
31+
</div>
2932
</div>
3033
<div>
31-
<div><Avatar size={16}/></div>
32-
<div><Avatar size={24}/></div>
33-
<div><Avatar size={32}/></div>
34-
<div><Avatar size={40}/></div>
35-
<div><Avatar size={48}/></div>
36-
<div><Avatar size={60}/></div>
34+
<h5>32px</h5>
35+
<div>
36+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={32}/>
37+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={32} shape="square"/>
38+
<Avatar size={32} icon={<Icon type="user-fill"/>} />
39+
<Avatar size={32} icon={<Icon type="user-fill"/>} shape="square" />
40+
<Avatar size={32}>A</Avatar>
41+
<Avatar size={32} group shape="square">A</Avatar>
42+
</div>
3743
</div>
3844
<div>
39-
<div><Avatar size={16} group shape="square"/></div>
40-
<div><Avatar size={24} group shape="square"/></div>
41-
<div><Avatar size={32} group shape="square"/></div>
42-
<div><Avatar size={40} group shape="square"/></div>
43-
<div><Avatar size={48} group shape="square"/></div>
44-
<div><Avatar size={60} group shape="square"/></div>
45+
<h5>40px</h5>
46+
<div>
47+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={40}/>
48+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={40} shape="square"/>
49+
<Avatar size={40} icon={<Icon type="user-fill"/>} />
50+
<Avatar size={40} icon={<Icon type="user-fill"/>} shape="square" />
51+
<Avatar size={40}>A</Avatar>
52+
<Avatar size={40} group shape="square">A</Avatar>
53+
</div>
4554
</div>
4655
<div>
47-
<div><Avatar size="small" shape="square"/></div>
48-
<div><Avatar size="default" shape="square"/></div>
49-
<div/>
50-
<div><Avatar size="large" shape="square"/></div>
56+
<h5>48px</h5>
57+
<div>
58+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={48}/>
59+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={48} shape="square"/>
60+
<Avatar size={48} icon={<Icon type="user-fill"/>} />
61+
<Avatar size={48} icon={<Icon type="user-fill"/>} shape="square" />
62+
<Avatar size={48}>A</Avatar>
63+
<Avatar size={48} group shape="square">A</Avatar>
64+
</div>
65+
</div>
66+
<div>
67+
<h5>60px</h5>
68+
<div>
69+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={60}/>
70+
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={60} shape="square"/>
71+
<Avatar size={60} icon={<Icon type="user-fill"/>} />
72+
<Avatar size={60} icon={<Icon type="user-fill"/>} shape="square" />
73+
<Avatar size={60}>A</Avatar>
74+
<Avatar size={60} group shape="square">A</Avatar>
75+
</div>
76+
</div>
77+
<div>
78+
<h6>size 非数字</h6>
79+
<div>
80+
<Avatar size="small" shape="square"/>
81+
<Avatar size="default" shape="square"/>
82+
<Avatar size="large" shape="square"/>
83+
</div>
5184
</div>
5285
</div>
5386

‎src/components/avatar/demos/group-avatar.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ class AvatarDemos extends React.Component {
3333
<Avatar style={{ background: '#5280FF', fontSize: 10 }} size="large">
3434
<span>User</span>
3535
</Avatar>
36+
<Avatar size="large">A</Avatar>
37+
<Avatar size="large" group shape="square">B</Avatar>
3638
</div>
3739
</React.Fragment>
3840
);

‎src/components/avatar/demos/style.less‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
.avatar-basic-demo {
2+
display: flex;
3+
flex-direction: column;
4+
25
> div {
36
display: flex;
4-
align-items: center;
5-
margin-bottom: 20px;
7+
flex-direction: column;
8+
69
> div {
7-
width: 100px;
8-
text-align: center;
9-
}
10-
}
11-
> div:first-child {
12-
> span {
13-
width: 100px;
14-
text-align: center;
10+
display: flex;
11+
align-items: center;
12+
gap: 40px;
1513
}
1614
}
1715
}

‎src/components/avatar/index.less‎

Lines changed: 60 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,49 +16,89 @@
1616
background: #d9d9d9;
1717
font-size: 18px;
1818
color: #ffffff;
19-
.@{breadcrumbs-prefix-cls}-icon {
20-
font-size: 18px;
21-
// transform: scale(0.5);
22-
}
23-
&.@{breadcrumbs-prefix-cls}-@{s-16} .@{breadcrumbs-prefix-cls}-icon {
24-
font-size: 12px;
25-
transform: scale(0.75);
19+
overflow: hidden;
20+
21+
i {
22+
font-size: 16px;
23+
position: relative;
24+
color: @gray-6;
2625
}
27-
&.@{breadcrumbs-prefix-cls}-@{s-24} .@{breadcrumbs-prefix-cls}-icon {
28-
font-size: 12px;
26+
&.@{breadcrumbs-prefix-cls}-@{s-16} {
27+
font-size: 14px;
28+
29+
i {
30+
top: 3px;
31+
font-size: 12px;
32+
}
2933
}
30-
&.@{breadcrumbs-prefix-cls}-@{s-32} .@{breadcrumbs-prefix-cls}-icon {
34+
&.@{breadcrumbs-prefix-cls}-@{s-24} {
3135
font-size: 16px;
36+
37+
i {
38+
top: 4px;
39+
font-size: 20px;
40+
}
3241
}
33-
&.@{breadcrumbs-prefix-cls}-@{s-40} .@{breadcrumbs-prefix-cls}-icon {
34-
font-size: 18px;
42+
&.@{breadcrumbs-prefix-cls}-@{s-32} {
43+
font-size: 20px;
44+
45+
i {
46+
top: 4px;
47+
font-size: 28px;
48+
}
3549
}
36-
&.@{breadcrumbs-prefix-cls}-@{s-48} .@{breadcrumbs-prefix-cls}-icon {
37-
font-size: 24px;
50+
&.@{breadcrumbs-prefix-cls}-@{s-40} {
51+
font-size: 22px;
52+
53+
i {
54+
top: 4px;
55+
font-size: 36px;
56+
}
3857
}
39-
&.@{breadcrumbs-prefix-cls}-@{s-60} .@{breadcrumbs-prefix-cls}-icon {
40-
font-size: 30px;
58+
&.@{breadcrumbs-prefix-cls}-@{s-48} {
59+
font-size: 26px;
60+
61+
i {
62+
top: 5px;
63+
font-size: 44px;
64+
}
65+
}
66+
&.@{breadcrumbs-prefix-cls}-@{s-60} {
67+
font-size: 32px;
68+
69+
i {
70+
top: 6px;
71+
font-size: 56px;
72+
}
4173
}
4274
&.@{breadcrumbs-prefix-cls}-default {
4375
width: 24px;
4476
height: 24px;
77+
font-size: 16px;
78+
4579
.@{breadcrumbs-prefix-cls}-icon {
46-
font-size: 12px;
80+
top: 3px;
81+
font-size: 20px;
4782
}
4883
}
4984
&.@{breadcrumbs-prefix-cls}-small {
5085
width: 16px;
5186
height: 16px;
87+
font-size: 14px;
88+
5289
.@{breadcrumbs-prefix-cls}-icon {
53-
font-size: 12px;
54-
transform: scale(0.75);
90+
top: 2px;
91+
font-size: 16px;
5592
}
5693
}
5794
&.@{breadcrumbs-prefix-cls}-large {
5895
width: 40px;
5996
height: 40px;
97+
font-size: 22px;
98+
6099
.@{breadcrumbs-prefix-cls}-icon {
61-
font-size: 18px;
100+
top: 4px;
101+
font-size: 36px;
62102
}
63103
}
64104
&.@{breadcrumbs-prefix-cls}-circle,

‎src/components/badge/demos/basic-badge.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function TextBox() {
1919
const commonStyle = {
2020
position: 'absolute',
2121
right: -22,
22-
top: -6
22+
top: -9
2323
};
2424

2525
class BadgeDemos extends React.Component {
@@ -77,6 +77,10 @@ class BadgeDemos extends React.Component {
7777
<TextBox/>
7878
<Badge mode="number" type="fail" isSquare number="NEW" style={commonStyle} />
7979
</div>
80+
<div style={{ position: 'relative' }}>
81+
<TextBox/>
82+
<Badge mode="number" type="fail" number="99+" style={commonStyle} />
83+
</div>
8084
</div>
8185

8286
<h4>dot 模式</h4>

‎src/components/badge/index.less‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@
2929
&.@{breadcrumbs-prefix-cls}-number {
3030
.number-container {
3131
display: inline-block;
32-
height: 8px;
3332
min-width: 8px;
34-
padding: 4px;
33+
height: 20px;
34+
line-height: 20px;
35+
padding: 0 6px;
3536
width: fit-content;
36-
line-height: 8px;
37-
border-radius: 8px;
37+
border-radius: 10px;
3838
color: @color-white;
3939
text-align: center;
4040
font-size: 12px;

‎src/components/c-picker/demos/more-picker.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ class DatePickerDemo extends React.Component {
7272
</Form.Item>
7373
<Form.Item label="年份选择器">
7474
<YearPicker
75+
style={{ width: 160 }}
7576
value={year}
7677
onChange={this.onYearChange}
7778
disabled={disabled}
@@ -84,6 +85,7 @@ class DatePickerDemo extends React.Component {
8485
</Form.Item>
8586
<Form.Item label="年月选择器">
8687
<MonthPicker
88+
style={{ width: 160 }}
8789
value={month}
8890
onChange={this.onMonthChange}
8991
disabled={disabled}
@@ -98,6 +100,7 @@ class DatePickerDemo extends React.Component {
98100
</Form.Item>
99101
<Form.Item label="周选择器">
100102
<WeekPicker
103+
style={{ width: 160 }}
101104
value={week}
102105
onChange={this.onWeekChange}
103106
disabled={disabled}
@@ -109,6 +112,7 @@ class DatePickerDemo extends React.Component {
109112
</Form.Item>
110113
<Form.Item label="季度选择器">
111114
<QuarterPicker
115+
style={{ width: 160 }}
112116
value={quarter}
113117
onChange={this.onQuarterChange}
114118
disabled={disabled}
@@ -119,8 +123,9 @@ class DatePickerDemo extends React.Component {
119123
</Form.Item>
120124
<Form.Item label="实现【月-日】选择">
121125
<DatePicker
126+
style={{ width: 160 }}
122127
value={monthDay}
123-
format="MM-DD"
128+
format="MM-DD"
124129
onChange={this.onMonthDayChange}
125130
disabled={disabled}
126131
/>

0 commit comments

Comments
 (0)