<template>

    <category-scroll :scrollbar="false" class="scroll">

        <ul class="tab">

            <li class="tab-item" v-for="(item, index) in categoryNames" :key="index">

                {{item.name}}

            </li>

        </ul>

    </category-scroll>

</template>

<script>

import CategoryScroll from 'base/scroll'

import {categoryNames} from './config.js'

export default {

    name: 'CategoryTab',

    data() {

        return {

            categoryNames: categoryNames

        }

    },

    components: {

        CategoryScroll

    }

}

</script>

<style lang="scss" >

@import '~assets/scss/mixins';

    .tab {

        width: 100%;

        &-item {

        height: $tab-item-height;

        background-color: #fff;

        border-right: 1px solid $border-color;

        border-bottom: 1px solid $border-color;

        color: #080808;

        font-size: $font-size-l;

        font-weight: bold;

        text-align: center;

        line-height: $tab-item-height;

        @include ellipsis();

        &:last-child {

            border-bottom: none;

        }

        }

        &-item-active {

        background: none;

        border-right: none;

        color: #f23030;

        }

    }

</style>