/
index.jsx
executable file
·97 lines (91 loc) · 3.32 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React, { useState, useEffect } from 'react';
import IceContainer from '@icedesign/container';
import { Progress, Grid } from '@alifd/next';
import { enquireScreen } from 'enquire-js';
import styles from './index.module.scss';
const { Row, Col } = Grid;
export default function ProgressDataList() {
const [isMobile, setMobile] = useState(false);
const enquireScreenRegister = () => {
const mediaCondition = 'only screen and (max-width: 720px)';
enquireScreen((mobile) => {
setMobile(mobile);
}, mediaCondition);
};
useEffect(() => {
enquireScreenRegister();
}, []);
return (
<IceContainer>
<Row wrap>
<Col xxs="24" s="12" l="6" className={styles.dataItem}>
<div className={styles.dataTitle}>总收入</div>
<div className={styles.dataIntro}>所有项目收入</div>
<div className={styles.dataValue}>¥10M</div>
<div className={styles.dataProgress}>
<Progress percent={30} />
</div>
<div className={styles.dataExtra}>
<div>
<a className={styles.settingsLink} href="#">
设置
</a>
</div>
<div>30%</div>
</div>
{!isMobile && <div className={styles.verticalLine}/>}
</Col>
<Col xxs="24" s="12" l="6" className={styles.dataItem}>
<div className={styles.dataTitle}>今年新用户</div>
<div className={styles.dataIntro}>今年新注册用户</div>
<div className={styles.dataValue}>2000</div>
<div className={styles.dataProgress}>
<Progress percent={80} />
</div>
<div className={styles.dataExtra}>
<div>
<a className={styles.settingsLink} href="#">
设置
</a>
</div>
<div>80%</div>
</div>
{!isMobile && <div className={styles.verticalLine} />}
</Col>
<Col xxs="24" s="12" l="6" className={styles.dataItem}>
<div className={styles.dataTitle}>本月新订单</div>
<div className={styles.dataIntro}>本月新增订单数</div>
<div className={styles.dataValue}>579</div>
<div className={styles.dataProgress}>
<Progress percent={60} />
</div>
<div className={styles.dataExtra}>
<div>
<a className={styles.settingsLink} href="#">
设置
</a>
</div>
<div>60%</div>
</div>
{!isMobile && <div className={styles.verticalLine} />}
</Col>
<Col xxs="24" s="12" l="6" className={styles.dataItem}>
<div className={styles.dataTitle}>用户反馈待处理</div>
<div className={styles.dataIntro}>用户反馈待处理的数量</div>
<div className={styles.dataValue}>10</div>
<div className={styles.dataProgress}>
<Progress percent={10} />
</div>
<div className={styles.dataExtra}>
<div>
<a className={styles.settingsLink} href="#">
设置
</a>
</div>
<div>10%</div>
</div>
</Col>
</Row>
</IceContainer>
);
}