前端布局经验

如果需要设置背景颜色，而且项与项之间有空间隔离，可以包装几层，这样控制起来非常灵活方便

如

第一层div

第二层div

第三层div 主要内容

第三层div 隔离项

代码

<template>
    <div class="order-list" v-if="orderListData.length>0 ">
        <template v-for="(item,index) in orderListData" :key="index">
        <div class="order-list-item" >
           <div class="order-shop">
              <OrderHeader :OrderInfo="item"></OrderHeader>
           </div>
           <div class="order-goodinfo">
            <OrderDetail :OrderInfo="item.orderItemDTOList[0]"></OrderDetail>
           </div>
           <div class="order-other"></div>
           <div class="order-btn">
            <OrderBtn :OrderInfo="item"></OrderBtn>
           </div>
        </div>
        <div class="order-gap"></div>
        </template>
      
    </div>
    <div class="order-list" v-else>暂无订单</div>
</template>

效果图

效果是非常不错的，记录一下。