<template>
  <div class="check-comparison">
    <span class="line line1"/>
    <span class="line line2"/>
    <span class="label label1">
      <span class="dot"/>
      开具整改单数：12
    </span>
    <span class="label label2">
      完成检查小区数：64
      <span class="dot"/>
    </span>
    <div>
      <span v-for="i in 36" :key="i" :class="getClass(i)"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DayCheckComparison',
  methods: {
    getClass(i) {
      if (i < 10) {
        return 'red'
      } else {
        return 'blue'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.check-comparison
  width 100%
  height 100%
  display flex
  align-items center
  position relative
  .line
    position absolute
    width 1px
    height 2rem
    &.line1
      background red
      left 3%
      top 30%
    &.line2
      background $color-blue
      right 3%
      bottom 30%
  .label
    position absolute
    display flex
    align-items center
    .dot
      display inline-block
      width 0.4rem
      height 0.4rem
      border-radius 50%
    &.label1
      color red
      left 2.4%
      top 22.5%
      .dot
        margin-right 0.5rem
        background red
    &.label2
      color $color-blue
      right 2.2%
      bottom 22.5%
      .dot
        background $color-blue
        margin-left 0.5rem
  >div
    background-color rgba(0,0,0,0.8)
    border-radius 0.5rem
    padding 0.5rem
    height 2rem
    width 100%
    display flex
    justify-content space-around
    >span
      width 2%
      height 100%
      border-radius 0.1rem
      &.red
        background red
        box-shadow 0 0 0.3rem 0.1rem red
      &.blue
        background $color-blue
        box-shadow 0 0 0.3rem 0.1rem $color-blue
</style>
