Skip to content

Commit

Permalink
✨ UI 验收问题修改
Browse files Browse the repository at this point in the history
liyuan-meng committed Dec 7, 2023
1 parent ba97009 commit 20c145f
Showing 25 changed files with 368 additions and 290 deletions.
77 changes: 55 additions & 22 deletions src/components/avatar/demos/basic-avatar.md
View file
Original file line number Diff line number Diff line change
@@ -20,34 +20,67 @@ class AvatarDemos extends React.Component {
return (
<div className="avatar-basic-demo" >
<div>
<span>16px</span>
<span>24px</span>
<span>32px</span>
<span>40px</span>
<span>48px</span>
<span>60px</span>
<h5>24px</h5>
<div>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={24}/>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={24} shape="square"/>
<Avatar size={24} icon={<Icon type="user-fill"/>} />
<Avatar size={24} icon={<Icon type="user-fill"/>} shape="square" />
<Avatar size={24}>A</Avatar>
<Avatar size={24} group shape="square">A</Avatar>
</div>
</div>
<div>
<div><Avatar size={16}/></div>
<div><Avatar size={24}/></div>
<div><Avatar size={32}/></div>
<div><Avatar size={40}/></div>
<div><Avatar size={48}/></div>
<div><Avatar size={60}/></div>
<h5>32px</h5>
<div>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={32}/>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={32} shape="square"/>
<Avatar size={32} icon={<Icon type="user-fill"/>} />
<Avatar size={32} icon={<Icon type="user-fill"/>} shape="square" />
<Avatar size={32}>A</Avatar>
<Avatar size={32} group shape="square">A</Avatar>
</div>
</div>
<div>
<div><Avatar size={16} group shape="square"/></div>
<div><Avatar size={24} group shape="square"/></div>
<div><Avatar size={32} group shape="square"/></div>
<div><Avatar size={40} group shape="square"/></div>
<div><Avatar size={48} group shape="square"/></div>
<div><Avatar size={60} group shape="square"/></div>
<h5>40px</h5>
<div>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={40}/>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={40} shape="square"/>
<Avatar size={40} icon={<Icon type="user-fill"/>} />
<Avatar size={40} icon={<Icon type="user-fill"/>} shape="square" />
<Avatar size={40}>A</Avatar>
<Avatar size={40} group shape="square">A</Avatar>
</div>
</div>
<div>
<div><Avatar size="small" shape="square"/></div>
<div><Avatar size="default" shape="square"/></div>
<div/>
<div><Avatar size="large" shape="square"/></div>
<h5>48px</h5>
<div>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={48}/>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={48} shape="square"/>
<Avatar size={48} icon={<Icon type="user-fill"/>} />
<Avatar size={48} icon={<Icon type="user-fill"/>} shape="square" />
<Avatar size={48}>A</Avatar>
<Avatar size={48} group shape="square">A</Avatar>
</div>
</div>
<div>
<h5>60px</h5>
<div>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={60}/>
<Avatar src="https://brand-guide.shuyun.com/IAM/0a06d4f03b56.png" size={60} shape="square"/>
<Avatar size={60} icon={<Icon type="user-fill"/>} />
<Avatar size={60} icon={<Icon type="user-fill"/>} shape="square" />
<Avatar size={60}>A</Avatar>
<Avatar size={60} group shape="square">A</Avatar>
</div>
</div>
<div>
<h6>size 非数字</h6>
<div>
<Avatar size="small" shape="square"/>
<Avatar size="default" shape="square"/>
<Avatar size="large" shape="square"/>
</div>
</div>
</div>

2 changes: 2 additions & 0 deletions src/components/avatar/demos/group-avatar.md
View file
Original file line number Diff line number Diff line change
@@ -33,6 +33,8 @@ class AvatarDemos extends React.Component {
<Avatar style={{ background: '#5280FF', fontSize: 10 }} size="large">
<span>User</span>
</Avatar>
<Avatar size="large">A</Avatar>
<Avatar size="large" group shape="square">B</Avatar>
</div>
</React.Fragment>
);
18 changes: 8 additions & 10 deletions src/components/avatar/demos/style.less
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
.avatar-basic-demo {
display: flex;
flex-direction: column;

> div {
display: flex;
align-items: center;
margin-bottom: 20px;
flex-direction: column;

> div {
width: 100px;
text-align: center;
}
}
> div:first-child {
> span {
width: 100px;
text-align: center;
display: flex;
align-items: center;
gap: 40px;
}
}
}
80 changes: 60 additions & 20 deletions src/components/avatar/index.less
View file
Original file line number Diff line number Diff line change
@@ -16,49 +16,89 @@
background: #d9d9d9;
font-size: 18px;
color: #ffffff;
.@{breadcrumbs-prefix-cls}-icon {
font-size: 18px;
// transform: scale(0.5);
}
&.@{breadcrumbs-prefix-cls}-@{s-16} .@{breadcrumbs-prefix-cls}-icon {
font-size: 12px;
transform: scale(0.75);
overflow: hidden;

i {
font-size: 16px;
position: relative;
color: @gray-6;
}
&.@{breadcrumbs-prefix-cls}-@{s-24} .@{breadcrumbs-prefix-cls}-icon {
font-size: 12px;
&.@{breadcrumbs-prefix-cls}-@{s-16} {
font-size: 14px;

i {
top: 3px;
font-size: 12px;
}
}
&.@{breadcrumbs-prefix-cls}-@{s-32} .@{breadcrumbs-prefix-cls}-icon {
&.@{breadcrumbs-prefix-cls}-@{s-24} {
font-size: 16px;

i {
top: 4px;
font-size: 20px;
}
}
&.@{breadcrumbs-prefix-cls}-@{s-40} .@{breadcrumbs-prefix-cls}-icon {
font-size: 18px;
&.@{breadcrumbs-prefix-cls}-@{s-32} {
font-size: 20px;

i {
top: 4px;
font-size: 28px;
}
}
&.@{breadcrumbs-prefix-cls}-@{s-48} .@{breadcrumbs-prefix-cls}-icon {
font-size: 24px;
&.@{breadcrumbs-prefix-cls}-@{s-40} {
font-size: 22px;

i {
top: 4px;
font-size: 36px;
}
}
&.@{breadcrumbs-prefix-cls}-@{s-60} .@{breadcrumbs-prefix-cls}-icon {
font-size: 30px;
&.@{breadcrumbs-prefix-cls}-@{s-48} {
font-size: 26px;

i {
top: 5px;
font-size: 44px;
}
}
&.@{breadcrumbs-prefix-cls}-@{s-60} {
font-size: 32px;

i {
top: 6px;
font-size: 56px;
}
}
&.@{breadcrumbs-prefix-cls}-default {
width: 24px;
height: 24px;
font-size: 16px;

.@{breadcrumbs-prefix-cls}-icon {
font-size: 12px;
top: 3px;
font-size: 20px;
}
}
&.@{breadcrumbs-prefix-cls}-small {
width: 16px;
height: 16px;
font-size: 14px;

.@{breadcrumbs-prefix-cls}-icon {
font-size: 12px;
transform: scale(0.75);
top: 2px;
font-size: 16px;
}
}
&.@{breadcrumbs-prefix-cls}-large {
width: 40px;
height: 40px;
font-size: 22px;

.@{breadcrumbs-prefix-cls}-icon {
font-size: 18px;
top: 4px;
font-size: 36px;
}
}
&.@{breadcrumbs-prefix-cls}-circle,
6 changes: 5 additions & 1 deletion src/components/badge/demos/basic-badge.md
View file
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ function TextBox() {
const commonStyle = {
position: 'absolute',
right: -22,
top: -6
top: -9
};

class BadgeDemos extends React.Component {
@@ -77,6 +77,10 @@ class BadgeDemos extends React.Component {
<TextBox/>
<Badge mode="number" type="fail" isSquare number="NEW" style={commonStyle} />
</div>
<div style={{ position: 'relative' }}>
<TextBox/>
<Badge mode="number" type="fail" number="99+" style={commonStyle} />
</div>
</div>

<h4>dot 模式</h4>
8 changes: 4 additions & 4 deletions src/components/badge/index.less
View file
Original file line number Diff line number Diff line change
@@ -29,12 +29,12 @@
&.@{breadcrumbs-prefix-cls}-number {
.number-container {
display: inline-block;
height: 8px;
min-width: 8px;
padding: 4px;
height: 20px;
line-height: 20px;
padding: 0 6px;
width: fit-content;
line-height: 8px;
border-radius: 8px;
border-radius: 10px;
color: @color-white;
text-align: center;
font-size: 12px;
7 changes: 6 additions & 1 deletion src/components/c-picker/demos/more-picker.md
View file
Original file line number Diff line number Diff line change
@@ -72,6 +72,7 @@ class DatePickerDemo extends React.Component {
</Form.Item>
<Form.Item label="年份选择器">
<YearPicker
style={{ width: 160 }}
value={year}
onChange={this.onYearChange}
disabled={disabled}
@@ -84,6 +85,7 @@ class DatePickerDemo extends React.Component {
</Form.Item>
<Form.Item label="年月选择器">
<MonthPicker
style={{ width: 160 }}
value={month}
onChange={this.onMonthChange}
disabled={disabled}
@@ -98,6 +100,7 @@ class DatePickerDemo extends React.Component {
</Form.Item>
<Form.Item label="周选择器">
<WeekPicker
style={{ width: 160 }}
value={week}
onChange={this.onWeekChange}
disabled={disabled}
@@ -109,6 +112,7 @@ class DatePickerDemo extends React.Component {
</Form.Item>
<Form.Item label="季度选择器">
<QuarterPicker
style={{ width: 160 }}
value={quarter}
onChange={this.onQuarterChange}
disabled={disabled}
@@ -119,8 +123,9 @@ class DatePickerDemo extends React.Component {
</Form.Item>
<Form.Item label="实现【月-日】选择">
<DatePicker
style={{ width: 160 }}
value={monthDay}
format="MM-DD"
format="MM-DD"
onChange={this.onMonthDayChange}
disabled={disabled}
/>
Loading

0 comments on commit 20c145f

Please sign in to comment.