github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/layout/MainLayout.vue (about) 1 <template> 2 <div class="main"> 3 <div class="header-container"> 4 <Header></Header> 5 </div> 6 <div class="content-container"> 7 <router-view></router-view> 8 </div> 9 10 <Update></Update> 11 12 <!-- <div class="footer-container"> 13 <Footer></Footer> 14 </div> --> 15 </div> 16 </template> 17 18 <script> 19 import Header from "./Header"; 20 import Update from "./Update.vue"; 21 22 export default { 23 name: 'MainLayout', 24 components: { 25 Header, Update, 26 }, 27 data () { 28 return { 29 } 30 }, 31 computed: { 32 }, 33 created () { 34 }, 35 mounted () { 36 }, 37 methods: { 38 } 39 } 40 </script> 41 42 <style lang="less"> 43 @import './MainLayout.less'; 44 @import './Zui.less'; 45 </style> 46 <style lang="less" scoped> 47 .main { 48 display:flex; 49 flex-flow: column; 50 height: 100%; 51 52 .header-container { 53 height: 50px; 54 color: #fff; 55 background-color: #0056c9; 56 border-bottom: 1px solid #e9f2fb; 57 } 58 .footer-container { 59 height: 40px; 60 background: #fff; 61 border-top: 1px solid #eff1f7; 62 } 63 .content-container { 64 flex: 1; 65 padding: 0 15px 15px; 66 } 67 } 68 </style>