vantUI的轮播图一个里面放两个小模块写法，转二维数组

      <!-- 未处理报警 -->
      <div style="height:30%;display: flex;flex-direction: column;">
        <span class="box-title-mini">{{ $t('i18n.unprocessedalarm') }}</span>
        <div style="height: calc(100% - 41px);width: 100%;">

          <!-- <div class="info-container color-frame" style="margin-top:5px;" v-for="item in alarmInfoList" :key="item.id"
            @click="callsss(item.alarmMsg)">
            <span class="text_space" style="font-size: 1.1rem;   font-weight:bold">{{ item.alarmMsg }}</span>
            <span style="font-size: 0.9rem;  ">{{ $t('i18n.occurrenceTime') }}&nbsp;:</span>
            <span style="font-size: 0.9rem;  ">{{ item.startTime }}</span>
          </div> -->
          <van-swipe :autoplay="3000" :loop="false" indicator-color="#39a9ed">
            <van-swipe-item v-for="(item, index) in alarmInfoList" :key="index">
              <unprocessedalarm ref="unprocessedalarmREF" :unprocessedalarm="item"></unprocessedalarm>
            </van-swipe-item>
          </van-swipe>

        </div>
      </div>

private async getWranInfo(flowmeterId) {
    this.alarmInfoList = []
    // 获取流量计所有为处理的报警接口
    let res = await GetAllAlarmsNotDeal(flowmeterId)
    let untreated = res.filter((item) => {
      return item.isDeal == false
    })

    for (let i = 0; i < untreated.length; i += 2) {
      this.alarmInfoList.push(res.slice(i, i + 2))
    }
    console.log('this.alarmInfoList', this.alarmInfoList)
  }

下面是个组件，一页面两行的组件，

<template>
  <div class="workArea-container" :style="{ 'justify-content': unprocessedalarm.length == 2 ? 'space-between' : 'flex-start' }">
    <div style="height:90%;width:49%;" class="workArea">
      <div class="info-container color-frame" :style="{ 'justify-content': unprocessedalarm.length == 2 ? 'space-between' : 'flex-start' }">
        <span class="text_space" style="font-size: 1.1rem;   font-weight:bold">{{ unprocessedalarm[0].alarmMsg }}</span>
        <div>
          <span style="font-size: 0.9rem;  ">{{ $t('i18n.occurrenceTime') }}&nbsp;:</span><br />
          <span style="font-size: 0.9rem;  ">{{ unprocessedalarm[0].startTime }}</span>
        </div>
      </div>
    </div>
    <div style="height:90%;width:49%;" class="workArea">
      <div v-if="unprocessedalarm.length == 2" class="info-container color-frame"
        :style="{ 'justify-content': unprocessedalarm.length == 2 ? 'space-between' : 'flex-start' }">
        <span class="text_space" style="font-size: 1.1rem;   font-weight:bold">{{ unprocessedalarm[1].alarmMsg }}</span>
        <div>
          <span style="font-size: 0.9rem;  ">{{ $t('i18n.occurrenceTime') }}&nbsp;:</span><br />
          <span style="font-size: 0.9rem;  ">{{ unprocessedalarm[1].startTime }}</span>
        </div>
      </div>
    </div>

  </div>
</template>










  @Prop({
    default: () => {
      return []
    }
  })
  private unprocessedalarm: any

  mounted() {}

  // @Watch('unprocessedalarm', { deep: true, immediate: true })
  // private async onworkAreaItemChanged(newval: string, oldval: string) {
  //   await this.$nextTick()
  // }