aiot-app/pages/production/order/components/DetailProduct.vue

<template>
  <view>
	 <div class="block">
		 <div class="block-title">挤压成型</div>
		 <div class="block-list">
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/1.svg"></image>
					 待生产数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/2.svg"></image>
					 已报工数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
		 </div>
	 </div> 
	 <div class="block">
		 <div class="block-title">自然干燥</div>
		 <div class="block-list">
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/1.svg"></image>
					 待投料数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/3.svg"></image>
					 生产中数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/2.svg"></image>
					 已报工数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
		 </div>
	 </div>
	 <div class="block">
		 <div class="block-title">升温干燥</div>
		 <div class="block-list">
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/1.svg"></image>
					 待投料数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/3.svg"></image>
					 生产中数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/2.svg"></image>
					 已报工数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
		 </div>
	 </div>
	 <div class="block">
		 <div class="block-title">半加定长</div>
		 <div class="block-list">
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/1.svg"></image>
					 待投料数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/3.svg"></image>
					 生产中数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/2.svg"></image>
					 已报工数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
		 </div>
	 </div>
	 <div class="block">
		 <div class="block-title">备炉</div>
		 <div class="block-list">
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/4.svg"></image>
					 待交接数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/3.svg"></image>
					 已预定数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
		 </div>
	 </div>
	 <div class="block">
		 <div class="block-title">烧结</div>
		 <div class="block-list">
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/1.svg"></image>
					 待投料数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/3.svg"></image>
					 生产中数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/2.svg"></image>
					 已报工数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
		 </div>
	 </div>
	 <div class="block">
		 <div class="block-title">深加工</div>
		 <div class="block-list">
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/4.svg"></image>
					 待交接数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/1.svg"></image>
					 待投料数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/3.svg"></image>
					 生产中数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/2.svg"></image>
					 已报工数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
		 </div>
	 </div>
	 <div class="block">
		 <div class="block-title">包装</div>
		 <div class="block-list">
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/4.svg"></image>
					 待交接数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/1.svg"></image>
					 待投料数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/3.svg"></image>
					 生产中数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/2.svg"></image>
					 已报工数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
		 </div>
	 </div>
	 <div class="block">
		 <div class="block-title">预缴库</div>
		 <div class="block-list">
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/4.svg"></image>
					 待交接数量
				 </div>
				 <div class="item-right">
					 318 <span>></span>
				 </div>
			 </div>
			 <div class="list-item">
				 <div class="item-left">
					 <image src="~@/static/product/2.svg"></image>
					 已报工数量
				 </div>
				 <div class="item-right">
					 654 <span>></span>
				 </div>
			 </div>
		 </div>
	 </div>
  </view>
</template>

<script>
export default {
  props: {
    baseInfo: {
      type: Object,
      default: () => ({})
    },
    list: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: ''
    }
  },
  watch:{  
  },
  computed: {

  },
  data () {
    return {
      
    }
  }
}
</script>

<style lang="scss" scoped>
  .block{
	  width: 100%;
	  margin: 20rpx auto;
	  .block-title{
		  width: 100%;
		  font-size: 30rpx;
		  border-bottom: 1rpx solid #ccc;
		  font-weight: bold;
		  color: rgb(51, 51, 51);
		  line-height: 60rpx;
		  text-indent: 20rpx;
	  }
	  .block-list{
		  width: 90%;
		  margin: 10rpx auto;
		  .list-item{
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  border-bottom: 1rpx dashed #ccc;
			  height: 70rpx;
			  line-height: 70rpx;
			  .item-left{
				  display: flex;
				  align-items: center;
				  image{
					  width: 30rpx;
					  height: 30rpx;
					  display: inline-block;
					  margin-right:15rpx;
				  }
			  }
			  .item-right{
				  color: #999;
				  span{
					  margin-left: 30rpx;
				  }
			  }
		  }
	  }
  }
</style>