PageView.vue 2.6 KB

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