<template>
  <div class="view-box">
    <div class="item-info" v-for="(text, num) in props.list" :key="num">
      <div class="item-num">{{ Number(num) + 1 }}.</div>
      <div class="text-align-justify">{{ text }}</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Level2List">

const props = defineProps({
  list: {
    type: Array as any,
    default: () => ([])
  }
})

</script>

<style scoped lang="scss">
.view-box {
  .item-info {
    padding: 12px 20px 12px 50px;
    color: rgba(59, 65, 75, 1);
    font-family: Source Han Sans CN;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0px;
    border-bottom: 1px solid rgba(234, 236, 238, 1);
    position: relative;
    .item-num {
      position: absolute;
      left: 26px;
      top: 12px;
    }
  }
}
</style>