1- <template >
2- <div :style =" !$route.meta.pageHeader ? 'margin: -24px -24px 0px;' : null" >
3- <!-- pageHeader , route meta hideHeader:true on hide -->
4- <page-header v-if =" !$route.meta.pageHeader" :title =" title" :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 && desc" >
8- <p style =" font-size : 14px ;color : rgba (0 ,0 ,0 ,.65 )" >{{ desc }}</p >
9- <div class =" link" >
10- <template v-for =" (link , index ) in linkList " >
11- <a :key =" index" :href =" link.href" >
12- <a-icon :type =" link.icon" />
13- <span >{{ link.title }}</span >
14- </a >
15- </template >
16- </div >
17- </div >
18- <slot slot =" extra" name =" extra" ></slot >
19- <div slot =" pageMenu" >
20- <div class =" page-menu-search" v-if =" search" >
21- <a-input-search style =" width : 80% ; max-width : 522px ;" placeholder =" 请输入..." size =" large" enterButton =" 搜索" />
22- </div >
23- <div class =" page-menu-tabs" v-if =" tabs && tabs.items" >
24- <!-- @change="callback" :activeKey="activeKey" -->
25- <a-tabs :tabBarStyle =" {margin: 0}" @change =" tabs.callback" :activeKey =" tabs.active()" >
26- <a-tab-pane v-for =" item in tabs.items" :tab =" item.title" :key =" item.key" ></a-tab-pane >
27- </a-tabs >
28- </div >
29- </div >
30- </page-header >
31- <div class =" content" >
32- <div :class =" ['page-header-index-wide']" >
33- <slot ></slot >
34- </div >
35- </div >
36- </div >
37- </template >
38-
39- <script >
40- import PageHeader from ' ./PageHeader'
41-
42- export default {
43- name: ' LayoutContent' ,
44- components: {
45- PageHeader
46- },
47- // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
48- props: {
49- desc: {
50- type: String ,
51- default: null
52- },
53- logo: {
54- type: String ,
55- default: null
56- },
57- title: {
58- type: String ,
59- default: null
60- },
61- avatar: {
62- type: String ,
63- default: null
64- },
65- linkList: {
66- type: Array ,
67- default: null
68- },
69- extraImage: {
70- type: String ,
71- default: null
72- },
73- search: {
74- type: Boolean ,
75- default: false
76- },
77- tabs: {
78- type: Object ,
79- default : () => {}
80- }
81- },
82- methods: {
83- }
84- }
85- </script >
86-
87- <style lang="less" scoped>
88- .content {
89- margin : 24px 24px 0 ;
90-
91- .link {
92- margin-top : 16px ;
93-
94- & :not (:empty ) {
95- margin-bottom : 16px ;
96- }
97- a {
98- margin-right : 32px ;
99- height : 24px ;
100- line-height : 24px ;
101- display : inline-block ;
102-
103- i {
104- font-size : 24px ;
105- margin-right : 8px ;
106- vertical-align : middle ;
107- }
108- span {
109- height : 24px ;
110- line-height : 24px ;
111- display : inline-block ;
112- vertical-align : middle ;
113- }
114- }
115- }
116- }
117- .page-menu-search {
118- text-align : center ;
119- margin-bottom : 16px ;
120- }
121- .page-menu-tabs {
122- margin-top : 48px ;
123- }
1+ <template >
2+ <div :style =" !$route.meta.pageHeader ? 'margin: -24px -24px 0px;' : null" >
3+ <!-- pageHeader , route meta hideHeader:true on hide -->
4+ <page-header v-if =" !$route.meta.pageHeader" :title =" title" :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 && desc" >
8+ <p style =" font-size : 14px ;color : rgba (0 ,0 ,0 ,.65 )" >{{ desc }}</p >
9+ <div class =" link" >
10+ <template v-for =" (link , index ) in linkList " >
11+ <a :key =" index" :href =" link.href" >
12+ <a-icon :type =" link.icon" />
13+ <span >{{ link.title }}</span >
14+ </a >
15+ </template >
16+ </div >
17+ </div >
18+ <slot slot =" extra" name =" extra" ></slot >
19+ <div slot =" pageMenu" >
20+ <div class =" page-menu-search" v-if =" search" >
21+ <a-input-search style =" width : 80% ; max-width : 522px ;" placeholder =" 请输入..." size =" large" enterButton =" 搜索" />
22+ </div >
23+ <div class =" page-menu-tabs" v-if =" tabs && tabs.items" >
24+ <!-- @change="callback" :activeKey="activeKey" -->
25+ <a-tabs :tabBarStyle =" {margin: 0}" @change =" tabs.callback" :activeKey =" tabs.active()" >
26+ <a-tab-pane v-for =" item in tabs.items" :tab =" item.title" :key =" item.key" ></a-tab-pane >
27+ </a-tabs >
28+ </div >
29+ </div >
30+ </page-header >
31+ <div class =" content" >
32+ <div :class =" ['page-header-index-wide']" >
33+ <slot ></slot >
34+ </div >
35+ </div >
36+ </div >
37+ </template >
38+
39+ <script >
40+ import PageHeader from ' ./PageHeader'
41+
42+ export default {
43+ name: ' LayoutContent' ,
44+ components: {
45+ PageHeader
46+ },
47+ // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
48+ props: {
49+ desc: {
50+ type: String ,
51+ default: null
52+ },
53+ logo: {
54+ type: String ,
55+ default: null
56+ },
57+ title: {
58+ type: String ,
59+ default: null
60+ },
61+ avatar: {
62+ type: String ,
63+ default: null
64+ },
65+ linkList: {
66+ type: Array ,
67+ default: null
68+ },
69+ extraImage: {
70+ type: String ,
71+ default: null
72+ },
73+ search: {
74+ type: Boolean ,
75+ default: false
76+ },
77+ tabs: {
78+ type: Object ,
79+ default : () => ({})
80+ }
81+ },
82+ methods: {
83+ }
84+ }
85+ </script >
86+
87+ <style lang="less" scoped>
88+ .content {
89+ margin : 24px 24px 0 ;
90+
91+ .link {
92+ margin-top : 16px ;
93+
94+ & :not (:empty ) {
95+ margin-bottom : 16px ;
96+ }
97+ a {
98+ margin-right : 32px ;
99+ height : 24px ;
100+ line-height : 24px ;
101+ display : inline-block ;
102+
103+ i {
104+ font-size : 24px ;
105+ margin-right : 8px ;
106+ vertical-align : middle ;
107+ }
108+ span {
109+ height : 24px ;
110+ line-height : 24px ;
111+ display : inline-block ;
112+ vertical-align : middle ;
113+ }
114+ }
115+ }
116+ }
117+ .page-menu-search {
118+ text-align : center ;
119+ margin-bottom : 16px ;
120+ }
121+ .page-menu-tabs {
122+ margin-top : 48px ;
123+ }
124124 </style >
0 commit comments