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>