inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
3     <!-- pageHeader , route meta :true on hide -->
4     <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar">
5       <slot slot="action" name="action"></slot>
6       <slot slot="content" name="headerContent"></slot>
7       <div slot="content" v-if="!this.$slots.headerContent && description">
8         <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
9         <div class="link">
10         </div>
11       </div>
12       <slot slot="extra" name="extra">
13         <div class="extra-img">
14           <img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/>
15         </div>
16       </slot>
17       <div slot="pageMenu">
18         <div class="page-menu-search" v-if="search">
19           <a-input-search
20             style="width: 80%; max-width: 522px;"
21             placeholder="请输入..."
22             size="large"
23             enterButton="搜索"
24           />
25         </div>
26         <div class="page-menu-tabs" v-if="tabs && tabs.items">
27           <!-- @change="callback" :activeKey="activeKey" -->
28           <a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback">
29             <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
30           </a-tabs>
31         </div>
32       </div>
33     </page-header>
34     <div class="content">
35       <div class="page-header-index-wide">
36         <slot>
37           <!-- keep-alive  -->
38           <keep-alive v-if="multiTab">
39             <router-view ref="content" />
40           </keep-alive>
41           <router-view v-else ref="content" style="margin: -12px -14px 0;"/>
42         </slot>
43       </div>
44     </div>
45   </div>
46 </template>
47
48 <script>
49 import { mapState } from 'vuex'
50 import PageHeader from '@/components/PageHeader'
51
52 export default {
53   name: 'PageView',
54   components: {
55     PageHeader
56   },
57   props: {
58     avatar: {
59       type: String,
60       default: null
61     },
62     title: {
63       type: [String, Boolean],
64       default: true
65     },
66     logo: {
67       type: String,
68       default: null
69     },
70     directTabs: {
71       type: Object,
72       default: null
73     }
74   },
75   data () {
76     return {
77       pageTitle: null,
78       description: null,
79       linkList: [],
80       extraImage: '',
81       search: false,
82       tabs: {}
83     }
84   },
85   computed: {
86     ...mapState({
87       multiTab: state => state.app.multiTab
88     })
89   },
90   mounted () {
91     this.tabs = this.directTabs
92     this.getPageMeta()
93   },
94   updated () {
95     this.getPageMeta()
96   },
97   methods: {
98     getPageMeta () {
99       // eslint-disable-next-line
100       //文字样式//(typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
101       // 为了简洁改为无
102       this.pageTitle = ''
103
104       const content = this.$refs.content
105       if (content) {
106         if (content.pageMeta) {
107           Object.assign(this, content.pageMeta)
108         } else {
109           this.description = content.description
110           this.linkList = content.linkList
111           this.extraImage = content.extraImage
112           this.search = content.search === true
113           this.tabs = content.tabs
114         }
115       }
116     }
117   }
118 }
119 </script>
120
121 <style lang="less" scoped>
122   .content {
123     margin: 24px 24px 0;
124     .link {
125       margin-top: 16px;
126       &:not(:empty) {
127         margin-bottom: 16px;
128       }
129       a {
130         margin-right: 32px;
131         height: 24px;
132         line-height: 24px;
133         display: inline-block;
134         i {
135           font-size: 24px;
136           margin-right: 8px;
137           vertical-align: middle;
138         }
139         span {
140           height: 24px;
141           line-height: 24px;
142           display: inline-block;
143           vertical-align: middle;
144         }
145       }
146     }
147   }
148   .page-menu-search {
149     text-align: center;
150     margin-bottom: 16px;
151   }
152   .page-menu-tabs {
153     margin-top: 48px;
154   }
155
156   .extra-img {
157     margin-top: -60px;
158     text-align: center;
159     width: 195px;
160
161     img {
162       width: 100%;
163     }
164   }
165
166   .mobile {
167     .extra-img{
168       margin-top: 0;
169       text-align: center;
170       width: 96px;
171
172       img{
173         width: 100%;
174       }
175     }
176   }
177 </style>