<!-- * @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>