<!-- * @Author: your name * @Date: 2022-04-11 14:11:04 * @LastEditTime: 2022-04-14 10:45:52 * @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/operationMonitor/xunjianxuncha/index.vue --> <template> <div class="app-container xjxc"> <div class="wrapper flex-h"> <div class="top flex"> <div class="left"> <Left /> </div> <div class="middle"> <Middle /> </div> <div class="right"> <Right /> </div> </div> <div class="middle"></div> <div class="bottom"> <MapBottom/> </div> </div> </div> </template> <script> import Left from "./components/Left"; import Middle from "./components/Middle"; import Right from "./components/Right"; import MapBottom from "./components/MapBottom"; export default { components: { Left, Middle, Right, MapBottom }, data() { return { }; }, mounted(){ } }; </script> <style lang="scss" scoped> .app-main { } .xjxc { height: calc(100vh - 50px) !important; } .flex { display: flex; justify-content: space-between; } .flex-h { display: flex; // justify-content: space-around; flex-direction: column; height: 100%; .top { height: 38.7%; .left { width: 36.5%; padding: 15px 24px 19px; } .middle { width: 35.3%; padding: 15px 80px 19px 71px; } .right { width: 25.2%; padding: 15px 29px; } > div { // box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1); box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1); border-radius: 3px; } } >.middle { margin: 5px 0; background: repeating-linear-gradient(135deg, transparent, transparent 3px, #D6D6D6 3px, #D6D6D6 8px); height: 2px; } .bottom { flex: 1; background-color: red; } > div { // height: 50%; } } </style>