Skip to content

A
ant-design-pro-vue
Unverified Commit aae13ee4 by Sendya
Options

fix: style

parent f69a7c3c
Showing with 241 additions and 236 deletions
src/components/page/PageHeader.vue
<template> <template>
<div class="page-header"> <div class="page-header">
<div class="page-header-index-wide"> <div class="page-header-index-wide">
<a-breadcrumb class="breadcrumb"> <a-breadcrumb class="breadcrumb">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index"> <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link <router-link
v-if="item.name != name && index != 1" v-if="item.name != name && index != 1"
:to="{ path: item.path === '' ? '/' : item.path }" :to="{ path: item.path === '' ? '/' : item.path }"
>{{ item.meta.title }}</router-link> >{{ item.meta.title }}</router-link>
<span v-else>{{ item.meta.title }}</span> <span v-else>{{ item.meta.title }}</span>
</a-breadcrumb-item> </a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
<div class="detail"> <div class="detail">
<div class="main" v-if="!$route.meta.hiddenHeaderContent"> <div class="main" v-if="!$route.meta.hiddenHeaderContent">
<div class="row"> <div class="row">
<img v-if="logo" :src="logo" class="logo"/> <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"> <div class="action">
<slot name="action"></slot> <slot name="action"></slot>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div v-if="avatar" class="avatar"> <div v-if="avatar" class="avatar">
<a-avatar :src="avatar"/> <a-avatar :src="avatar"/>
</div> </div>
<div v-if="this.$slots.content" class="headerContent"> <div v-if="this.$slots.content" class="headerContent">
<slot name="content"></slot> <slot name="content"></slot>
</div> </div>
<div v-if="this.$slots.extra" class="extra"> <div v-if="this.$slots.extra" class="extra">
<slot name="extra"></slot> <slot name="extra"></slot>
</div> </div>
</div> </div>
<div> <div>
<slot name="pageMenu"></slot> <slot name="pageMenu"></slot>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Breadcrumb from '@/components/tools/Breadcrumb' import Breadcrumb from '@/components/tools/Breadcrumb'
export default { export default {
name: 'PageHeader', name: 'PageHeader',
components: { components: {
's-breadcrumb': Breadcrumb 's-breadcrumb': Breadcrumb
}, },
props: { props: {
title: { title: {
type: String, type: String,
default: '', default: '',
required: false required: false
}, },
breadcrumb: { breadcrumb: {
type: Array, type: Array,
default: null, default: null,
required: false required: false
}, },
logo: { logo: {
type: String, type: String,
default: '', default: '',
required: false required: false
}, },
avatar: { avatar: {
type: String, type: String,
default: '', default: '',
required: false required: false
} }
}, },
data () { data () {
return { return {
name: '', name: '',
breadList: [] breadList: []
} }
}, },
created () { created () {
this.getBreadcrumb() this.getBreadcrumb()
}, },
methods: { methods: {
getBreadcrumb () { getBreadcrumb () {
this.breadList = [] this.breadList = []
// this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}}) // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
this.name = this.$route.name this.name = this.$route.name
this.$route.matched.forEach((item) => { this.$route.matched.forEach((item) => {
// item.name !== 'index' && this.breadList.push(item) // item.name !== 'index' && this.breadList.push(item)
this.breadList.push(item) this.breadList.push(item)
}) })
} }
}, },
watch: { watch: {
$route () { $route () {
this.getBreadcrumb() this.getBreadcrumb()
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.page-header { .page-header {
background: #fff; background: #fff;
padding: 16px 32px 0; padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
.breadcrumb { .breadcrumb {
margin-bottom: 16px; margin-bottom: 16px;
} }
.detail { .detail {
display: flex; display: flex;
/*margin-bottom: 16px;*/ /*margin-bottom: 16px;*/
.avatar { .avatar {
flex: 0 1 72px; flex: 0 1 72px;
margin: 0 24px 8px 0; margin: 0 24px 8px 0;
& > span { & > span {
border-radius: 72px; border-radius: 72px;
display: block; display: block;
width: 72px; width: 72px;
height: 72px; height: 72px;
} }
} }
.main { .main {
width: 100%; width: 100%;
flex: 0 1 auto; flex: 0 1 auto;
.row { .row {
display: flex; display: flex;
width: 100%; width: 100%;
.avatar { .avatar {
margin-bottom: 16px; margin-bottom: 16px;
} }
} }
.title { .title {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 500; font-weight: 500;
color: rgba(0,0,0,.85); color: rgba(0,0,0,.85);
margin-bottom: 16px; margin-bottom: 16px;
flex: auto; flex: auto;
} }
.logo { .logo {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 4px; border-radius: 4px;
margin-right: 16px; margin-right: 16px;
} }
.content, .headerContent { .content, .headerContent {
flex: auto; flex: auto;
color: rgba(0,0,0,.45); color: rgba(0,0,0,.45);
line-height: 22px; line-height: 22px;
.link { .link {
margin-top: 16px; margin-top: 16px;
line-height: 24px; line-height: 24px;
a { a {
font-size: 14px; font-size: 14px;
margin-right: 32px; margin-right: 32px;
} }
} }
} }
.extra { .extra {
flex: 0 1 auto; flex: 0 1 auto;
margin-left: 88px; margin-left: 88px;
min-width: 242px; min-width: 242px;
text-align: right; text-align: right;
} }
.action { .action {
margin-left: 56px; margin-left: 56px;
min-width: 266px; min-width: 266px;
flex: 0 1 auto; flex: 0 1 auto;
text-align: right; text-align: right;
&:empty { &:empty {
display: none; display: none;
} }
} }
} }
} }
} }
.mobile .page-header { .mobile .page-header {
.main { .main {
.row { .row {
flex-wrap: wrap; flex-wrap: wrap;
.avatar { .avatar {
flex: 0 1 25%; flex: 0 1 25%;
margin: 0 2% 8px 0; margin: 0 2% 8px 0;
} }
.content, .headerContent {
flex: 0 1 70%; .content, .headerContent {
flex: 0 1 70%;
.link {
margin-top: 16px; .link {
line-height: 24px; margin-top: 16px;
line-height: 24px;
a {
font-size: 14px; a {
margin-right: 10px; font-size: 14px;
} margin-right: 10px;
} }
} }
.extra { }
flex: 1 1 auto;
margin-left: 0; .extra {
min-width: 0; flex: 1 1 auto;
text-align: right; margin-left: 0;
} min-width: 0;
.action { text-align: right;
margin-left: unset; }
min-width: 266px;
flex: 0 1 auto; .action {
text-align: left; margin-left: unset;
margin-bottom: 12px; min-width: 266px;
&:empty { flex: 0 1 auto;
display: none; text-align: left;
} margin-bottom: 12px;
}
} &:empty {
} display: none;
</style> }
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment