index.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <div :class="classObj" class="app-wrapper">
  3. <div v-if="classObj.mobile && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
  4. <sidebar class="sidebar-container"/>
  5. <navbar/>
  6. <div class="main-container">
  7. <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
  8. <hr/>
  9. <app-main/>
  10. </div>
  11. <right-panel v-if="showSettings">
  12. <Settings/>
  13. </right-panel>
  14. </div>
  15. </template>
  16. <script lang="ts">
  17. import { Component } from "vue-property-decorator";
  18. import { mixins } from "vue-class-component";
  19. import { DeviceType, AppModule } from "@/store/modules/app";
  20. import { AppMain, Navbar, Sidebar, Breadcrumb, Settings } from "./components";
  21. import ResizeMixin from "./mixin/resize";
  22. import RightPanel from '@/components/RightPanel/index.vue'
  23. import { SettingsModule } from "@/store/modules/settings";
  24. @Component({
  25. name: "Layout",
  26. components: {
  27. AppMain,
  28. Navbar,
  29. Sidebar,
  30. Breadcrumb,
  31. RightPanel,
  32. Settings
  33. },
  34. })
  35. export default class extends mixins(ResizeMixin) {
  36. get classObj() {
  37. return {
  38. hideSidebar: !this.sidebar.opened,
  39. openSidebar: this.sidebar.opened,
  40. withoutAnimation: this.sidebar.withoutAnimation,
  41. mobile: this.device === DeviceType.Mobile,
  42. };
  43. }
  44. get showSettings() {
  45. return SettingsModule.showSettings;
  46. }
  47. private handleClickOutside() {
  48. AppModule.CloseSideBar(false);
  49. }
  50. }
  51. </script>
  52. <style lang="scss" scoped>
  53. .app-wrapper {
  54. @include clearfix;
  55. position: relative;
  56. height: 100%;
  57. width: 100%;
  58. }
  59. .drawer-bg {
  60. background: #000;
  61. opacity: 0.3;
  62. width: 100%;
  63. top: 0;
  64. height: 100%;
  65. position: absolute;
  66. z-index: 999;
  67. }
  68. .main-container {
  69. height: calc(100% - 50px);
  70. transition: margin-left 0.28s;
  71. margin-left: $sideBarWidth;
  72. position: relative;
  73. overflow-y: hidden;
  74. }
  75. .sidebar-container {
  76. transition: width 0.28s;
  77. width: $sideBarWidth !important;
  78. height: 100%;
  79. position: fixed;
  80. font-size: 0px;
  81. top: 0;
  82. bottom: 0;
  83. left: 0;
  84. z-index: 1001;
  85. overflow: hidden;
  86. }
  87. .hideSidebar {
  88. .main-container {
  89. margin-left: 54px;
  90. }
  91. .sidebar-container {
  92. width: 54px !important;
  93. }
  94. }
  95. /* for mobile response 适配移动端 */
  96. .mobile {
  97. .main-container {
  98. margin-left: 0px;
  99. }
  100. .sidebar-container {
  101. transition: transform 0.28s;
  102. width: $sideBarWidth !important;
  103. }
  104. &.openSidebar {
  105. position: fixed;
  106. top: 0;
  107. }
  108. &.hideSidebar {
  109. .sidebar-container {
  110. pointer-events: none;
  111. transition-duration: 0.3s;
  112. transform: translate3d(-$sideBarWidth, 0, 0);
  113. }
  114. }
  115. }
  116. .withoutAnimation {
  117. .main-container,
  118. .sidebar-container {
  119. transition: none;
  120. }
  121. }
  122. </style>