import React, { useState, useEffect } from 'react';
|
import { useHistory } from 'react-router-dom';
|
import NavBarPage from '../../components/NavBarPage';
|
import MySearchBar from "../../components/MySearchBar";
|
import ModalDown from "../../components/ModalDown";
|
import "./index.less";
|
import { hasMore_1 } from "../../assets/img";
|
|
|
|
|
|
const CitywideView = ({ dataList }) => {
|
const history = useHistory();
|
// const [search, setSearch] = useState({ keyword: '', page: 1, size: 10 });
|
const [screenModal, setScreenModal] = useState({
|
dataList: dataList,
|
visible: false,
|
});
|
|
|
const [isDropdownOpen, setDropdownOpen] = useState(false);
|
|
const toggleDropdown = () => {
|
setDropdownOpen(!isDropdownOpen);
|
console.log("Dropdown clicked!"); // 在这里添加打印语句
|
};
|
|
function handleScreen(data, list) {
|
setScreenModal({ dataList: list, visible: false });
|
}
|
|
|
|
useEffect(() => {
|
|
}, []);
|
|
return (
|
<>
|
<div className="search-searchBar">
|
<MySearchBar
|
buttonTitle='筛选'
|
showButton={true}
|
showFilterOutlined={true}
|
onClickRightAction={() => {
|
setScreenModal({ ...screenModal, visible: true });
|
}}
|
onOpenSearch={() => {
|
history.push("/ssim/registeredPop/search");
|
}}
|
/>
|
<div style={{ display: 'flex', justifyContent: 'center' }} onClick={toggleDropdown}>
|
<div style={{ width: '51px', height: '7px', backgroundColor: '#fff', borderBottomLeftRadius: '25.5px 7px', borderBottomRightRadius: '25.5px 7px' }}
|
|
>
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
<img
|
style={{ width: '7px', height: '4px' }}
|
src={hasMore_1}
|
alt=""
|
srcset=""
|
/>
|
</div>
|
<div>
|
{isDropdownOpen && (
|
<div style={{ backgroundColor: '#fff' }}>
|
下拉页面内容下拉页面内容下拉页面内容下拉页面内容下拉页面内容下拉页面内容下拉页面内容下拉页面内容下拉页面内容下拉页面内容
|
</div>
|
)}
|
</div>
|
</div>
|
</div>
|
|
<div style={{ marginLeft: '16px' }}>
|
<div className='search-searchBar-grid'>
|
<div>海口市</div>
|
<div>2365221人</div>
|
</div>
|
<div className='search-searchBar-grid-box'>
|
<div className='search-searchBar-grid-box-title'>
|
<div>美兰区</div>
|
<div>823165人</div>
|
</div>
|
<div style={{ flex: 1 }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '8px' }}>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className='search-searchBar-grid-box'>
|
<div className='search-searchBar-grid-box-title'>
|
<div>美兰区</div>
|
<div>823165人</div>
|
</div>
|
<div style={{ flex: 1 }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '8px' }}>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className='search-searchBar-grid-box'>
|
<div className='search-searchBar-grid-box-title'>
|
<div>龙华区</div>
|
<div>823165人</div>
|
</div>
|
<div style={{ flex: 1 }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '8px' }}>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className='search-searchBar-grid-box'>
|
<div className='search-searchBar-grid-box-title'>
|
<div>秀英区</div>
|
<div>823165人</div>
|
</div>
|
<div style={{ flex: 1 }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '8px' }}>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className='search-searchBar-grid-box'>
|
<div className='search-searchBar-grid-box-title'>
|
<div>琼山区</div>
|
<div>823165人</div>
|
</div>
|
<div style={{ flex: 1 }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '8px' }}>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div className='search-searchBar-grid-box'>
|
<div className='search-searchBar-grid-box-title'>
|
<div>桂林洋</div>
|
<div>823165人</div>
|
</div>
|
<div style={{ flex: 1 }}>
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginLeft: '8px' }}>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
<div className='search-searchBar-grid-box-value'>
|
<div>白龙街道</div>
|
<div>259633人</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<ModalDown
|
dataList={screenModal.dataList}
|
visible={screenModal.visible}
|
visibleOnClick={() =>
|
setScreenModal({ ...screenModal, visible: false })
|
}
|
onConfirm={handleScreen}
|
/>
|
|
</>
|
)
|
|
}
|
|
export default CitywideView;
|
