3
3
<div class =" page-header-index-wide" >
4
4
<a-breadcrumb class =" breadcrumb" >
5
5
<a-breadcrumb-item v-for =" (item, index) in breadList" :key =" index" >
6
- <router-link v-if =" item.name != name" :to =" { path: item.path }" >
7
- {{ item.meta.title }}
8
- </router-link >
6
+ <router-link
7
+ v-if =" item.name != name && index != 1"
8
+ :to =" { path: item.path === '' ? '/' : item.path }"
9
+ >{{ item.meta.title }}</router-link >
9
10
<span v-else >{{ item.meta.title }}</span >
10
11
</a-breadcrumb-item >
11
12
</a-breadcrumb >
34
35
<slot name =" pageMenu" ></slot >
35
36
</div >
36
37
</div >
37
-
38
38
</div >
39
39
</div >
40
40
</div >
@@ -80,7 +80,7 @@ export default {
80
80
this .getBreadcrumb ()
81
81
},
82
82
methods: {
83
- getBreadcrumb () {
83
+ getBreadcrumb () {
84
84
this .breadList = []
85
85
// this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
86
86
@@ -101,137 +101,136 @@ export default {
101
101
102
102
<style lang="less" scoped>
103
103
104
- .page-header {
105
- background : #fff ;
106
- padding : 16px 32px 0 ;
107
- border-bottom : 1px solid #e8e8e8 ;
104
+ .page-header {
105
+ background : #fff ;
106
+ padding : 16px 32px 0 ;
107
+ border-bottom : 1px solid #e8e8e8 ;
108
108
109
- .breadcrumb {
110
- margin-bottom : 16px ;
111
- }
109
+ .breadcrumb {
110
+ margin-bottom : 16px ;
111
+ }
112
112
113
- .detail {
114
- display : flex ;
115
- /* margin-bottom: 16px;*/
113
+ .detail {
114
+ display : flex ;
115
+ /* margin-bottom: 16px;*/
116
116
117
- .avatar {
118
- flex : 0 1 72px ;
119
- margin : 0 24px 8px 0 ;
120
-
121
- & > span {
122
- border-radius : 72px ;
123
- display : block ;
124
- width : 72px ;
125
- height : 72px ;
126
- }
117
+ .avatar {
118
+ flex : 0 1 72px ;
119
+ margin : 0 24px 8px 0 ;
120
+
121
+ & > span {
122
+ border-radius : 72px ;
123
+ display : block ;
124
+ width : 72px ;
125
+ height : 72px ;
127
126
}
127
+ }
128
128
129
- .main {
130
- width : 100% ;
131
- flex : 0 1 auto ;
129
+ .main {
130
+ width : 100% ;
131
+ flex : 0 1 auto ;
132
132
133
- .row {
134
- display : flex ;
135
- width : 100% ;
133
+ .row {
134
+ display : flex ;
135
+ width : 100% ;
136
136
137
- .avatar {
138
- margin-bottom : 16px ;
139
- }
137
+ .avatar {
138
+ margin-bottom : 16px ;
140
139
}
140
+ }
141
141
142
- .title {
143
- font-size : 20px ;
144
- font-weight : 500 ;
142
+ .title {
143
+ font-size : 20px ;
144
+ font-weight : 500 ;
145
145
146
- font-size : 20px ;
147
- line-height : 28px ;
148
- font-weight : 500 ;
149
- color : rgba (0 ,0 ,0 ,.85 );
150
- margin-bottom : 16px ;
151
- flex : auto ;
146
+ font-size : 20px ;
147
+ line-height : 28px ;
148
+ font-weight : 500 ;
149
+ color : rgba (0 ,0 ,0 ,.85 );
150
+ margin-bottom : 16px ;
151
+ flex : auto ;
152
152
153
- }
154
- .logo {
155
- width : 28px ;
156
- height : 28px ;
157
- border-radius : 4px ;
158
- margin-right : 16px ;
159
- }
160
- .content , .headerContent {
161
- flex : auto ;
162
- color : rgba (0 ,0 ,0 ,.45 );
163
- line-height : 22px ;
164
-
165
- .link {
166
- margin-top : 16px ;
167
- line-height : 24px ;
168
-
169
- a {
170
- font-size : 14px ;
171
- margin-right : 32px ;
172
- }
153
+ }
154
+ .logo {
155
+ width : 28px ;
156
+ height : 28px ;
157
+ border-radius : 4px ;
158
+ margin-right : 16px ;
159
+ }
160
+ .content , .headerContent {
161
+ flex : auto ;
162
+ color : rgba (0 ,0 ,0 ,.45 );
163
+ line-height : 22px ;
164
+
165
+ .link {
166
+ margin-top : 16px ;
167
+ line-height : 24px ;
168
+
169
+ a {
170
+ font-size : 14px ;
171
+ margin-right : 32px ;
173
172
}
174
173
}
175
- .extra {
176
- flex : 0 1 auto ;
177
- margin-left : 88 px ;
178
- min-width : 242 px ;
179
- text-align : right ;
180
- }
181
- .action {
182
- margin-left : 56 px ;
183
- min-width : 266 px ;
184
- flex : 0 1 auto ;
185
- text-align : right ;
186
- & :empty {
187
- display : none ;
188
- }
174
+ }
175
+ .extra {
176
+ flex : 0 1 auto ;
177
+ margin-left : 88 px ;
178
+ min-width : 242 px ;
179
+ text-align : right ;
180
+ }
181
+ .action {
182
+ margin-left : 56 px ;
183
+ min-width : 266 px ;
184
+ flex : 0 1 auto ;
185
+ text-align : right ;
186
+ & :empty {
187
+ display : none ;
189
188
}
190
189
}
191
190
}
192
191
}
192
+ }
193
193
194
- .mobile .page-header {
194
+ .mobile .page-header {
195
195
196
- .main {
196
+ .main {
197
197
198
- .row {
199
- flex-wrap : wrap ;
198
+ .row {
199
+ flex-wrap : wrap ;
200
200
201
- .avatar {
202
- flex : 0 1 25% ;
203
- margin : 0 2% 8px 0 ;
204
- }
205
- .content , .headerContent {
206
- flex : 0 1 70% ;
201
+ .avatar {
202
+ flex : 0 1 25% ;
203
+ margin : 0 2% 8px 0 ;
204
+ }
205
+ .content , .headerContent {
206
+ flex : 0 1 70% ;
207
207
208
- .link {
209
- margin-top : 16px ;
210
- line-height : 24px ;
208
+ .link {
209
+ margin-top : 16px ;
210
+ line-height : 24px ;
211
211
212
- a {
213
- font-size : 14px ;
214
- margin-right : 10px ;
215
- }
212
+ a {
213
+ font-size : 14px ;
214
+ margin-right : 10px ;
216
215
}
217
216
}
218
- .extra {
219
- flex : 1 1 auto ;
220
- margin-left : 0 ;
221
- min-width : 0 ;
222
- text-align : right ;
223
- }
224
- .action {
225
- margin-left : unset ;
226
- min-width : 266 px ;
227
- flex : 0 1 auto ;
228
- text-align : left ;
229
- margin-bottom : 12 px ;
230
- & :empty {
231
- display : none ;
232
- }
217
+ }
218
+ .extra {
219
+ flex : 1 1 auto ;
220
+ margin-left : 0 ;
221
+ min-width : 0 ;
222
+ text-align : right ;
223
+ }
224
+ .action {
225
+ margin-left : unset ;
226
+ min-width : 266 px ;
227
+ flex : 0 1 auto ;
228
+ text-align : left ;
229
+ margin-bottom : 12 px ;
230
+ & :empty {
231
+ display : none ;
233
232
}
234
233
}
235
234
}
236
235
}
237
- </style >
236
+ </ style >
0 commit comments