Skip to content

Commit 9b73966

Browse files
wkylinwkylin
committed
feat: desc box
1 parent 976d189 commit 9b73966

5 files changed

Lines changed: 193 additions & 0 deletions

File tree

‎src/components/stateless/DescBox/index.jsx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React from 'react'
2+
import { Row, Col } from 'antd'
3+
import RadioInput from '@stateless/RadioInput'
4+
import styles from './index.module.less'
5+
6+
const DescBox = () => {
7+
return (
8+
<div className={styles.descWrapper}>
9+
<Row gutter={20}>
10+
<Col span={12}>
11+
<div className={styles.descBox}>
12+
<div className={styles.descLabel}>客户名称:</div>
13+
<div className={styles.descContentl}>客户名称客户名称客户名称客户名称客户名称</div>
14+
</div>
15+
<div className={styles.descBox}>
16+
<div className={styles.descLabel}>法人姓名:</div>
17+
<div className={styles.descContentl}>王甜甜</div>
18+
</div>
19+
<div className={styles.descBox}>
20+
<div className={styles.descLabel}>办公地址:</div>
21+
<div className={styles.descContentl}>xx街道xx办事处</div>
22+
</div>
23+
<div className={styles.descBox}>
24+
<div className={styles.descLabel}>注册地址:</div>
25+
<div className={styles.descContentl}>广东省深圳南山区</div>
26+
</div>
27+
<div className={styles.descBox}>
28+
<div className={styles.descLabel}>行业分类:</div>
29+
<div className={styles.descContentl}>产权交易</div>
30+
</div>
31+
</Col>
32+
<Col span={12}>
33+
<div className={styles.descBox}>
34+
<div className={styles.descLabel}>客户性质:</div>
35+
<div className={styles.descContent}>
36+
<div className={styles.descItem}>
37+
<div className={styles.descItemBox}>
38+
<RadioInput text="政府部门" checked="true" />
39+
</div>
40+
<div className={styles.descItemBox}>
41+
<RadioInput text="事业单位" />
42+
</div>
43+
<div className={styles.descItemBox}>
44+
<RadioInput text="国有企业（央属）" />
45+
</div>
46+
</div>
47+
<div className={styles.descItem}>
48+
<div className={styles.descItemBox}>
49+
<RadioInput text="国有企业（深圳市属）" />
50+
</div>
51+
<div className={styles.descItemBox}>
52+
<RadioInput text="国有企业（深圳区属）" />
53+
</div>
54+
<div className={styles.descItemBox}>
55+
<RadioInput text="国有企业（外地国企）" />
56+
</div>
57+
</div>
58+
<div className={styles.descItem}>
59+
<div className={styles.descItemBox}>
60+
<RadioInput text="股份公司(集体企业)" />
61+
</div>
62+
<div className={styles.descItemBox}>
63+
<RadioInput text="民营企业" />
64+
</div>
65+
<div className={styles.descItemBox}>
66+
<RadioInput text="社会团体" />
67+
</div>
68+
</div>
69+
<div className={`${styles.descItem} ${styles.lastItem}`}>
70+
<div className={styles.descItemBox}>
71+
<RadioInput text="外资/合资企业" />
72+
</div>
73+
<div className={styles.descItemBox}>
74+
<RadioInput text="金融机构" />
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
<div className={styles.descBox}>
80+
<div className={styles.descLabel}>企业规模:</div>
81+
<div className={styles.descContent}>
82+
<div className={`${styles.descItem} ${styles.descItemNormal} ${styles.lastItem}`}>
83+
<div className={styles.descItemBox}>
84+
<RadioInput text="大型企业" checked="true" />
85+
</div>
86+
<div className={styles.descItemBox}>
87+
<RadioInput text="中型企业" />
88+
</div>
89+
<div className={styles.descItemBox}>
90+
<RadioInput text="微型企业" />
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</Col>
96+
</Row>
97+
</div>
98+
)
99+
}
100+
101+
export default DescBox

‎src/components/stateless/DescBox/index.module.less‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
.descWrapper {
2+
padding: 10px;
3+
4+
.descBox {
5+
display: flex;
6+
align-items: flex-start;
7+
margin-bottom: 10px;
8+
font-size: 14px;
9+
10+
.descLabel {
11+
flex: 0 0 160px;
12+
color: #666;
13+
text-align: right;
14+
margin-right: 10px;
15+
}
16+
17+
.descContent {
18+
flex: 1;
19+
text-align: left;
20+
color: #333;
21+
22+
.descItem {
23+
margin-bottom: 10px;
24+
display: flex;
25+
flex-wrap: wrap;
26+
align-items: flex-start;
27+
justify-content: flex-start;
28+
29+
.descItemBox {
30+
width: 33.33%;
31+
}
32+
}
33+
34+
.descItemNormal {
35+
.descItemBox {
36+
width: auto;
37+
margin-right: 20px;
38+
}
39+
}
40+
41+
.descItem.lastItem {
42+
margin-bottom: 0;
43+
}
44+
}
45+
}
46+
}

‎src/components/stateless/RadioInput/index.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
import styles from './index.module.less'
3+
4+
const RadioInput = ({ text = '单选', checked = false }) => {
5+
return (
6+
<div className={styles.radioContainer}>
7+
{text}
8+
<span className={checked ? styles.checked : styles.checkmark}></span>
9+
</div>
10+
)
11+
}
12+
13+
export default RadioInput

‎src/components/stateless/RadioInput/index.module.less‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.radioContainer {
2+
display: block;
3+
position: relative;
4+
padding-left: 20px;
5+
cursor: pointer;
6+
user-select: none;
7+
font-size: 14px;
8+
color: #333;
9+
}
10+
11+
.radioContainer .checkmark {
12+
position: absolute;
13+
top: 3px;
14+
left: 0;
15+
height: 13px;
16+
width: 13px;
17+
background-color: #efefef;
18+
border-radius: 50%;
19+
border: 3px solid #dfe4ed;
20+
}
21+
22+
.radioContainer .checked {
23+
position: absolute;
24+
top: 3px;
25+
left: 0;
26+
height: 13px;
27+
width: 13px;
28+
background-color: #999;
29+
border-radius: 50%;
30+
border: 3px solid #efefef;
31+
}

‎src/pages/demo/index.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import StarBack from '@stateless/StarBackground'
1010
// import OrbitingCirclesDemo from '@stateless/OrbitingCircles'
1111
import FixTabs from '@stateless/FixTabs'
1212
import TagCard from '@stateless/TagCard'
13+
import DescBox from '@stateless/DescBox'
1314
import StatisticCard from '@stateless/StatisticCard'
1415
import TransferHistory from '@stateless/TransferHistory'
1516
import StickyCard from '@stateless/StickyCard'
@@ -401,6 +402,7 @@ const ProDemo = () => {
401402
</div>
402403
</div>
403404
</section>
405+
<DescBox />
404406
<TagCard tagCardList={tagCardList} showMax={6} />
405407
<section className={styles['section-gradient']}>
406408
<div className={styles.wave} />

0 commit comments

Comments
 (0)