<!--
 * @Description: 城市治理右半,三行四列
 * @Author: 王晓颖
 * @Date: 2020-09-04 13:59:13
 -->
<template>
  <div class="chart-container">
    <div class="right">
      <div class="modular">
        <case-all/>
        <!--&lt;!&ndash;整个：左右50%&ndash;&gt;-->
        <!--<div class="modular-row-100">-->
          <!--<div class="modular-col-50 modular-padding-right">-->
            <!--<div class="modular-row-30">-->
              <!--<introduce/>-->
            <!--</div>-->
            <!--<div class="modular-row-60">-->
                <!--<div class="modular-col-50">-->
                  <!--<div class="modular-row-50 modular-padding-right">-->
                    <!--<pipe-alarm-bar/>-->
                  <!--</div>-->
                  <!--<div class="modular-row-50 modular-padding-right">-->
                    <!--<pipe-alarm-earth/>-->
                  <!--</div>-->
                <!--</div>-->
                <!--<div class="modular-col-50">-->
                  <!--<div class="modular-row-50 modular-padding-left">-->
                    <!--<pipe-alarm-pie/>-->
                  <!--</div>-->
                  <!--<div class="modular-row-50 modular-padding-left">-->
                    <!--<pipe-alarm-line/>-->
                  <!--</div>-->
                <!--</div>-->
            <!--</div>-->
          <!--</div>&lt;!&ndash; .col50 over&ndash;&gt;-->
          <!--<div class="modular-col-50">-->
            <!--<div class="modular-row-30">-->
              <!--<introduce2/>-->
            <!--</div>-->
            <!--<div class="modular-row-60">-->
              <!--<div class="modular-col-50">-->
                <!--<div class="modular-row-50 modular-padding-right">-->
                  <!--<case-count-earth/>-->
                <!--</div>-->
                <!--<div class="modular-row-50 modular-padding-right">-->
                  <!--<case-rank/>-->
                <!--</div>-->
              <!--</div>-->
              <!--<div class="modular-col-50">-->
                <!--<div class="modular-row-50 modular-padding-left">-->
                  <!--<case-line/>-->
                <!--</div>-->
                <!--<div class="modular-row-50 modular-padding-left">-->
                  <!--<case-pie/>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>&lt;!&ndash; .col50 over&ndash;&gt;-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>

<script>
import Corner1 from '@/components/corner/Corner1'
import wisdomTraffic from '@/views/wisdomTraffic/index2'
import Introduce from './components/introduce/introduce'
import PopulationPie from './components/cityGovern/components/populationPie'
import SpecialBar from './components/cityGovern/components/specialBar'
import YouthPie from './components/cityGovern/components/younthPie'
import Introduce2 from './components/introduce/introduce2'
import PipeAlarmBar from './components/pipeAlarm/components/pipeAlarmBar'
import PipeAlarmPie from './components/pipeAlarm/components/pipeAlarmPie'
import PipeAlarmLine from './components/pipeAlarm/components/pipeAlarmLine'
import PipeAlarmEarth from './components/pipeAlarm/components/pipeAlarmEarth'
import CaseCountEarth from './components/cityManage/caseCountEarth'
import CaseRank from './components/cityManage/caseRank'
import CaseLine from './components/cityManage/caseLine'
import CasePie from './components/cityManage/casePie'
import CaseAll from './components/cityManage/caseAll'
export default {
  name: 'CityManageRight',
  components: {
    CaseAll,
    CasePie,
    CaseLine,
    CaseRank,
    CaseCountEarth,
    PipeAlarmEarth,
    PipeAlarmLine,
    PipeAlarmPie,
    PipeAlarmBar,
    Introduce2,
    YouthPie,
    SpecialBar,
    PopulationPie,
    Introduce,
    Corner1,
    wisdomTraffic}

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-container{
    position: absolute;
    padding: 0 0.3rem 0.1rem 0.3rem;
    top:0;
    right:0;
    width: 30%;
    height:100%;
    display: flex;
    z-index: 20;
    justify-content: space-between;
    background: transparent;
    .right{
      width:100%;
      height:100%;
      display: flex;
      justify-content: center;
      /*position: relative;*/
    }

  }
</style>