<template>
  <div class="right-component">
    <p class="title">发现督查</p>
    <div>
      <div class="left">
        <m-card title="智能发现"><SmartDiscover /></m-card>
        <m-card title="投诉报修"><ComplaintRepair /></m-card>
      </div>
      <div class="right">
        <m-card title="主动巡检"><Patrol /></m-card>
        <m-card title="联勤联动"><Combine /></m-card>
        <m-card title="鹰眼监控">
          <div class="monitor-video">
            <img v-for="img in imgs" :key="img" :src="require(`@/assets/images/${img}`)" />
          </div>
        </m-card>
      </div>
    </div>
  </div>
</template>

<script>
import SmartDiscover from './smart-discover'
import ComplaintRepair from './complaint-repair'
import Patrol from './patrol'
import Combine from './combine'
export default {
  name: 'RightComponent',
  components: {
    SmartDiscover,
    ComplaintRepair,
    Patrol,
    Combine,
  },
  data() {
    return {
      imgs: ['monitor1.png', 'monitor2.png', 'monitor3.png', 'monitor4.png']
    }
  },
}
</script>

<style lang="stylus" scoped>
.right-component
  z-index 99
  background-image url('../../assets/images/component-bg.png')
  background-repeat no-repeat
  background-size 100% 100%
  width 100%
  height calc(100vh - 0.5rem)
  position relative
  padding .15rem .1rem .1rem
  .title
    position absolute
    text-align center
    left 0
    right 0
    margin 0 auto
    font-size .14rem
    top -0.1rem
    text-shadow 0 0 .05rem #3391FF
    font-weight bold
  >div
    display flex
    width 100%
    height 100%
    >div
      flex 1
      &.left
        >div
          &:nth-child(1)
            height 70%
          &:nth-child(2)
            height 30%
      &.right
        >div
          &:nth-child(1)
          &:nth-child(2)
            height 40%
          &:nth-child(3)
            height 20%
  .monitor-video
    display flex
    flex-wrap wrap
    align-items center
    img
      width calc((100% - .3rem) / 4)
      height 80%
      +img
        margin-left .1rem
</style>
