<template>
  <div :style="{ padding: 8 * beilv + 'px ' + 24 * beilv + 'px 0'}" class="box">
    <div v-for="(item, i) in bomMsg" :key="i" class="bom-box" :style="{ marginBottom: 11 * beilv + 'px'}">
      <img src="./../../../../assets/img/cockpit/bom.png" alt="" width="100%" height="97%"/>
      <p class="bom-name" :style="{ fontSize: 16 * beilv + 'px'}">
        <span class="leftTriangle" />
        <span>{{ item.name }}</span>
        <span class="rightTriangle" />
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BomList',
  props: {
    bomMsg: {
      type: Array,
      default: () => []
    },
    beilv: {
      type: Number,
      default: 1
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;
  flex-flow: row wrap;
  justify-content: space-between;
  .bom-box {
    position: relative;
    width: 48%;
    .bom-name {
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: 6%;
      .leftTriangle,
      .rightTriangle {
        display: inline-block;
        width: 0px;
        height: 0px;
        border: 5px solid transparent;
      }
      .leftTriangle {
        border-right-color: #fff;
        margin-right: 10px;
      }
      .rightTriangle {
        border-left-color: #fff;
        margin-left: 10px;
      }
    }
  }
}
</style>
