inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div class="page-header">
3     <div class="page-header-index-wide">
4       <s-breadcrumb />
5       <div class="detail">
6         <div class="main" v-if="!$route.meta.hiddenHeaderContent">
7           <div class="row">
8             <img v-if="logo" :src="logo" class="logo"/>
9             <h1 v-if="title" class="title">{{ title }}</h1>
10             <div class="action">
11               <slot name="action"></slot>
12             </div>
13           </div>
14           <div class="row">
15             <div v-if="avatar" class="avatar">
16               <a-avatar :src="avatar" />
17             </div>
18             <div v-if="this.$slots.content" class="headerContent">
19               <slot name="content"></slot>
20             </div>
21             <div v-if="this.$slots.extra" class="extra">
22               <slot name="extra"></slot>
23             </div>
24           </div>
25           <div>
26             <slot name="pageMenu"></slot>
27           </div>
28         </div>
29       </div>
30     </div>
31   </div>
32 </template>
33
34 <script>
35 import Breadcrumb from '@/components/tools/Breadcrumb'
36
37 export default {
38   name: 'PageHeader',
39   components: {
40     's-breadcrumb': Breadcrumb
41   },
42   props: {
43     title: {
44       type: [String, Boolean],
45       default: true,
46       required: false
47     },
48     logo: {
49       type: String,
50       default: '',
51       required: false
52     },
53     avatar: {
54       type: String,
55       default: '',
56       required: false
57     }
58   },
59   data () {
60     return {}
61   }
62 }
63 </script>
64
65 <style lang="less" scoped>
66 .page-header {
67   background: #fff;
68   padding: 10px 32px 0;
69   border-bottom: 0px solid #e8e8e8;
70
71   .breadcrumb {
72     margin-bottom: 10px;
73   }
74
75   .detail {
76     display: flex;
77     /*margin-bottom: 16px;*/
78
79     .avatar {
80       flex: 0 1 72px;
81       margin: 0 24px 8px 0;
82
83       & > span {
84         border-radius: 72px;
85         display: block;
86         width: 72px;
87         height: 72px;
88       }
89     }
90
91     .main {
92       width: 100%;
93       flex: 0 1 auto;
94
95       .row {
96         display: flex;
97         width: 100%;
98
99         .avatar {
100           margin-bottom: 10px;
101         }
102       }
103
104       .title {
105         font-size: 20px;
106         font-weight: 500;
107
108         font-size: 20px;
109         line-height: 28px;
110         font-weight: 500;
111         color: rgba(0, 0, 0, 0.85);
112         margin-bottom: 16px;
113         flex: auto;
114       }
115       .logo {
116         width: 28px;
117         height: 28px;
118         border-radius: 4px;
119         margin-right: 16px;
120       }
121       .content,
122       .headerContent {
123         flex: auto;
124         color: rgba(0, 0, 0, 0.45);
125         line-height: 22px;
126
127         .link {
128           margin-top: 16px;
129           line-height: 24px;
130
131           a {
132             font-size: 14px;
133             margin-right: 32px;
134           }
135         }
136       }
137       .extra {
138         flex: 0 1 auto;
139         margin-left: 88px;
140         min-width: 242px;
141         text-align: right;
142       }
143       .action {
144         margin-left: 56px;
145         min-width: 266px;
146         flex: 0 1 auto;
147         text-align: right;
148         &:empty {
149           display: none;
150         }
151       }
152     }
153   }
154 }
155
156 .mobile .page-header {
157   .main {
158     .row {
159       flex-wrap: wrap;
160
161       .avatar {
162         flex: 0 1 25%;
163         margin: 0 2% 8px 0;
164       }
165
166       .content,
167       .headerContent {
168         flex: 0 1 70%;
169
170         .link {
171           margin-top: 16px;
172           line-height: 24px;
173
174           a {
175             font-size: 14px;
176             margin-right: 10px;
177           }
178         }
179       }
180
181       .extra {
182         flex: 1 1 auto;
183         margin-left: 0;
184         min-width: 0;
185         text-align: right;
186       }
187
188       .action {
189         margin-left: unset;
190         min-width: 266px;
191         flex: 0 1 auto;
192         text-align: left;
193         margin-bottom: 12px;
194
195         &:empty {
196           display: none;
197         }
198       }
199     }
200   }
201 }
202 </style>