finish index page (readonly)
This commit is contained in:
parent
0d1646962f
commit
4b55008f16
|
@ -36,8 +36,8 @@ const SwiperImage = styled.div`
|
|||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const Filters = styled.div`
|
||||
|
@ -45,6 +45,7 @@ const Filters = styled.div`
|
|||
height: 300px;
|
||||
width: 1150px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 60px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 2px 12px #00000060;
|
||||
padding: 30px;
|
||||
|
@ -134,6 +135,37 @@ const SearchBarInput = styled.input`
|
|||
outline: none;
|
||||
`;
|
||||
|
||||
const PageButtons = styled.div`
|
||||
margin: 60px auto;
|
||||
width: fit-content
|
||||
`;
|
||||
|
||||
const PageButton = styled.button`
|
||||
background: #dedede;
|
||||
width: 60px; height: 60px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 1px 2px #20202060;
|
||||
margin-right: 32px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
|
||||
transition: 350ms ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 4px #20202060;
|
||||
}
|
||||
`;
|
||||
|
||||
const CurrentPage = styled(PageButton)`
|
||||
background: 0;
|
||||
border: 2px solid royalblue;
|
||||
`;
|
||||
|
||||
const IndexPageRoot = styled.div`
|
||||
width: 1150px;
|
||||
margin: 50px auto
|
||||
`;
|
||||
|
||||
const FiltersForm = () => {
|
||||
|
||||
const apart_sizes = [
|
||||
|
@ -279,15 +311,16 @@ export default class IndexPage extends React.Component {
|
|||
|
||||
render() {
|
||||
const { page, pageSize } = this.state;
|
||||
const pages = this.state.apartments.length / pageSize;
|
||||
|
||||
const current_data = this.state.apartments.slice((page * pageSize), (page * pageSize) + pageSize);
|
||||
console.log(current_data);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{ height: 30 }} />
|
||||
<IndexPageRoot>
|
||||
<Swiper
|
||||
spaceBetween={4}
|
||||
style={{ width: 800, height: 250, borderRadius: 20 }}
|
||||
style={{ width: 1150, height: 200, borderRadius: 20 }}
|
||||
|
||||
modules={[ Scrollbar, Navigation ]}
|
||||
scrollbar={{ enabled: true, draggable: true }}
|
||||
|
@ -318,7 +351,26 @@ export default class IndexPage extends React.Component {
|
|||
</> :
|
||||
null
|
||||
}
|
||||
</>
|
||||
|
||||
<PageButtons>
|
||||
{
|
||||
[...Array(pages)].map((_, i) => {
|
||||
if (i > 3 && i != pageSize - 1) {
|
||||
if (i == 4)
|
||||
return <PageButton>...</PageButton>;
|
||||
return null;
|
||||
}
|
||||
|
||||
if (i == page)
|
||||
return <CurrentPage>{i + 1}</CurrentPage>
|
||||
|
||||
return (
|
||||
<PageButton>{i + 1}</PageButton>
|
||||
);
|
||||
})
|
||||
}
|
||||
</PageButtons>
|
||||
</IndexPageRoot>
|
||||
);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue