<!--
 * @Author: your name
 * @Date: 2022-04-19 09:46:51
 * @LastEditTime: 2022-04-21 13:54:34
 * @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/conponents/Middle.vue
-->
<template>
  <div class="middle-components all-flex-h">
    <div class="top">
      <img src="@/assets/image-overview/titlepic.jpg" alt="" />
    </div>
    <div class="bottom">
      <CharsBoxE/>
    </div>
  </div>
</template>

<script>
import CharsBoxE from "./CharBoxE";
export default {
  name: "",
  components: {
    CharsBoxE,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.middle-components {
  height: 100%;
  > div {
    &.top {
      padding: 15px 0;
      text-align: center;
    }
    &.bottom {
      flex: 1;
      box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
