<template>
    <view class="index-classify-bar">
        <scroll-view class="icb-sview" scroll-x>
            <view class="is-ls">
                <view class="il-item" v-for="i in 6" :key="i">户外装备</view>
            </view>
        </scroll-view>
        <view class="icb-right-tab">
            <image class="irt-img"></image>
            <view class="irt-txt"></view>
        </view>
    </view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
.index-classify-bar{
    padding: 0 24upx;
    height: 124upx;
    /*background-color: #fbfbfc;*/
    background-color: #f00;
    @include ctf;
    .icb-sview{
        flex-grow: 1;
        .is-ls{
            padding: 0 10upx;
            width: fit-content;
            white-space: nowrap;
            .il-item{
                vertical-align: middle;
                display: inline-block;
                @include flcw(36upx, 50upx, #333333);
                &+.il-item{
                    margin-left: 80upx;
                }
            }
        }
    }
    .icb-right-tab{
        flex-shrink: 0;
        padding-left: 10upx;
        border-left: 1px solid #D8D8D8;
        .irt-img{
            display: block;
            width: 36upx;
            height: 36upx;
            background: skyblue;
        }
        .irt-txt{
            text-align: center;
            margin-top: 4upx;
            @include flcw(22upx, 32upx, #333333);
        }
    }
}
</style>