<template>
    <scroller class="wrapper">

        <scroller class="elevator" scroll-direction="horizontal" show-scrollbar="true">
            <div class="elevator-item" v-for="(name, index) in floors">
                <text class="item-text">{{name}}</text>
            </div>
        </scroller>
    </scroller>
</template>

<script>

    export default {data () {
            return {floors: ['买手精选', '进口好货', '魅力美妆', '滋补保健', '进口母婴', '环球美食', '数码家电', '个护家清', '家居家纺', '名庄酒水']
            }
        },
        methods: {}}
</script>

<style scoped>
    .wrapper {
        /*width: 750 px;*/
        margin-top: 190 px;
    }
    .elevator {
        /*width: 750 px;*/
        height: 100 px;
        padding-left: 15 px;
        padding-right: 15 px;
        background-color: #39 f;
        flex-direction: row;
    }
    .elevator-item {
        line-height: 90 px;
        margin: 0 px 15 px;
        /*flex-direction: column;*/
    }
    .elevator-title {
        font-size: 36 px;
        color: #fff;
        line-height: 90 px;
    }
    .item-text {
        font-size: 36 px;
        color: #fff;
        line-height: 90 px;
    }
    .floor {padding: 30 px;}
    .floor-title{
        font-size: 40 px;
        text-align: center;
        line-height: 70 px;
    }
    .goods {
        height: 600 px;
        border-width: 2 px;
        border-style: solid;
        border-color: rgb (162, 217, 192);
        background-color: rgba (162, 217, 192, 0.2);
    }
</style>