<template>
  <div class="partTop">
    <div class="container">
      <div class="text">{{ info.dayInQty }}</div>
      <div class="text1">{{ info.securities }}-今日入库（箱）</div>
    </div>
    <div class="container" :reverse="true" :dur="7">
      <div class="text">{{ info.qty }}</div>
      <div class="text1">{{ info.securities }}-当前库存（箱）</div>
    </div>
    <div class="container" :dur="7">
      <div class="text">{{ info.dayOutQty }}</div>
      <div class="text1">{{ info.securities }}-今日出库（箱）</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['info'],
  components: {}
}
</script>

<style lang="scss" scoped>
.partTop {
  text-align: center;
  width: 80%;
  height: 5rem;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 3fr 3fr 3fr;
  grid-column-gap: 20rem;
  .container {
    text-align: center;
    
    background-color: #0f1325;
    height: 4rem;
    box-shadow: 0 0 15px 10px rgba(45, 106, 238, 0.5) inset;
  border-radius: 10px; /* 设置圆角的大小为10像素 */
    border: rgb(110, 119, 243) 0.1333vw solid;
    .text {
      height: 2.5rem;
      line-height: 2.8rem;
      font-size: 1.8rem;
    }
    .text1 {
      height: 1.7rem;
      font-size: 1rem;
    }
  }
}
</style>
