<template>
    <div class='replenishment-start-device-detail fs-14'>
        <div class="bgc-17b3ec c-fff">
            <van-row>
                <van-col span="6">
                    <div class="tc pt15 pb10">
                        <div class="fs-20">1156</div>
                        <div class="fs-12 pt5">库存容量</div>
                    </div>
                </van-col>
                <van-col span="6">
                    <div class="tc pt15 pb10">
                        <div class="fs-20">
                            <span>156</span>
                            <span class="fs-12">/29%</span>
                        </div>
                        <div class="fs-12 pt5">在架库存</div>
                    </div>
                </van-col>
                <van-col span="6">
                    <div class="tc pt15 pb10">
                        <div class="fs-20">1156</div>
                        <div class="fs-12 pt5">缺货库存</div>
                    </div>
                </van-col>
                <van-col span="6">
                    <div class="tc pt15 pb10">
                        <div class="fs-20">1156</div>
                        <div class="fs-12 pt5">预警货道</div>
                    </div>
                </van-col>
            </van-row>
            <div class="kitbox fs-12 plr10 pb5">
                <div class="box-flex-1">当前:0号柜</div>
                <div class="box-flex-1 ml5"> 共:6层</div>
                <div class="box-flex-1 ml5">总货道数:240</div>
                <div class="box-flex-1 ml5">故障货道:18</div>
                <div class="box-flex-1 ml5">关闭货道:0</div>
            </div>
        </div>
        <div class="fs-14 pl15 ptb10 bgc-fff">从上往下数</div>
        <div class="kitbox">
            <div>
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item title="一层"  />
                    <van-sidebar-item title="二层"  />
                    <van-sidebar-item title="三层"  />
                </van-sidebar>
            </div>
            <div class="list box-flex-1 bgc-fff">
                <div class="item" v-for="i in 5" :key="i">
                    <ProductItem/>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ProductItem from '@/components/ProductItem'
export default{
    name: 'replenishmentStartDeviceDetail',
    components: {
        ProductItem
    },
    data(){
        return {
            activeKey: 0
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.replenishment-start-device-detail{
    .van-sidebar{
        // width: 56px;
    }
    .list{
        display: flex;
        flex-wrap: wrap;
        // min-height: calc(100vh - 130px);
        .item{
            margin-left: 5px;
            margin-bottom: 5px;
            .components-product-item{
                width: 90px;
            }
        }
    }
}
</style>