<template>
    <div class='replenishment-start-product-detail fs-14'>
        <div class="tc pt50">
            <van-image
                radius="5px"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
        </div>
        <div class="c-17b3ec tc pt20">更换商品</div>
        <div class=" tc pt20">
            <span class="mr10">现有数量：5 </span>
            <span class="ml10">货道容量：5 </span>
        </div>
        <div class="pt20">
            <div class="progress">
                <div class="bar"></div>
                <div class="text">21/500</div>
            </div>
        </div>
        <div class="bot-banner  ptb10">
            <div><van-button type="info" round block size="small">矫正库存</van-button></div>
            <div class="kitbox pt10">
                <div class="box-flex-1 pr10"><van-button type="info" round block plain size="small">修改容量</van-button></div>
                <div class="box-flex-1 pl10"><van-button type="info" round block plain class="red" size="small">下架商品</van-button></div>
            </div>
        </div>
        <!-- 修改容量 -->
        <SetStockDialog v-model="setStockShow" title="矫正库存" :bussiness="2"/>
    </div>
</template>
<script>
import SetStockDialog from './components/SetStockDialog'
export default{
    name: 'replenishmentStartProductDetail',
    components:{
        SetStockDialog
    },
    data(){
        return {
            setStockShow: true
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.replenishment-start-product-detail{
    .van-image{
        width: 100px;
        height: 100px;
    }
    .progress{
        width: 80vw;
        background: #bbb;
        height: 20px;
        border-radius: 20px;
        margin: 0 auto  ;
        position: relative;
        .bar{
            background: #17b3ec;
            height: 100%;
            display: inline-block;
            color: #fff;
            text-align: center;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            line-height: 20px;
            min-width: 40px;
        }
        .text{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            background: transparent;
            text-align: center;
            color: #fff;
            line-height: 20px;
        }
        &.full{
            .bar{
                border-radius: 20px;
            }
        }
    }
    .bot-banner{
        position: fixed;
        bottom: 0;
        width: 80%;
        left: 10%;
        // background: #fff;
        .van-button--plain{
            &.red{
                color: #ff5e6c;
                border-color: #ff5e6c;
            }
        }
    }
}
</style>