<template> <div :style="!$route.meta.pageHeader ? 'margin: -10px -24px 0;' : null"> <!-- pageHeader , route meta hideHeader:true on hide --> <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar"> <slot slot="action" name="action"></slot> <slot slot="content" name="headerContent"></slot> <div slot="content" v-if="!this.$slots.headerContent && desc"> <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p> <div class="link"> <template v-for="(link, index) in linkList"> <a :key="index" :href="link.href"> <a-icon :type="link.icon"/> <span>{{ link.title }}</span> </a> </template> </div> </div> <slot slot="extra" name="extra"></slot> <div slot="pageMenu"> <div class="page-menu-search" v-if="search"> <a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索"/> </div> <div class="page-menu-tabs" v-if="tabs && tabs.items"> <!-- @change="callback" :activeKey="activeKey" --> <a-tabs :tabBarStyle="{margin: 0}" @change="tabs.callback" :activeKey="tabs.active()"> <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane> </a-tabs> </div> </div> </page-header> <div class="content"> <div :class="['page-header-index-wide']"> <slot></slot> </div> </div> </div> </template> <script> import PageHeader from './PageHeader' export default { name: "LayoutContent", components: { PageHeader }, // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'] props: { desc: { type: String, default: null }, logo: { type: String, default: null }, title: { type: String, default: null }, avatar: { type: String, default: null }, linkList: { type: Array, default: null }, extraImage: { type: String, default: null }, search: { type: Boolean, default: false }, tabs: { type: Object, default: () => { } } }, methods: {} } </script> <style lang="less" scoped> .content { margin: 24px 24px 0; .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; } .page-header[data-v-6740ec88] { margin: 0px 24px 0; } </style>