<!--
 * @Author: your name
 * @Date: 2022-04-19 09:46:51
 * @LastEditTime: 2022-08-31 14:21:16
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @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 :style="{width:windowInnerWidth>1300 ?'100%':'80%'}" 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 {
      windowInnerWidth: 0,
    };
  },
  created() {
    this.windowInnerWidth = window.innerWidth;
  },
  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>