<template>
  <div class="right-component">
    <p class="title">发现督查</p>
    <div>
      <div class="left">
        <m-card title="行业监管"><IndustrySupervise /></m-card>
        <m-card title="物业维修"><PropertyRepair /></m-card>
      </div>
      <div class="right">
        <m-card title="投诉信访"><ComplaintReport /></m-card>
        <m-card title="联勤联动"><Combine /></m-card>
      </div>
    </div>
  </div>
</template>

<script>
import IndustrySupervise from './industry-supervise'
import PropertyRepair from './property-repair'
import ComplaintReport from './complaint-report'
import Combine from './combine'
export default {
  name: 'RightComponent',
  components: {
    IndustrySupervise,
    PropertyRepair,
    ComplaintReport,
    Combine,
  },
}
</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
      >div
        height 65%
        &:nth-child(2)
          height 35%
</style>
