71 lines
1.5 KiB
JavaScript
71 lines
1.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PanelBox from '../../components/PanelBox';
|
|
import clsx from 'clsx';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { Button, Grid, makeStyles } from '@material-ui/core'
|
|
import Yb24h from './yb24h'
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
color: '#fff',
|
|
padding: '0.8rem 0',
|
|
},
|
|
|
|
tool: {
|
|
marginBottom: '1.2rem',
|
|
},
|
|
|
|
|
|
buttons: {
|
|
backgroundColor: 'red',
|
|
flexShrink: 0,
|
|
},
|
|
legend: {
|
|
backgroundColor: 'green',
|
|
},
|
|
|
|
checklabel: {
|
|
justifyContent: 'flex-start',
|
|
}
|
|
});
|
|
|
|
export default function AreaDrp({ style }) {
|
|
const classes = useStyles();
|
|
const [tab,setTab] = useState('1')
|
|
|
|
|
|
return (
|
|
<PanelBox
|
|
style={style}
|
|
title="天气预报"
|
|
color="blue"
|
|
>
|
|
<div className={classes.root} style={{marginBottom:'-1.5rem'}}>
|
|
<Grid container className={classes.tool}>
|
|
<Grid item xs style={{ marginRight: '0.5rem' }}>
|
|
<Button
|
|
fullWidth
|
|
color="primary"
|
|
variant={tab === '1' ? 'contained' : 'outlined'}
|
|
onClick={() => setTab('1')}
|
|
>24小时预报</Button>
|
|
</Grid>
|
|
<Grid item xs>
|
|
<Button
|
|
fullWidth
|
|
color="primary"
|
|
variant={tab === '2' ? 'contained' : 'outlined'}
|
|
onClick={() => setTab('2')}
|
|
>短时雷达预报</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</div>
|
|
{
|
|
tab==='1'?
|
|
<Yb24h/>
|
|
:null
|
|
}
|
|
</PanelBox>
|
|
)
|
|
}
|