Skip to content

Commit 5c26aa1

Browse files
anlia260anlia260
committed
feat: update basic
1 parent 07409e5 commit 5c26aa1

File tree

8 files changed

+76
-332
lines changed

8 files changed

+76
-332
lines changed

‎src/component/common/Avatar/index.less

Lines changed: 3 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,8 @@
11
@import '../../../assets/css/common/index';
2-
.header-box {
3-
position: fixed;
4-
width: 100%;
5-
top: 0;
6-
box-shadow: 0 0 16px 0 #ccc;
7-
background-color: #ffffff;
8-
z-index: 10;
2+
.avatar-contanier {
93
:global {
10-
.cr-header {
11-
width: 1220px;
12-
margin: 0 auto;
13-
display: flex;
14-
height: 80px;
15-
.cr-logo {
16-
flex-shrink: 0;
17-
18-
img {
19-
width: 214px;
20-
height: 50px;
21-
margin: 10px 20px 20px;
22-
}
23-
}
24-
25-
.cr-nav {
26-
flex: 1;
27-
margin-bottom: 8px;
28-
align-self: center;
29-
overflow: hidden;
30-
}
31-
32-
.cr-user {
33-
flex-shrink: 0;
34-
font-size: 20px;
35-
line-height: 80px;
36-
37-
> span,
38-
> i {
39-
margin: 0 15px;
40-
}
41-
42-
> i {
43-
font-weight: bold;
44-
}
45-
}
46-
47-
.ant-menu-item {
48-
font-size: 20px;
49-
color: #000;
50-
line-height: 68px;
51-
margin: 0 10px;
52-
border-bottom: 4px solid transparent;
53-
}
54-
55-
.ant-menu-item-selected,
56-
.ant-menu-item:hover {
57-
border-bottom: 4px solid @header-nav-color;
58-
color: #000000;
59-
}
60-
61-
.ant-menu-item-active .ant-menu-item-selected {
62-
border-bottom: 4px solid @header-nav-color;
63-
}
64-
65-
.ant-menu-horizontal {
66-
border: none;
67-
}
4+
.ant-avatar {
5+
margin-right: 10px;
686
}
697
}
708
}

‎src/component/common/Avatar/index.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,14 @@ import { Avatar } from 'antd';
55
export default class BasicHeader extends Component {
66
render() {
77
return (
8-
<div>
8+
<div className={styles['avatar-contanier']}>
99
<Avatar />
10+
<Avatar icon="user" />
11+
<Avatar size="large">U</Avatar>
12+
<Avatar>USER</Avatar>
13+
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
14+
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
15+
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
1016
</div>
1117
);
1218
}

‎src/component/common/Empty/index.less

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1 @@
11
@import '../../../assets/css/common/index';
2-
.header-box {
3-
position: fixed;
4-
width: 100%;
5-
top: 0;
6-
box-shadow: 0 0 16px 0 #ccc;
7-
background-color: #ffffff;
8-
z-index: 10;
9-
:global {
10-
.cr-header {
11-
width: 1220px;
12-
margin: 0 auto;
13-
display: flex;
14-
height: 80px;
15-
.cr-logo {
16-
flex-shrink: 0;
17-
18-
img {
19-
width: 214px;
20-
height: 50px;
21-
margin: 10px 20px 20px;
22-
}
23-
}
24-
25-
.cr-nav {
26-
flex: 1;
27-
margin-bottom: 8px;
28-
align-self: center;
29-
overflow: hidden;
30-
}
31-
32-
.cr-user {
33-
flex-shrink: 0;
34-
font-size: 20px;
35-
line-height: 80px;
36-
37-
> span,
38-
> i {
39-
margin: 0 15px;
40-
}
41-
42-
> i {
43-
font-weight: bold;
44-
}
45-
}
46-
47-
.ant-menu-item {
48-
font-size: 20px;
49-
color: #000;
50-
line-height: 68px;
51-
margin: 0 10px;
52-
border-bottom: 4px solid transparent;
53-
}
54-
55-
.ant-menu-item-selected,
56-
.ant-menu-item:hover {
57-
border-bottom: 4px solid @header-nav-color;
58-
color: #000000;
59-
}
60-
61-
.ant-menu-item-active .ant-menu-item-selected {
62-
border-bottom: 4px solid @header-nav-color;
63-
}
64-
65-
.ant-menu-horizontal {
66-
border: none;
67-
}
68-
}
69-
}
70-
}

‎src/component/common/Input/index.less

Lines changed: 15 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,20 @@
11
@import '../../../assets/css/common/index';
2-
.header-box {
3-
position: fixed;
4-
width: 100%;
5-
top: 0;
6-
box-shadow: 0 0 16px 0 #ccc;
7-
background-color: #ffffff;
8-
z-index: 10;
9-
:global {
10-
.cr-header {
11-
width: 1220px;
12-
margin: 0 auto;
13-
display: flex;
14-
height: 80px;
15-
.cr-logo {
16-
flex-shrink: 0;
17-
18-
img {
19-
width: 214px;
20-
height: 50px;
21-
margin: 10px 20px 20px;
22-
}
23-
}
24-
25-
.cr-nav {
26-
flex: 1;
27-
margin-bottom: 8px;
28-
align-self: center;
29-
overflow: hidden;
30-
}
31-
32-
.cr-user {
33-
flex-shrink: 0;
34-
font-size: 20px;
35-
line-height: 80px;
36-
37-
> span,
38-
> i {
39-
margin: 0 15px;
40-
}
41-
42-
> i {
43-
font-weight: bold;
44-
}
45-
}
46-
47-
.ant-menu-item {
48-
font-size: 20px;
49-
color: #000;
50-
line-height: 68px;
51-
margin: 0 10px;
52-
border-bottom: 4px solid transparent;
53-
}
54-
55-
.ant-menu-item-selected,
56-
.ant-menu-item:hover {
57-
border-bottom: 4px solid @header-nav-color;
58-
color: #000000;
59-
}
60-
61-
.ant-menu-item-active .ant-menu-item-selected {
62-
border-bottom: 4px solid @header-nav-color;
63-
}
2+
.input-container {
3+
}
644

65-
.ant-menu-horizontal {
66-
border: none;
67-
}
5+
:global {
6+
.ant-input {
7+
width: 350px;
8+
line-height: 48px;
9+
height: 48px;
10+
border-radius: 0;
11+
border-color: @primary-color;
12+
13+
&:focus,
14+
&:hover {
15+
box-shadow: none;
16+
border-color: @primary-color;
17+
border-width: 2px !important;
6818
}
6919
}
7020
}

‎src/component/common/Input/index.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import React, { Component } from 'react';
2+
23
import styles from './index.less';
3-
import { Menu, Icon } from 'antd';
4+
import { Input } from 'antd';
45

56
export default class BasicHeader extends Component {
67
render() {
7-
return <div>this is empty</div>;
8+
return (
9+
<div className={styles['input-container']}>
10+
<Input />
11+
</div>
12+
);
813
}
914
}

‎src/component/common/Popover/index.less

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1 @@
11
@import '../../../assets/css/common/index';
2-
.header-box {
3-
position: fixed;
4-
width: 100%;
5-
top: 0;
6-
box-shadow: 0 0 16px 0 #ccc;
7-
background-color: #ffffff;
8-
z-index: 10;
9-
:global {
10-
.cr-header {
11-
width: 1220px;
12-
margin: 0 auto;
13-
display: flex;
14-
height: 80px;
15-
.cr-logo {
16-
flex-shrink: 0;
17-
18-
img {
19-
width: 214px;
20-
height: 50px;
21-
margin: 10px 20px 20px;
22-
}
23-
}
24-
25-
.cr-nav {
26-
flex: 1;
27-
margin-bottom: 8px;
28-
align-self: center;
29-
overflow: hidden;
30-
}
31-
32-
.cr-user {
33-
flex-shrink: 0;
34-
font-size: 20px;
35-
line-height: 80px;
36-
37-
> span,
38-
> i {
39-
margin: 0 15px;
40-
}
41-
42-
> i {
43-
font-weight: bold;
44-
}
45-
}
46-
47-
.ant-menu-item {
48-
font-size: 20px;
49-
color: #000;
50-
line-height: 68px;
51-
margin: 0 10px;
52-
border-bottom: 4px solid transparent;
53-
}
54-
55-
.ant-menu-item-selected,
56-
.ant-menu-item:hover {
57-
border-bottom: 4px solid @header-nav-color;
58-
color: #000000;
59-
}
60-
61-
.ant-menu-item-active .ant-menu-item-selected {
62-
border-bottom: 4px solid @header-nav-color;
63-
}
64-
65-
.ant-menu-horizontal {
66-
border: none;
67-
}
68-
}
69-
}
70-
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy