<template>
  <div class="building">
    <div v-for="item in list" :key="item.name" :style="`background-image: url(${require('@/assets/images/'+item.img)})`">
      <p>{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Building',
  data() {
    return {
      list: [
        {name: '和平饭店', img: 'building1.png'},
        {name: '慈安里大楼', img: 'building2.png'},
        {name: '美伦大厦', img: 'building3.png'},
        {name: '上海虹庙', img: 'building4.png'},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.building
  display grid
  grid-gap .1rem
  grid-template-columns 1fr 1fr
  grid-template-rows 1fr 1fr
  >div
    background-size 100% 100%
    position relative
    >p
      position absolute
      bottom 0
      text-align center
      width 100%
</style>
