<template>
  <div class="community-photo">
    <div
      v-for="item in list"
      :key="item.name"
      :style="`background:url(${item.photo}) 100% / 100% 100% no-repeat`"
    >
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import photo1 from '@/assets/images/community1.png'
import photo2 from '@/assets/images/community2.png'
import photo3 from '@/assets/images/community3.png'

export default defineComponent({
  name: 'CommunityPhoto',
  setup() {
    return {
      list: [
        { name: '重庆北路205号入口', photo: photo1 },
        { name: '重庆北路205号道路', photo: photo2 },
        { name: '重庆北路205号电梯', photo: photo3 },
      ],
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.community-photo
  $full()
  display flex
  flex-direction column
  justify-content space-between
  padding .05rem
  >div
    height 32%
    position relative
    >p
      position absolute
      right 0
      bottom 0
      padding .05rem .1rem
      border-radius .1rem 0 0 0
      color $secondary-color
      background rgba(8,28,52,.5)
</style>
