intelligent-medicine-cabinet/mini-pro-web/src/views/replenishment/record/detail.vue

<template>
    <div class='replenishment-record-detail'>
        <div class="bgc-fff plr15">
            <div class="bb-e1e1e1 ptb10">众健信联1号</div>
            <div class="lh26 fs-14 ptb10">
                <template>
                    <div>补货时间：2020-08-24 17:15:19</div>
                    <div>设备编号：149122021070000</div>
                    <div>商品数量：2</div>
                    <div>补货人员：张三</div>
                </template>
                <!-- <template>
                    <div>换货时间：2020-08-24 17:15:19</div>
                    <div>设备编号：149122021070000</div>
                    <div>换货人员：张三</div>
                </template>
                <template>
                    <div>上货时间：2020-08-24 17:15:19</div>
                    <div>设备编号：149122021070000</div>
                    <div>上货人员：张三</div>
                </template> -->
            </div>
        </div>

        <div class="mt10 table fs-14 break">
            <div class="kitbox row tc fs-14">
                <div class=" ">图片</div>
                <div class="box-flex-1">商品名/条码</div>
                <div class=" ">数量</div>
            </div>
            <div class="kitbox row tc ptb10">
                <div class=" ">
                    <div>
                        <van-image
                            width="30"
                            height="30"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                    </div>
                    <div><van-icon name="arrow-down" /></div>
                    <div>
                        <van-image
                            width="30"
                            height="30"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                    </div>
                </div>
                <div class="box-flex-1 ">
                    <div class="lh30 ellipsis">商品名/条码商品名/条码商品名/条码</div>
                    <div><van-icon name="arrow-down" /></div>
                    <div class="lh30 ellipsis">商品名/条码商品名/条码商品名/条码</div>
                </div>
                <div class=" ">
                    <div class="lh30">2</div>
                    <div><van-icon name="arrow-down" /></div>
                    <div class="lh30">5</div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
export default{
    name: 'replenishmentRecordDetail',
    data(){
        return {
            
        }
    },
    created() {
        
    },
    methods:{
        
    },
}
</script>
<style lang='scss' scoped>
.replenishment-record-detail{
    .table{
        background: #fff;
        width: 100%;
        .row{
            padding: 10px 0;
            border-bottom: 1px solid #e1e1e1;
            &:last-child{
                border-bottom: 0  ;
            }
            >div:first-child{
                width: 60px;
            }
            >div:last-child{
                width: 60px;
            }
            .van-image{
                display: block;
                margin: 0 auto;
            }
            .van-icon{
                color: #17b3ec;
            }
        }
    }
}
</style>