qc-OfficialWebsite/src/pages/StaffStyle/Activities.jsx

import QueueAnim from 'rc-queue-anim';
import PropTypes from 'prop-types';


let dataArray = [
    { image: 'http://questnet.cn/image/sthd/21.png' },
    { image: 'http://questnet.cn/image/sthd/22.png' },
    { image: 'http://questnet.cn/image/sthd/23.png' },
    { image: 'http://questnet.cn/image/sthd/24.png' },
    { image: 'http://questnet.cn/image/sthd/25.png' },
    { image: 'http://questnet.cn/image/sthd/26.png' },
    { image: 'http://questnet.cn/image/sthd/27.png' },
    { image: 'http://questnet.cn/image/sthd/28.png' },
    { image: 'http://questnet.cn/image/sthd/29.png' },
    { image: 'http://questnet.cn/image/sthd/30.png' },
    { image: 'http://questnet.cn/image/sthd/31.png' },
    { image: 'http://questnet.cn/image/sthd/32.png' },
    { image: 'http://questnet.cn/image/sthd/33.png' },
    { image: 'http://questnet.cn/image/sthd/34.png' },
    { image: 'http://questnet.cn/image/sthd/35.png' },
];
class Activities extends React.Component {
    static propTypes = {
        className: PropTypes.string,
    };

    static defaultProps = {
        className: 'pic-details-demo',
    };

    constructor(props) {
        super(props);
        this.state = {
            picOpen: {},
        };
    }


    render() {
        return (
            <div>
                <QueueAnim type="bottom" className={`${this.props.className}-title`}>
                    <h1 key="h1">社团活动</h1>
                    <p>公司有羽毛球社，摄影社，兵乓球社等各种社团，不定期举办比赛，各种奖品等着大家</p>
                </QueueAnim>
                <QueueAnim
                    component="div"
                    className={`${this.props.className}-image-wrapper`}
                    interval={0}
                    type="bottom"
                >
                    {
                        dataArray.map((item, index) => {
                            if(this.props.isMobile && index + 1 === 15) {
                                return null
                            }
                            return <img src={item.image} key={index}/>
                        })
                    }
                </QueueAnim>
            </div>
        );
    }
}
export default Activities