<template>
  <div class="thematic-map">
    <div v-for="section in list" :key="section.title">
      <p>{{section.title}}</p>
      <div>
        <div class="button" v-for="item in section.data" :key="item.name">
          <p>{{item.name}}</p>
          <span class="bottom"></span>
          <span class="right"></span>
          <span class="top"></span>
          <span class="left"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ThematicMap',
  data() {
    return {
      list: [
        {title: '综合监管', data: [
          {name: '小区健康度'},
          {name: '物业督查'},
        ]},
        {title: '962121热线', data: [
          {name: '热线实况'},
          {name: '实时报修'},
        ]},
        {title: '智能感知', data: [
          {name: '智慧电梯'},
          {name: '长桥四村'},
          {name: '新冠疫情'},
        ]},
        {title: '灾情上报', data: [
          {name: '防汛防台'},
        ]},
      ]
    }
  },
}
</script>

<style lang="stylus" scoped>
.thematic-map
  width 100%
  height 100%
  font-weight bold
  overflow hidden
  >div
    >p
      color $light-blue
      margin-bottom .3rem
    >div
      display flex
      align-items center
      flex-wrap wrap
      margin-bottom .4rem
      .button
        position relative
        width 30%
        p
          width 100%
          height 100%
          color #fff
          padding .3rem .5rem
          background-color $black
          text-align center
          cursor pointer
          transition color 0.5s ease-in-out, background-color 0.5s ease-in-out
          &:hover
            color $light-blue
            background-color rgba(0,0,0,.1)
          &:hover ~ .bottom
            transform-origin bottom left
            transform scaleX(1)
          &:hover ~ .right
            transform-origin bottom right
            transform scaleY(1)
          &:hover ~ .top
            transform-origin top right
            transform scaleX(1)
          &:hover ~ .left
            transform-origin top left
            transform scaleY(1)
        span
          position absolute
          background-color $light-blue
          transition transform .1s ease
          &.bottom,
          &.top
            height 1px
            left 0
            right 0
            transform scaleX(0)
          &.left,
          &.right
            width 1px
            top 0
            bottom 0
            transform scaleY(0)
          &.bottom
            bottom 0
            transform-origin bottom right
          &.right
            right 0
            transform-origin top right
            transition-delay .05s
          &.top
            top 0
            transform-origin top left
            transition-delay .15s
          &.left
            left 0
            transform-origin bottom left
            transition-delay .25s
        &+.button
          margin-left 1rem
</style>
