<template>
     <view class="guige">
        <view class="title">
            {{title}}
        </view>
        <view class="item">
            <text v-for="(i,j) in item" @click="select = j" :class="select == j ? 'xuanzhong' : ''" :key="j">
                {{i}}
            </text>
            <!-- <text @click="select = 1" :class="select == 1 ? 'xuanzhong' : ''">S</text> -->
            <!-- <text @click="select = 2" :class="select == 2 ? 'xuanzhong' : ''">M</text> -->
        </view>
    </view>
</template>
<style lang="scss" scoped>
    .guige{
            margin-top: 30rpx;
            padding-bottom: 30rpx;
            border-bottom: #ececec solid 2rpx;
            .title{
                font-size: 28rpx;
                color: #333;
                margin-bottom: 29rpx;

            }
            .item{
                display: flex;
                flex-wrap: wrap;
                >text{
                    min-width: 120rpx;
                    height: 60rpx;
                    background-color: #ececec;
                    color: #999;
                    text-align: center;
                    line-height: 60rpx;
                    box-sizing: border-box;
                    border-radius: 6rpx;
                    margin-right: 26rpx;
                }
                .xuanzhong{
                    border: #ff780f 1rpx solid;
                    color: #FF780F;
                    background-color: #FFF1E6;
                }
            }
        }
</style>
<script>
export default {
    name:"guige",
    data(){
        return {
            select:0
        }
    },
    props:['item','title'],
    watch:{
        select(){
            // console.log(this.select)
            this.$emit("sel", this.select);
        }
    }
}
</script>