<template>
  <div class="container">
    <div class="column-left">
      <PolygonItem
        v-for="(item, index) in firstList"
        :key="index"
        :image-src="item"
      />
    </div>
    <div class="column-middle">
      <PolygonItem
        v-for="(item, index) in secondList"
        :key="index"
        :image-src="item"
      />
    </div>
    <div class="column-right">
      <PolygonItem
        v-for="(item, index) in thirdList"
        :key="index"
        :image-src="item"
      />
    </div>
  </div>
</template>

<script>
import pic1 from '@/assets/pic1.png'
import pic2 from '@/assets/pic2.png'
import pic3 from '@/assets/pic3.png'
import pic4 from '@/assets/pic4.png'
import pic5 from '@/assets/pic5.png'
import pic6 from '@/assets/pic6.png'
import pic7 from '@/assets/pic7.png'
import PolygonItem from './PolygonItem'
export default {
  name: 'Pylygon',
  components: {
    PolygonItem
  },
  data() {
    return {
      firstList: [pic1, pic2],
      secondList: [pic3, pic5, pic4],
      thirdList: [pic6, pic7]
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  width:400px;
  height:100%;
  display: flex;
  .column-left {
    width: 150px;
    margin-top: 42px;
    margin-right: -40px;
  }
  .column-middle{
    width: 150px;
  }
  .column-right{
    width: 150px;
    margin-top: 42px;
    margin-left: -40px;
  }
}

</style>
