<template>
  <m-card title="生态">
    <div class="detail">
      <img src="@/assets/images/ecology.png" />
      <div v-for="item in ecologyList" :key="item.name">
        <m-count class="count" :value="item.value" />
        <p>{{ item.name }}</p>
      </div>
    </div>
    <div class="sum">
      <div v-for="item in sumList" :key="item.name">
        <img :src="`@/assets/images/${item.icon}`" />
        <div>
          <m-count class="count" :value="item.value" />
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div>
      <m-sub>商业综合体</m-sub>
      <div class="business photos">
        <img
          v-for="photo in businessPhotos"
          :key="photo"
          :src="`@/assets/images/${photo}`"
        />
      </div>
    </div>
    <div>
      <m-sub>历史文化场馆</m-sub>
      <div class="history photos">
        <img
          v-for="photo in historyPhotos"
          :key="photo"
          :src="`@/assets/images/${photo}`"
        />
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Ecology',
  setup() {
    const ecologyList = ref([
      { name: '衣', value: 853 },
      { name: '行', value: 1276 },
      { name: '食', value: 1276 },
      { name: '住', value: 853 },
    ])
    const sumList = ref([
      { name: '为老设施', value: 853, icon: 'img1.png' },
      { name: '便民商店', value: 1276, icon: 'img2.png' },
      { name: '便利店', value: 285, icon: 'img3.png' },
      { name: '电话亭', value: 853, icon: 'img4.png' },
      { name: '餐车', value: 1276, icon: 'img5.png' },
      { name: '街面废物箱', value: 285, icon: 'img6.png' },
      { name: '公厕', value: 200, icon: 'img7.png' },
      { name: '垃圾箱房', value: 1957, icon: 'img8.png' },
    ])
    const businessPhotos = ref(['photo1.png', 'photo2.png'])
    const historyPhotos = ref(['photo3.png', 'photo4.png', 'photo5.png'])
    return {
      ecologyList,
      sumList,
      businessPhotos,
      historyPhotos,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.detail
  width 100%
  height 1.2rem
  position relative
  >img
    width 36%
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    margin auto
  >div
    $center()
    position absolute
    width 32%
    height 45%
    background rgba(49,94,139, .4)
    border .04rem solid rgba(0,0,0,.25)
    text-align center
    flex-direction column
    &:nth-of-type(1)
      top 0
      left 0
    &:nth-of-type(2)
      top 0
      right 0
    &:nth-of-type(3)
      bottom .05rem
      left 0
    &:nth-of-type(4)
      bottom .05rem
      right 0
  .count
    font-size .12rem
    color $yellow
.sum
  display flex
  flex-wrap wrap
  >div
    display flex
    align-items center
    width 33.3%
    margin .05rem 0
    img
      width .26rem
      height @width
      margin 0 .1rem 0 .05rem
    .count
      font-size .12rem
    p
      color #ccc
.photos
  display flex
  justify-content space-between
  >img
    width 30%
  &.business
    >img
      width 48%
</style>
