<template>
    <div class='replenishment-device-detail'>
        <div class="kitbox plr15 ptb10">
            <div class="box-flex-1 box-v-middle fs-14">从上往下数</div>
            <div><van-button type="info" size="small">点击设置商品</van-button></div>
        </div>

        <div class="list ">
            <div v-for="i in 15" :key="i" class="item plr15 bt-e1e1e1 bb-e1e1e1">
                <div class="pt10">第1层</div>
                <div class="item-list ptb10">
                    <div v-for="j in 20" :key="j" :class="'pitem-full'" class="pitem">
                        <div :style="'height: 25%'" class="pitem-bg"></div>
                        <div class="pitem-inner">
                            <div class="kitbox ">
                                <div class="box-flex-1">1号位</div>
                                <div>0/5</div>
                            </div>
                            <div class="ellipsis tc pt8">J氯化钠注J氯化钠注</div>
                            <div class="tc pt5">￥27.00</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'replenishmentDeviceDetail',
    data(){
        return {
            
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.replenishment-device-detail{
    .list{
        .item{
            margin-bottom: 10px;
            background: #fff;
            .item-list{
                overflow-y: scroll;
                width: 100%;
                display: flex;
                .pitem{
                    width: 100px;
                    height: 80px;
                    background: rgb(238, 238, 238);
                    border-radius: 10px;
                    margin-left: 10px;
                    padding: 5px;
                    font-size: 14px;
                    position: relative;
                    &.pitem-full{
                        color: #fff;
                    }
                    &:first-child{
                        margin-left: 0;
                    }
                    .pitem-inner{
                        position: relative;
                        z-index: 1;
                        background: transparent;
                    }
                    .pitem-bg{
                        background: #17b3ec;
                        position: absolute;
                        z-index: 0;
                        width: 100%;
                        bottom: 0;
                        left: 0;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                        &.orange{
                            background: #ff9526;
                        }
                        &.red{
                             background: #ff5e6c;
                        }
                    }
                }
            }
        }
    }
}
</style>