优化结构PageHeader、增加logo显示

master
chenghx 7 years ago
parent 965c36667c
commit 30ef40c9e1
  1. 15
      src/components/page/PageHeader.vue

@ -7,9 +7,10 @@
</a-breadcrumb> </a-breadcrumb>
</div> </div>
<div class="detail"> <div class="detail">
<div v-if="logo" class="logo"><a-avatar :src="logo" /></div> <div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
<div class="main"> <div class="main">
<div class="row"> <div class="row">
<img v-if="logo" :src="logo" class="logo" />
<h1 v-if="title" class="title">{{title}}</h1> <h1 v-if="title" class="title">{{title}}</h1>
<div class="action"><slot name="action"></slot></div> <div class="action"><slot name="action"></slot></div>
</div> </div>
@ -43,6 +44,10 @@ export default {
logo: { logo: {
type: String, type: String,
required: false required: false
},
avatar: {
type: String,
required: false
} }
} }
} }
@ -62,7 +67,7 @@ export default {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.logo { .avatar {
flex: 0 1 72px; flex: 0 1 72px;
margin-bottom: 8px; margin-bottom: 8px;
& > span { & > span {
@ -82,6 +87,12 @@ export default {
color: rgba(0,0,0,.85); color: rgba(0,0,0,.85);
margin-bottom: 16px; margin-bottom: 16px;
} }
.logo{
width: 28px;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
.content{ .content{
margin-bottom: 16px; margin-bottom: 16px;
flex: auto; flex: auto;

Loading…
Cancel
Save