index.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <div
  3. class="vab-layout-column"
  4. :class="{
  5. fixed: fixedHeader,
  6. 'no-tabs-bar': !showTabs,
  7. }"
  8. >
  9. <vab-column-bar />
  10. <div
  11. class="vab-main"
  12. :class="{
  13. ['vab-main-' + theme.columnStyle]: true,
  14. 'is-collapse-main': collapse,
  15. 'is-no-tabs': !showTabs,
  16. }"
  17. >
  18. <div
  19. class="vab-layout-header"
  20. :class="{
  21. 'fixed-header': fixedHeader,
  22. 'is-no-tabs': !showTabs,
  23. }"
  24. >
  25. <vab-nav />
  26. <vab-tabs v-show="showTabs" />
  27. </div>
  28. <vab-app-main />
  29. </div>
  30. </div>
  31. </template>
  32. <script lang="ts" setup>
  33. import { useSettingsStore } from '/@/store/modules/settings'
  34. defineOptions({
  35. name: 'VabLayoutColumn',
  36. })
  37. defineProps({
  38. collapse: {
  39. type: Boolean,
  40. default() {
  41. return false
  42. },
  43. },
  44. fixedHeader: {
  45. type: Boolean,
  46. default() {
  47. return true
  48. },
  49. },
  50. showTabs: {
  51. type: Boolean,
  52. default() {
  53. return true
  54. },
  55. },
  56. })
  57. const settingsStore = useSettingsStore()
  58. const { theme } = storeToRefs(settingsStore)
  59. </script>
  60. <style lang="scss" scoped>
  61. .vab-layout-column {
  62. .vab-main {
  63. &.is-collapse-main {
  64. &.vab-main-horizontal {
  65. margin-left: calc(var(--el-left-menu-width-min) * 1.3);
  66. :deep() {
  67. .fixed-header {
  68. width: calc(100% - var(--el-left-menu-width-min) * 1.3);
  69. }
  70. }
  71. }
  72. }
  73. }
  74. }
  75. </style>