TopList 排行榜

import React from 'react';
import PropTypes from 'prop-types';
import { List, Badge, Typography, Tooltip } from 'antd'
const { Item } = List;
const { Text } = Typography
const colorStyle = { marginRight: 8, backgroundColor: '#314759'}
const whiteStyle = {
  ...colorStyle,
  backgroundColor: '#fff',
  color: '#999',
  boxShadow: '0 0 0 1px #d8d8d8 inset',
}
function SwitchText({value}) {
  if(value.length > 8) {
    return (
      <Tooltip title={value}>
        <Text ellipsis>{value}</Text>
      </Tooltip>
    )
  }
  return <Text ellipsis>{value}</Text>
}
function ListItem({label, value, index}) {
  const style = (index < 3) ? colorStyle : whiteStyle
  return (
    <Item>
      <Badge count={index+1} style={style}/>
      <SwitchText value={label}/>
      <span className='number'>{value}</span>
    </Item>
  )
}
TopList.propTypes = {
  dataSource: PropTypes.array.isRequired,
  title: PropTypes.string,
  loading: PropTypes.bool,
};
TopList.defaultProps = {
  title: '',
  loading: false,
}
function TopList({title, dataSource, loading}) {
  const header = title && <header><b>{title}</b></header>
  const attrs  = {
    className: 'top-list',
    size: 'small',
    split: false,
    header,
    loading,
    dataSource,
    renderItem: (item, i) => <ListItem {...item} index={i} key={i}/>,
  }
  return (
    <List {...attrs}/>
  );
}
export default TopList;

.top-list 样式

.top-list {
  &.ant-list-sm .ant-list-item {
    justify-content: flex-start;
    padding: 8px 32px 8px 8px;
  }
  .number {
    position: absolute;
    right: 0;
  }
}