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
import { Divider } from 'antd';
import './index.less';
function weather({ weather }) {
const obj = {
晴: (
<div className="icon sunny">
<div className="sun">
<div className="rays"></div>
</div>
</div>
),
阴: (
<div className="icon cloudy">
<div className="cloud"></div>
</div>
),
霾: (
<div className="icon cloudy">
<div className="cloud"></div>
<div className="cloud"></div>
</div>
),
雾: (
<div className="icon cloudy">
<div className="cloud"></div>
<div className="cloud"></div>
</div>
),
云: (
<div className="icon cloudy">
<div className="cloud"></div>
<div className="cloud"></div>
</div>
),
雷: (
<div className="icon thunder-storm">
<div className="cloud"></div>
<div className="lightning">
<div className="bolt"></div>
<div className="bolt"></div>
</div>
</div>
),
雪: (
<div className="icon flurries">
<div className="cloud"></div>
<div className="snow">
<div className="flake"></div>
<div className="flake"></div>
</div>
</div>
),
雨: (
<div className="icon rainy">
<div className="cloud"></div>
<div className="rain"></div>
</div>
),
};
return (
<div className="center">
{weather?.map((it, i) => {
if (!it?.value) return null;
let keyarr = Object.keys(obj);
let curkey = keyarr.filter((item) => it?.value?.indexOf(item) !== -1)[0];
return (
<div
key={i}
className="hoverablec"
style={{ opacity: i === 0 ? 1 : 0.5, cursor: 'pointer' }}
onClick={() => {
window.open('https://www.baidu.com/s?wd=%E5%A4%A9%E6%B0%94');
}}
>
<span>{it?.text}</span>
{obj[curkey]}
{i === 0 && (
<Divider type="vertical" style={{ marginRight: 12, height: 20, marginTop: 0}} />
)}
</div>
);
})}
</div>
);
}
export default weather;