BaseLayout.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <script setup lang="ts">
  2. import _ from 'lodash'
  3. import FooterLayout from './FooterLayout.vue'
  4. import SideBar from './SideBar.vue'
  5. import HeaderLayout from './HeaderLayout.vue'
  6. import PageHeader from '@/components/PageHeader/PageHeader.vue'
  7. const drawer_visible = ref(false)
  8. const collapsed = ref(collapse())
  9. addEventListener('resize', _.throttle(() => {
  10. collapsed.value = collapse()
  11. }, 50))
  12. function getClientWidth() {
  13. return document.body.clientWidth
  14. }
  15. function collapse() {
  16. return getClientWidth() < 1280
  17. }
  18. </script>
  19. <template>
  20. <ALayout class="min-h-screen">
  21. <div class="drawer-sidebar">
  22. <ADrawer
  23. v-model:open="drawer_visible"
  24. :closable="false"
  25. placement="left"
  26. width="256"
  27. @close="drawer_visible = false"
  28. >
  29. <SideBar />
  30. </ADrawer>
  31. </div>
  32. <ALayoutSider
  33. v-model:collapsed="collapsed"
  34. collapsible
  35. :style="{ zIndex: 11 }"
  36. theme="light"
  37. class="layout-sider"
  38. >
  39. <SideBar />
  40. </ALayoutSider>
  41. <ALayout>
  42. <ALayoutHeader :style="{ position: 'sticky', top: '0', zIndex: 10, width: '100%' }">
  43. <HeaderLayout @click-un-fold="drawer_visible = true" />
  44. </ALayoutHeader>
  45. <ALayoutContent>
  46. <PageHeader />
  47. <div class="router-view">
  48. <RouterView v-slot="{ Component, route }">
  49. <Transition name="slide-fade">
  50. <component
  51. :is="Component"
  52. :key="route.path"
  53. />
  54. </Transition>
  55. </RouterView>
  56. </div>
  57. </ALayoutContent>
  58. <ALayoutFooter>
  59. <FooterLayout />
  60. </ALayoutFooter>
  61. </ALayout>
  62. </ALayout>
  63. </template>
  64. <style lang="less" scoped>
  65. .layout-sider {
  66. @media (max-width: 600px) {
  67. display: none;
  68. }
  69. }
  70. .drawer-sidebar {
  71. @media (min-width: 600px) {
  72. display: none;
  73. }
  74. }
  75. </style>
  76. <style lang="less">
  77. .layout-sider .sidebar {
  78. ul.ant-menu-inline.ant-menu-root {
  79. height: calc(100vh - 160px);
  80. overflow-y: auto;
  81. overflow-x: hidden;
  82. .ant-menu-item {
  83. width: unset;
  84. }
  85. }
  86. ul.ant-menu-inline-collapsed {
  87. height: calc(100vh - 200px);
  88. overflow-y: auto;
  89. overflow-x: hidden;
  90. }
  91. }
  92. </style>
  93. <style lang="less">
  94. .slide-fade-enter-active {
  95. transition: all .3s ease-in-out;
  96. }
  97. .slide-fade-leave-active {
  98. transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  99. }
  100. .slide-fade-enter-from, .slide-fade-enter-to, .slide-fade-leave-to
  101. /* .slide-fade-leave-active for below version 2.1.8 */ {
  102. transform: translateX(10px);
  103. opacity: 0;
  104. }
  105. body {
  106. overflow: unset !important;
  107. }
  108. .ant-layout-header {
  109. padding: 0 !important;
  110. }
  111. .ant-layout-sider {
  112. &.ant-layout-sider-has-trigger {
  113. padding-bottom: 0;
  114. }
  115. box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);
  116. }
  117. .ant-drawer-body {
  118. .sidebar .logo {
  119. box-shadow: 0 1px 0 0 #e8e8e8;
  120. }
  121. .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
  122. border-right: 0 !important;
  123. }
  124. }
  125. .ant-table-small {
  126. font-size: 13px;
  127. }
  128. .ant-card-bordered {
  129. }
  130. .header-notice-wrapper .ant-tabs-content {
  131. max-height: 250px;
  132. }
  133. .header-notice-wrapper .ant-tabs-tabpane-active {
  134. overflow-y: scroll;
  135. }
  136. .ant-layout-footer {
  137. @media (max-width: 320px) {
  138. padding: 10px;
  139. }
  140. }
  141. .ant-layout-content {
  142. min-height: auto;
  143. .router-view {
  144. padding: 20px;
  145. @media (max-width: 512px) {
  146. padding: 20px 0;
  147. }
  148. position: relative;
  149. }
  150. }
  151. .ant-layout-footer {
  152. text-align: center;
  153. }
  154. </style>