<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="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="photo" />
      </div>
    </div>
    <div>
      <m-sub>历史文化场馆</m-sub>
      <div class="history photos">
        <img v-for="photo in historyPhotos" :key="photo" :src="photo" />
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import img1 from '@/assets/images/img1.png'
import img2 from '@/assets/images/img2.png'
import img3 from '@/assets/images/img3.png'
import img4 from '@/assets/images/img4.png'
import img5 from '@/assets/images/img5.png'
import img6 from '@/assets/images/img6.png'
import img7 from '@/assets/images/img7.png'
import img8 from '@/assets/images/img8.png'
import photo1 from '@/assets/images/photo1.png'
import photo2 from '@/assets/images/photo2.png'
import photo3 from '@/assets/images/photo3.png'
import photo4 from '@/assets/images/photo4.png'
import photo5 from '@/assets/images/photo5.png'

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 },
      { name: '便民商店', value: 1276, icon: img2 },
      { name: '便利店', value: 285, icon: img3 },
      { name: '电话亭', value: 853, icon: img4 },
      { name: '餐车', value: 1276, icon: img5 },
      { name: '街面废物箱', value: 285, icon: img6 },
      { name: '公厕', value: 200, icon: img7 },
      { name: '垃圾箱房', value: 1957, icon: img8 },
    ])
    const businessPhotos = ref([photo1, photo2])
    const historyPhotos = ref([photo3, photo4, photo5])
    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>
