main-layout.vue 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <div id="main-layout">
  3. <div v-if="!toLogin()">
  4. <el-container>
  5. <el-header height="70px" class="head">
  6. <heads></heads>
  7. </el-header>
  8. <el-container class="contain">
  9. <el-aside class="side">
  10. <menus></menus>
  11. </el-aside>
  12. <el-main class="main">
  13. <router-view />
  14. </el-main>
  15. </el-container>
  16. </el-container>
  17. </div>
  18. <div v-else>
  19. <router-view />
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import heads from '@/layout/layout-part/heads.vue';
  25. import menus from '@/layout/layout-part/menus.vue';
  26. import { mapActions, mapState } from 'vuex';
  27. export default {
  28. name: 'main-layout',
  29. props: {},
  30. components: {
  31. menus,
  32. heads,
  33. },
  34. data: () => ({}),
  35. created() {},
  36. computed: {},
  37. methods: {
  38. toLogin() {
  39. let route = window.location.pathname;
  40. return route.includes('login');
  41. },
  42. },
  43. };
  44. </script>
  45. <style lang="less" scoped>
  46. .head {
  47. margin: 0;
  48. padding: 0;
  49. width: 100%;
  50. background: #2a2e43;
  51. }
  52. .contain {
  53. height: 100%;
  54. background: #eeeeee;
  55. }
  56. .side {
  57. width: 220px !important;
  58. min-height: 867px;
  59. background: #ffffff;
  60. }
  61. .main {
  62. margin: 0;
  63. padding: 20px;
  64. min-height: 550px;
  65. }
  66. </style>