You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
5.7 KiB
124 lines
5.7 KiB
import React from "react";
|
|
import {Container,Row,Col,Card,ListGroup,Button,Pagination} from "react-bootstrap";
|
|
import {ActiveForm} from "../entity";
|
|
/**
|
|
* 首页
|
|
*/
|
|
export class IndexMenu extends React.Component<any, any>{
|
|
|
|
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.state={
|
|
activeList:[],
|
|
page:{
|
|
currentPage:1,
|
|
totalPage:1
|
|
}
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadActive()
|
|
}
|
|
|
|
loadActive(){
|
|
this.setState({
|
|
activeList:[[{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
|
|
},{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
|
|
},{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
|
|
}],[{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
|
|
},{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
|
|
},{
|
|
activeId: 123,
|
|
//活动标题
|
|
title: "活动标题",
|
|
//活动内容
|
|
content: "活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容",
|
|
//活动图片
|
|
activeImg: "https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg"
|
|
}]]
|
|
})
|
|
}
|
|
|
|
|
|
render() {
|
|
const rowList=this.state.activeList.map((actives:Array<ActiveForm>,index:number)=>
|
|
<Row className="p-3" key={"row"+index}>{actives.map((active:ActiveForm,subIndex:number)=>
|
|
<Col className="col-4" key={"col"+subIndex}>
|
|
<Card>
|
|
<Card.Header>
|
|
<img src={active.activeImg} alt="活动图片" style={{width:"100px",height:"100px"}}/>
|
|
</Card.Header>
|
|
<Card.Body>
|
|
<ListGroup>
|
|
<ListGroup.Item className="bg-info" style={{color:"white",fontWeight:"bold"}}>
|
|
{active.title}
|
|
</ListGroup.Item>
|
|
<ListGroup.Item>
|
|
<p>{active.content}</p>
|
|
</ListGroup.Item>
|
|
</ListGroup>
|
|
</Card.Body>
|
|
<Card.Footer>
|
|
<Button variant="primary" className="w-100">帮助</Button>
|
|
</Card.Footer>
|
|
</Card>
|
|
</Col>)}
|
|
</Row>
|
|
)
|
|
|
|
return (
|
|
<Container className="p-5">
|
|
<div>
|
|
{rowList}
|
|
</div>
|
|
|
|
<Pagination className="justify-content-center">
|
|
{this.state.page.currentPage===1?<Pagination.First disabled/>:<Pagination.First/>}
|
|
{this.state.page.currentPage-1>0?<Pagination.Prev/>:<Pagination.Prev disabled/>}
|
|
<Pagination.Item active>{this.state.page.currentPage}</Pagination.Item>
|
|
{this.state.page.currentPage+1<this.state.page.totalPage?<Pagination.Next/>:<Pagination.Next disabled/>}
|
|
{this.state.page.currentPage===this.state.page.totalPage?<Pagination.Last disabled/>:<Pagination.Last/>}
|
|
</Pagination>
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
|