index.js

import React, { Component } from 'react';
import { Flex, WhiteSpace, NavBar, List } from 'antd-mobile';
import './index.scss';
import Avatar from './image/avatar.png';
import Vip from './image/vip.png';
// import UnVip from './image/unVIP.png';

const Item = List.Item;
const Brief = Item.Brief;

class My extends Component {

    render() {
        return (
            <div className="flex-container">
                <Flex>
                    <Flex.Item>
                        <NavBar
                            className="my-tab"
                            mode="light"
                        >
                            我的
                        </NavBar>
                        {/* <List className="my-list">
                            <Item 
                                className="avatar-wrap" 
                                arrow="horizontal" 
                                multipleLine 
                                thumb={Avatar}
                                onClick={() => { }}>
                                <Brief>点击登录</Brief>
                            </Item>
                        </List> */}
                        <List className="my-list">
                            <Item
                                className="avatar-wrap"
                                arrow="horizontal"
                                multipleLine
                                thumb={Avatar}
                                onClick={() => { }}>
                                <Brief style={{ fontSize: "18px" }}>
                                    xuan先生
                                    <img src={Vip} alt=""/>
                                </Brief>
                                <Brief style={{fontSize: "12px"}}>学号: 410026</Brief>
                            </Item>
                            <div className="my-isvip"></div>
                            {/* <div className="my-shadow"></div> */}
                        </List>
                        <List>
                            <Item 
                                arrow="horizontal" 
                                onClick={() => { }}
                                >
                                <i className="iconfont iconiconfront-27"></i>
                                已购课程
                            </Item>
                            <Item 
                                arrow="horizontal" 
                                onClick={() => { }}
                                >
                                <i className="iconfont icongouwuche"></i>
                                购物车
                            </Item>
                            <Item 
                                arrow="horizontal" 
                                onClick={() => { }}
                                >
                                <i className="iconfont iconiconfront-24"></i>
                                课程订单
                            </Item>
                            <Item 
                                arrow="horizontal" 
                                onClick={() => { }}
                                >
                                <i className="iconfont iconiconfront-52"></i>
                                优惠券
                            </Item>
                           
                            
                        </List>
                        <List renderHeader={() => ''} > 
                            <Item
                                arrow="horizontal"
                                onClick={() => { }}
                            >
                                <i className="iconfont iconiconfront-51"></i>
                                赚奖学金
                            </Item>
                        </List>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg" />
            </div>
        )
    }

}

export default My;