<template>
  <div class="pro-cons" v-if="list.length">
    <div class="cons-left">
      <div v-for="(item, index) in list" :key="index">
        <div v-if="(index + 1) % 2 === 1">
          <slot name="left" :item="item"></slot>
        </div>
      </div>
    </div>
    <div class="cons-right">
      <div v-for="(item, index) in list" :key="index">
        <div v-if="(index + 1) % 2 === 0">
          <slot name="right" :item="item"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
</script>

<style>
.pro-cons {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.cons-left,
.cons-right {
  flex: 1;
}
.cons-left {
  margin-right: 20px;
}
</style>
