import * as React from 'react' import { Layout, Menu, Carousel } from 'antd' import './index.less' import tu1 from '../../assets/images/waterInfor/img/tu1.jpg' import tu2 from '../../assets/images/waterInfor/img/tu2.jpg' import tu3 from '../../assets/images/waterInfor/img/tu3.jpg' const { Sider, Content } = Layout; interface IProps { } interface IState { index?: any } class WaterInfoDetailPage extends React.Component<IProps, IState>{ slider:any = undefined; //解决slider报错 constructor(props) { super(props) this.state = { index: 1 } } // 点击右侧菜单栏触发的事件 onOpenChange = ({ key }) => { // console.log(this.slider) // this.slider.slickGoTo(key) //this.slide:any = undefined; this.slider && this.slider.innerSlider.slickGoTo(key) this.setState ({ index: key }) } // onChange = ((a, b, c) => { // console.log(a, b, c); // } render() { const settings = { dots: false, }; return ( <div className="water-detail-content"> <Layout> <Content className="Carousel-content"> <Carousel ref={slider => this.slider = slider} {...settings}> <div key={1}> <img src={tu1} /> </div> <div key={2}> <img src={tu1} /> </div> <div key={3}> <img src={tu2} /> </div> <div key={4}> <img src={tu3} /> </div> </Carousel> </Content> <Sider style={{background:'#fff'}}> <Menu mode="inline" defaultSelectedKeys = {['1']} onSelect={this.onOpenChange}> <Menu.Item key="1"> {/* <span className="falg"></span> */} <span className={`${1 == this.state.index ? 'active' : 'flag'}`}></span> <span>水情</span> </Menu.Item> <Menu.Item key="2"> <span className={`${2 == this.state.index ? 'active' : 'flag'}`}></span> <span>雨情</span> </Menu.Item> <Menu.Item key="3"> <span className={`${3 == this.state.index ? 'active' : 'flag'}`}></span> <span>天气预报</span> </Menu.Item> <Menu.Item key="4"> <span className={`${4 == this.state.index ? 'active' : 'flag'}`}></span> <span>天气预报</span> </Menu.Item> <Menu.Item key="5"> <span className={`${5 == this.state.index ? 'active' : 'flag'}`}></span> <span>天气预报</span> </Menu.Item> <Menu.Item key="6"> <span className={`${6 == this.state.index ? 'active' : 'flag'}`}></span> <span>天气预报</span> </Menu.Item> <Menu.Item key="7"> <span className={`${7 == this.state.index ? 'active' : 'flag'}`}></span> <span>天气预报</span> </Menu.Item> <Menu.Item key="8"> <span className={`${8 == this.state.index ? 'active' : 'flag'}`}></span> <span>天气预报</span> </Menu.Item> <Menu.Item key="9"> <span className={`${9 == this.state.index ? 'active' : 'flag'}`}></span> <span>天气预报</span> </Menu.Item> <Menu.Item key="10"> <span className={`${10 == this.state.index ? 'active' : 'flag'}`}></span> <span>天气预报</span> </Menu.Item> <Menu.Item key="11"> <span className={`${11 == this.state.index ? 'active' : 'flag'}`}></span> <span>天气预报</span> </Menu.Item> </Menu> </Sider> </Layout> </div> ) } } export default WaterInfoDetailPage