<!--
 * @Author: your name
 * @Date: 2022-04-18 17:21:51
 * @LastEditTime: 2022-05-05 10:36:25
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/index.vue
-->
<template>
  <div class="app-container overview flex">
    <div class="left">
      <Left />
    </div>
    <div class="middle"><Middle /></div>
    <div class="right"><Right /></div>
  </div>
</template>

<script>
import Left from "./conponents/Left";
import Right from "./conponents/Right";
import Middle from "./conponents/Middle";
export default {
  components: {
    Left,
    Right,
    Middle,
  },
};
</script>

<style lang="scss" scoped>
.overview {
  width: 100%;
  height: calc(100vh - 50px) !important;
  > div {
    flex: 1;
    // background-color: red;
    height: 100%;
    margin-right: 3px;
    &.middle {
      width: 40%;
      flex: none;
      // background-color: blue;
    }
    &.right {
      margin-right: 0px;
    }
  }
}
</style>