import React, { useEffect, useState } from 'react'
import { Box } from '$components';
import './style.less';


function DataTop5(props) {


    return <Box title={"周边小区"} bodyPaddingTop={1} >
        <div className='_traffic_ranking'>
            <div className='_rank_title'>
                <div className='_rank_item1'>排名</div>
                <div className='_rank_item2'>小区名称</div>
                <div className='_rank_item3'>人流量<span style={{ fontSize: 14 }}>/人次</span></div>
            </div>
            
            <div className='rank_content_overflow'>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(s => {
                    return <div className='_rank_content'>
                        <div className={`_rank_item1`}>
                            <div className={`topbg${s}`}>
                                <div style={{ marginTop: -9 }}>{s}</div>

                            </div>
                        </div>
                        <div className='_rank_item2'>小区名称{s}</div>
                        <div className='_rank_item3'>{1400 - s}</div>
                    </div>
                })}
            </div>
        </div>
    </Box>
}

export default DataTop5;