PageView.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
  3. <PageHeader v-if="!multiTab"></PageHeader>
  4. <div class="content" :style="{ height: pageHeight+'px' }">
  5. <div class="page-header-index-wide">
  6. <slot>
  7. <router-view ref="content" />
  8. </slot>
  9. </div>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import PageHeader from '@/components/PageHeader/PageHeader.vue'
  15. import { mapState } from 'vuex'
  16. import { on, off } from '@/libs/tools'
  17. export default {
  18. name: 'PageView',
  19. components: {
  20. PageHeader
  21. },
  22. props: {
  23. avatar: {
  24. type: String,
  25. default: null
  26. },
  27. title: {
  28. type: [String, Boolean],
  29. default: true
  30. },
  31. logo: {
  32. type: String,
  33. default: null
  34. },
  35. directTabs: {
  36. type: Object,
  37. default: null
  38. }
  39. },
  40. data () {
  41. return {
  42. pageTitle: null,
  43. description: null,
  44. linkList: [],
  45. extraImage: '',
  46. search: false,
  47. tabs: {},
  48. pageHeight: 0
  49. }
  50. },
  51. computed: {
  52. ...mapState({
  53. multiTab: state => state.app.multiTab,
  54. closeTabPages: state => state.app.closeTabPages
  55. })
  56. },
  57. mounted () {
  58. this.tabs = this.directTabs
  59. this.setpageH()
  60. on(window, 'resize', this.setpageH)
  61. },
  62. beforeDestroy () {
  63. off(window, 'resize', this.setpageH)
  64. },
  65. activated () {
  66. this.setpageH()
  67. },
  68. methods: {
  69. setpageH () {
  70. this.$nextTick(() => {
  71. this.$store.dispatch('SetWinHeight', window.innerHeight)
  72. this.pageHeight = window.innerHeight - 85
  73. })
  74. }
  75. }
  76. }
  77. </script>
  78. <style lang="less" scoped>
  79. .content {
  80. margin: 8px 12px 0;
  81. .page-header-index-wide{
  82. height: 100%;
  83. >div{
  84. height: 100%;
  85. overflow: auto;
  86. }
  87. }
  88. .link {
  89. margin-top: 16px;
  90. &:not(:empty) {
  91. margin-bottom: 16px;
  92. }
  93. a {
  94. margin-right: 32px;
  95. height: 24px;
  96. line-height: 24px;
  97. display: inline-block;
  98. i {
  99. font-size: 24px;
  100. margin-right: 8px;
  101. vertical-align: middle;
  102. }
  103. span {
  104. height: 24px;
  105. line-height: 24px;
  106. display: inline-block;
  107. vertical-align: middle;
  108. }
  109. }
  110. }
  111. }
  112. .page-menu-search {
  113. text-align: center;
  114. margin-bottom: 16px;
  115. }
  116. .page-menu-tabs {
  117. margin-top: 48px;
  118. }
  119. .extra-img {
  120. margin-top: -60px;
  121. text-align: center;
  122. width: 195px;
  123. img {
  124. width: 100%;
  125. }
  126. }
  127. .mobile {
  128. .extra-img{
  129. margin-top: 0;
  130. text-align: center;
  131. width: 96px;
  132. img{
  133. width: 100%;
  134. }
  135. }
  136. }
  137. </style>