hyyfClient/src/views/PdcData/analysis/ProductionItems.vue

<!--
 * @Author: your name
 * @Date: 2021-10-11 15:40:26
 * @LastEditTime: 2021-10-11 16:09:54
 * @LastEditors: Please set LastEditors
 * @Description: 生产情况下面的8个
 * @FilePath: \hyyfClient\src\views\PdcData\analysis\ProductionItems.vue
-->
<template>
  <div>
    <div class="inventory-items">
      <inventory-item>
        <template v-slot:picture>
          <div class="picture01 picture"></div>
        </template>
        <template v-slot:dataName>
          <span>平均窝产仔数</span>
        </template>
        <template v-slot:dataNum>
          <span>15</span>
        </template>
      </inventory-item>
      <inventory-item>
        <template v-slot:picture>
          <div class="parent">
            <div class="picture02 picture"></div>
            <div class="live"></div>
          </div>
        </template>
        <template v-slot:dataName>
          <div>平均窝产活仔数</div>
        </template>
        <template v-slot:dataNum>
          <div>5000</div>
        </template>
      </inventory-item>
      <inventory-item>
        <template v-slot:picture>
          <div class="parent">
            <div class="picture03 picture"></div>
            <div class="letter03"></div>
          </div>
        </template>
        <template v-slot:dataName>
          <div>平均窝产正常仔数</div>
        </template>
        <template v-slot:dataNum>
          <div>5000</div>
        </template>
      </inventory-item>
      <inventory-item>
        <template v-slot:picture>
          <div class="picture04 picture"></div>
        </template>
        <template v-slot:dataName>
          <div>窝断奶仔猪数</div>
        </template>
        <template v-slot:dataNum>
          <div>15240</div>
        </template>
      </inventory-item>
    </div>
    <div class="inventory-items">
      <inventory-item>
        <template v-slot:picture>
          <div class="picture05 picture"></div>
        </template>
        <template v-slot:dataName>
          <div>平均窝断奶重</div>
        </template>
        <template v-slot:dataNum>
          <div>15240</div>
        </template>
      </inventory-item>
      <inventory-item>
        <template v-slot:picture>
          <div class="picture06 picture"></div>
        </template>
        <template v-slot:dataName>
          <div>非生产天数</div>
        </template>
        <template v-slot:dataNum>
          <div>24天</div>
        </template>
      </inventory-item>
      <inventory-item>
        <template v-slot:picture>
          <div class="parent">
            <div class="picture07 picture"></div>
            <div class="sale"></div>
          </div>
        </template>
        <template v-slot:dataName>
          <div>年产窝数</div>
        </template>
        <template v-slot:dataNum>
          <div>2.36</div>
        </template>
      </inventory-item>
      <inventory-item>
        <template v-slot:picture>
          <div class="border">
            <span>PSY</span>
          </div>
        </template>
        <template v-slot:dataName>
          <div>PSY</div>
        </template>
        <template v-slot:dataNum>
          <div>25.5</div>
        </template>
      </inventory-item>
    </div>
  </div>
</template>
<script>
import InventoryItem from "components/erp/InventoryItem.vue";

export default {
  components: {
    InventoryItem,
  },
};
</script>
<style scoped>
.inventory-items {
  margin: 10px 5px 0px;
  display: flex;
  flex-direction: row;
}
/* 图片统一格式 */
.picture {
  width: 150px;
  height: 100px;
}
.parent {
  position: relative;
}
/* 平均窝产仔图片 */
.picture01 {
  background: url("~assets/images/erpAnalysis/u3836.svg") no-repeat 50%;
  background-size: 50%;
}
/* 平均窝产活仔 */
.picture02 {
  background: url("~assets/images/erpAnalysis/u3836.svg") no-repeat 50%;
  background-size: 50%;
}
.live {
  background: url("~assets/images/erpAnalysis/u3838.svg") no-repeat 50%;
  position: absolute;
  top: 36px;
  right: 56px;
  width: 30px;
  height: 30px;
  background-size: 70%;
}
/* 正常仔 */
.picture03 {
  background: url("~assets/images/erpAnalysis/u3836.svg") no-repeat 50%;
  background-size: 50%;
}
.letter03 {
  background: url("~assets/images/erpAnalysis/u3840.svg") no-repeat 50%;
  position: absolute;
  top: 36px;
  right: 56px;
  width: 30px;
  height: 30px;
  background-size: 50%;
}
/* 断奶 */
.picture04 {
  background: url("~assets/images/erpAnalysis/u3841.svg") no-repeat 50%;
  background-size: 50%;
}
/* 平均断奶重 */
.picture05 {
  background: url("~assets/images/erpAnalysis/u3843.svg") no-repeat 50%;
  background-size: 50%;
}
/* 非生产天数 */
.picture06 {
  background: url("~assets/images/erpAnalysis/u3844.svg") no-repeat 50%;
  background-size: 40%;
}
/* 年产窝数 */
.picture07 {
  background: url("~assets/images/erpAnalysis/u3842.svg") no-repeat 50%;
  background-size: 50%;
}
/* PSY */
.border {
  margin: 15px 18px;
  border: 1px solid rgba(228, 228, 228, 1);
  border-radius: 10px;
  height: 70px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.border > span {
  font-weight: bold;
  font-size: 22px;
}
</style>