<template>
    <div>
        <scroller append="node" class="span1">
            <div class="icon-wrap icon-content">
                <div class="icon-box" :style="{'width': '187px'}" v-for="(key,val) in iconData">
                    <bui-icon :name="val" size="45px" class="pdl10 mb20"></bui-icon>
                    <text class="icon-text">{{val}}</text>
                    <text class="icon-text">{{key}}</text>
                </div>
            </div>
        </scroller>
    </div>
</template>

<script>
    import { buiIcon } from 'Eros/bui'
    export default {
        components: { buiIcon },
        data() {
            return {
                leftItem: {
                    icons: 'icon-back',
                },
                iconData: {
                    "icon-appreciate": "&#xe644;",
                    "icon-appreciatefill": "&#xe6e3",
                    "icon-check": "&#xe645;",
                    "icon-roundcheckfill": "&#xe656;",
                    "icon-roundcheck": "&#xe657;",
                    "icon-close": "&#xe646;",
                    "icon-roundclosefill": "&#xe658;",
                    "icon-roundclose": "&#xe659;",
                    "icon-delete": "&#xe6b4;",
                    "icon-deletefill": "&#xe6a6;",
                    "icon-add": "&#xe6da;",
                    "icon-roundadd": "&#xe6d9",
                    "icon-edit": "&#xe649;",
                    "icon-emoji": "&#xe64a;",
                    "icon-favorfill": "&#xe64b;",
                    "icon-favor": "&#xe64c;",
                    "icon-loadding": "&#xe64f;",
                    "icon-locationfill": "&#xe650;",
                    "icon-location": "&#xe651;",
                    "icon-phone": "&#xe652;",
                    "icon-roundrightfill": "&#xe65a;",
                    "icon-roundright": "&#xe65b;",
                    "icon-search": "&#xe65c;",
                    "icon-searchlist": "&#xe6fe",
                    "icon-time": "&#xe65f;",
                    "icon-timefill": "&#xe65e;",
                    "icon-taxi": "&#xe65d;",
                    "icon-unfold": "&#xe661;",
                    "icon-fold": "&#xe6de;",
                    "icon-warnfill": "&#xe662;",
                    "icon-warn": "&#xe663;",
                    "icon-camerafill": "&#xe664;",
                    "icon-camera": "&#xe665;",
                    "icon-commentfill": "&#xe666;",
                    "icon-comment": "&#xe667;",
                    "icon-likefill": "&#xe668;",
                    "icon-like": "&#xe669;",
                    "icon-notificationfill": "&#xe66a;",
                    "icon-notification": "&#xe66b;",
                    "icon-order": "&#xe66c;",
                    "icon-samefill": "&#xe66d;",
                    "icon-same": "&#xe66e;",
                    "icon-deliver": "&#xe671;",
                    "icon-evaluate": "&#xe672;",
                    "icon-pay": "&#xe673;",
                    "icon-send": "&#xe675;",
                    "icon-shop": "&#xe676;",
                    "icon-shopfill": "&#xe697;",
                    "icon-ticket": "&#xe677;",
                    "icon-left": "&#xe679;",
                    "icon-right": "&#xe6a3;",
                    "icon-cascades": "&#xe67c;",
                    "icon-discover": "&#xe67e;",
                    "icon-discoverfill": "&#xe6ba",
                    "icon-list": "&#xe682;",
                    "icon-more": "&#xe684;",
                    "icon-moreandroid": "&#xe6a5;",
                    "icon-myfill": "&#xe685;",
                    "icon-my": "&#xe686;",
                    "icon-scan": "&#xe689;",
                    "icon-settings": "&#xe68a;",
                    "icon-questionfill": "&#xe690;",
                    "icon-question": "&#xe691;",
                    "icon-form": "&#xe699;",
                    "icon-pic": "&#xe69b;",
                    "icon-picfill": "&#xe72c;",
                    "icon-filter": "&#xe69c;",
                    "icon-footprint": "&#xe69d;",
                    "icon-top": "&#xe69e;",
                    "icon-down": "&#xe703;",
                    "icon-pulldown": "&#xe69f;",
                    "icon-pullup": "&#xe6a0;",
                    "icon-refresh": "&#xe6a4;",
                    "icon-refund": "&#xe6ac;",
                    "icon-cart": "&#xe6af;",
                    "icon-cartfill": "&#xe6b9;",
                    "icon-qrcode": "&#xe6b0;",
                    "icon-remind": "&#xe6b2;",
                    "icon-profile": "&#xe6b7;",
                    "icon-profilefill": "&#xe77a;",
                    "icon-homefill": "&#xe6bb;",
                    "icon-home": "&#xe6b8;",
                    "icon-messagefill": "&#xe779;",
                    "icon-message": "&#xe6bc;",
                    "icon-addressbook": "&#xe6bd;",
                    "icon-link": "&#xe6bf;",
                    "icon-lock": "&#xe6c0;",
                    "icon-unlock": "&#xe6c2;",
                    "icon-vip": "&#xe6c3;",
                    "icon-vipcard": "&#xe6ee;",
                    "icon-activity": "&#xe6c5;",
                    "icon-activityfill": "&#xe775;",
                    "icon-friendaddfill": "&#xe6c9;",
                    "icon-friendadd": "&#xe6ca;",
                    "icon-friendfamous": "&#xe6cb;",
                    "icon-friend": "&#xe6cc;",
                    "icon-friendfill": "&#xe726;",
                    "icon-goods": "&#xe6cd;",
                    "icon-goodsfill": "&#xe778;",
                    "icon-selection": "&#xe6ce;",
                    "icon-selectionfill": "&#xe6e1;",
                    "icon-explore": "&#xe6d2;",
                    "icon-explorefill": "&#xe6dd;",
                    "icon-present": "&#xe6d3;",
                    "icon-presentfill": "&#xe732;",
                    "icon-squarecheckfill": "&#xe6d4;",
                    "icon-square": "&#xe6d5;",
                    "icon-squarecheck": "&#xe6d6;",
                    "icon-round": "&#xe6d7;",
                    "icon-roundfill": "&#xe6d8",
                    "icon-notificationforbidfill": "&#xe6db;",
                    "icon-game": "&#xe6df;",
                    "icon-redpacket": "&#xe6e0;",
                    "icon-similar": "&#xe6e2;",
                    "icon-infofill": "&#xe6e4;",
                    "icon-info": "&#xe6e5;",
                    "icon-forwardfill": "&#xe6ea;",
                    "icon-forward": "&#xe6eb;",
                    "icon-rechargefill": "&#xe6ec;",
                    "icon-recharge": "&#xe6ed;",
                    "icon-voice": "&#xe6ef;",
                    "icon-voicefill": "&#xe6f0;",
                    "icon-friendfavor": "&#xe6f1;",
                    "icon-wifi": "&#xe6f2;",
                    "icon-share": "&#xe6f3;",
                    "icon-wefill": "&#xe6f4;",
                    "icon-we": "&#xe6f5;",
                    "icon-lightauto": "&#xe6f6;",
                    "icon-lightforbid": "&#xe6f7;",
                    "icon-lightfill": "&#xe6f8;",
                    "icon-light": "&#xe6fa;",
                    "icon-camerarotate": "&#xe6f9;",
                    "icon-barcode": "&#xe6fb;",
                    "icon-flashlightclose": "&#xe6fc;",
                    "icon-flashlightopen": "&#xe6fd;",
                    "icon-service": "&#xe6ff;",
                    "icon-servicefill": "&#xe737;",
                    "icon-sort": "&#xe700;",
                    "icon-mobile": "&#xe704;",
                    "icon-mobilefill": "&#xe705;",
                    "icon-copy": "&#xe706;",
                    "icon-countdownfill": "&#xe707;",
                    "icon-countdown": "&#xe708;",
                    "icon-noticefill": "&#xe709;",
                    "icon-notice": "&#xe70a;",
                    "icon-upstagefill": "&#xe70e;",
                    "icon-upstage": "&#xe70f;",
                    "icon-choicenessfill": "&#xe714;",
                    "icon-choiceness": "&#xe715;",
                    "icon-clothesfill": "&#xe716;",
                    "icon-clothes": "&#xe717;",
                    "icon-creativefill": "&#xe718;",
                    "icon-creative": "&#xe719;",
                    "icon-female": "&#xe71a;",
                    "icon-male": "&#xe71c;",
                    "icon-keyboard": "&#xe71b;",
                    "icon-pullleft": "&#xe71f;",
                    "icon-pullright": "&#xe720;",
                    "icon-rankfill": "&#xe721;",
                    "icon-rank": "&#xe722;",
                    "icon-bad": "&#xe723;",
                    "icon-cameraadd": "&#xe724;",
                    "icon-cameraaddfill": "&#xe727;",
                    "icon-focus": "&#xe725;",
                    "icon-apps": "&#xe729;",
                    "icon-paintfill": "&#xe72a;",
                    "icon-paint": "&#xe72b;",
                    "icon-refresharrow": "&#xe72d;",
                    "icon-markfill": "&#xe730;",
                    "icon-mark": "&#xe731;",
                    "icon-repeal": "&#xe733;",
                    "icon-album": "&#xe734;",
                    "icon-peoplefill": "&#xe735;",
                    "icon-people": "&#xe736;",
                    "icon-repair": "&#xe738;",
                    "icon-repairfill": "&#xe73a;",
                    "icon-file": "&#xe739;",
                    "icon-taoxiaopu": "&#xe73b;",
                    "icon-attentionfill": "&#xe73c;",
                    "icon-attention": "&#xe73d;",
                    "icon-commandfill": "&#xe73e;",
                    "icon-command": "&#xe73f;",
                    "icon-communityfill": "&#xe740;",
                    "icon-community": "&#xe741;",
                    "icon-read": "&#xe743;",
                    "icon-calendar": "&#xe74a;",
                    "icon-cut": "&#xe74b;",
                    "icon-magic": "&#xe74c;",
                    "icon-backwardfill": "&#xe74d;",
                    "icon-forwardfill1": "&#xe74e;",
                    "icon-stop": "&#xe750;",
                    "icon-tagfill": "&#xe751;",
                    "icon-tag": "&#xe752;",
                    "icon-group": "&#xe753;",
                    "icon-move": "&#xe754;",
                    "icon-all": "&#xe755;",
                    "icon-backdelete": "&#xe756;",
                    "icon-hotfill": "&#xe757;",
                    "icon-hot": "&#xe758;",
                    "icon-post": "&#xe759;",
                    "icon-radiobox": "&#xe75b;",
                    "icon-radioboxfill": "&#xe763;",
                    "icon-rounddown": "&#xe75c;",
                    "icon-upload": "&#xe75d;",
                    "icon-videofill": "&#xe75e;",
                    "icon-video": "&#xe75f;",
                    "icon-writefill": "&#xe760;",
                    "icon-write": "&#xe761;",
                    "icon-punch": "&#xe764;",
                    "icon-shake": "&#xe765;",
                    "icon-safe": "&#xe769;",
                    "icon-crownfill": "&#xe776;",
                    "icon-crown": "&#xe777;",
                    "icon-sound": "&#xe77b;",
                    "icon-sponsorfill": "&#xe77c;",
                    "icon-weunblock": "&#xe780;",
                    "icon-weblock": "&#xe77f;",
                    "icon-upblock": "&#xe77e;",
                    "icon-sponsor": "&#xe77d;",
                    "icon-babyfill": "&#xe710;",
                    "icon-baby": "&#xe711;",
                }
            }
        }
    }
</script>

<style>
    .icon-wrap {
      flex-wrap: wrap; 
      flex-direction: row;
    }

    .icon-content{
        border-left-width: 1px;
        border-left-color: #d7dde4;
    }
    .icon-box{
        width: 160px;
        align-items: center;
        padding: 30px;
        padding-left: 5px;
        padding-right: 5px;
        border-width: 1px;
        border-color: #d7dde4;
        border-left-width: 0px;
        border-top-width: 0px;
    }
    .icon-text{
        font-size: 20px;
        text-align: center;
        color: #657180;
    }
    .mb20{
        margin-bottom: 20px;
    }
    .pdl10 {
        padding-left: 10px;
    }
</style>