<template>
    <div class='deviceDetail'>
        <div class='grid-3 c-f14 c-333 bgc-fff ptb10 c-border-b'>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-17b3ec w60 h30' style='display:inline-block'></div></div>
                <span>正常</span>
            </div>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-ff9526 w60 h30' style='display:inline-block'></div></div>
                <span>故障</span>
            </div>
            <div class='c-t-center'>
                <div class='mb5'><div class='bgc-ccc w60 h30' style='display:inline-block'></div></div>
                <span>关闭</span>
            </div>
        </div>
        <div v-for='(item, index) in rows'>
            <div class='mt10 bgc-fff ptb10 c-border-tb plr15 c-f14'>
                <div class='flex f_y_c f_x_s'>
                    <span>第{{index+1}}层</span>
                    <van-radio v-model="checkAll">选择整行</van-radio>
                </div>
                <div class='flex mt10 x-overflow'>
                    <div v-for='(citem, cindex) in cols'>
                        <div class='c-t-center w30 c-position-r' :class='cindex!=cols.length-1?"mr10":""'>
                            <div>{{cindex+1}}</div>
                            <div class='c-t-center'><div class='c-cirlce-17b3ec'></div></div>
                            <div class='c-border ptb5'>5</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='mt20 plr15'>
            <van-button class='c-border-r-5' style='width:100%' type="info">设置货道容量</van-button>
        </div>
        <div class='mt20 plr15'>
            <van-button class='c-border-r-5' style='width:100%' type="info">货道合并</van-button>
        </div>
        <div class='mt20 plr15 mb30'>
            <van-button class='c-border-r-5' style='width:100%' type="info">货道拆分</van-button>
        </div>
    </div>
</template>
<script>
export default{
    name: 'deviceDetail',
    data(){
        return {
            rows: 6,
            cols: 40,
            checkAll: []
        }
    },
    methods:{

    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.deviceDetail{
    .grid-3{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .c-cirlce-17b3ec{
        background: #17b3ec;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
    }
    .x-overflow{
        overflow-x: auto;
        -ms-overflow-style: none;
    }
    .x-overflow::-webkit-scrollbar{
        display:none;
    }
}
</style>