123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
- <PageHeader v-if="!multiTab"></PageHeader>
- <div class="content" :style="{ height: pageHeight+'px' }">
- <div class="page-header-index-wide">
- <slot>
- <router-view ref="content" />
- </slot>
- </div>
- </div>
- </div>
- </template>
- <script>
- import PageHeader from '@/components/PageHeader/PageHeader.vue'
- import { mapState } from 'vuex'
- import { on, off } from '@/libs/tools'
- export default {
- name: 'PageView',
- components: {
- PageHeader
- },
- props: {
- avatar: {
- type: String,
- default: null
- },
- title: {
- type: [String, Boolean],
- default: true
- },
- logo: {
- type: String,
- default: null
- },
- directTabs: {
- type: Object,
- default: null
- }
- },
- data () {
- return {
- pageTitle: null,
- description: null,
- linkList: [],
- extraImage: '',
- search: false,
- tabs: {},
- pageHeight: 0
- }
- },
- computed: {
- ...mapState({
- multiTab: state => state.app.multiTab,
- closeTabPages: state => state.app.closeTabPages
- })
- },
- mounted () {
- this.tabs = this.directTabs
- this.setpageH()
- on(window, 'resize', this.setpageH)
- },
- beforeDestroy () {
- off(window, 'resize', this.setpageH)
- },
- activated () {
- this.setpageH()
- },
- methods: {
- setpageH () {
- this.$nextTick(() => {
- this.$store.dispatch('SetWinHeight', window.innerHeight)
- this.pageHeight = window.innerHeight - 85
- })
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .content {
- margin: 8px 12px 0;
- .page-header-index-wide{
- height: 100%;
- >div{
- height: 100%;
- overflow: auto;
- }
- }
- .link {
- margin-top: 16px;
- &:not(:empty) {
- margin-bottom: 16px;
- }
- a {
- margin-right: 32px;
- height: 24px;
- line-height: 24px;
- display: inline-block;
- i {
- font-size: 24px;
- margin-right: 8px;
- vertical-align: middle;
- }
- span {
- height: 24px;
- line-height: 24px;
- display: inline-block;
- vertical-align: middle;
- }
- }
- }
- }
- .page-menu-search {
- text-align: center;
- margin-bottom: 16px;
- }
- .page-menu-tabs {
- margin-top: 48px;
- }
- .extra-img {
- margin-top: -60px;
- text-align: center;
- width: 195px;
- img {
- width: 100%;
- }
- }
- .mobile {
- .extra-img{
- margin-top: 0;
- text-align: center;
- width: 96px;
- img{
- width: 100%;
- }
- }
- }
- </style>
|