mirror of https://github.com/halo-dev/halo-admin
ruibaby
6 years ago
11 changed files with 49 additions and 235 deletions
@ -1,153 +0,0 @@
|
||||
<template> |
||||
<div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']"> |
||||
<div v-if="title" class="title">{{ title }}</div> |
||||
<a-row> |
||||
<slot></slot> |
||||
</a-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { Col } from 'ant-design-vue/es/grid/' |
||||
|
||||
const Item = { |
||||
name: 'DetailListItem', |
||||
props: { |
||||
term: { |
||||
type: String, |
||||
default: '', |
||||
required: false |
||||
} |
||||
}, |
||||
inject: { |
||||
col: { |
||||
type: Number |
||||
} |
||||
}, |
||||
render() { |
||||
return ( |
||||
<Col {...{ props: responsive[this.col] }}> |
||||
<div class="term">{this.$props.term}</div> |
||||
<div class="content">{this.$slots.default}</div> |
||||
</Col> |
||||
) |
||||
} |
||||
} |
||||
|
||||
const responsive = { |
||||
1: { xs: 24 }, |
||||
2: { xs: 24, sm: 12 }, |
||||
3: { xs: 24, sm: 12, md: 8 }, |
||||
4: { xs: 24, sm: 12, md: 6 } |
||||
} |
||||
|
||||
export default { |
||||
name: 'DetailList', |
||||
Item: Item, |
||||
components: { |
||||
Col |
||||
}, |
||||
props: { |
||||
title: { |
||||
type: String, |
||||
default: '', |
||||
required: false |
||||
}, |
||||
col: { |
||||
type: Number, |
||||
required: false, |
||||
default: 3 |
||||
}, |
||||
size: { |
||||
type: String, |
||||
required: false, |
||||
default: 'large' |
||||
}, |
||||
layout: { |
||||
type: String, |
||||
required: false, |
||||
default: 'horizontal' |
||||
} |
||||
}, |
||||
provide() { |
||||
return { |
||||
col: this.col > 4 ? 4 : this.col |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
|
||||
.description-list { |
||||
|
||||
.title { |
||||
color: rgba(0,0,0,.85); |
||||
font-size: 14px; |
||||
font-weight: 500; |
||||
margin-bottom: 16px; |
||||
} |
||||
|
||||
/deep/ .term { |
||||
color: rgba(0,0,0,.85); |
||||
display: table-cell; |
||||
line-height: 20px; |
||||
margin-right: 8px; |
||||
padding-bottom: 16px; |
||||
white-space: nowrap; |
||||
|
||||
&:not(:empty):after { |
||||
content: ":"; |
||||
margin: 0 8px 0 2px; |
||||
position: relative; |
||||
top: -.5px; |
||||
} |
||||
} |
||||
|
||||
/deep/ .content { |
||||
color: rgba(0,0,0,.65); |
||||
display: table-cell; |
||||
min-height: 22px; |
||||
line-height: 22px; |
||||
padding-bottom: 16px; |
||||
width: 100%; |
||||
&:empty { |
||||
content: ' '; |
||||
height: 38px; |
||||
padding-bottom: 16px; |
||||
} |
||||
} |
||||
|
||||
&.small { |
||||
|
||||
.title { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, .65); |
||||
font-weight: normal; |
||||
margin-bottom: 12px; |
||||
} |
||||
/deep/ .term, .content { |
||||
padding-bottom: 8px; |
||||
} |
||||
} |
||||
|
||||
&.large { |
||||
/deep/ .term, .content { |
||||
padding-bottom: 16px; |
||||
} |
||||
|
||||
.title { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
|
||||
&.vertical { |
||||
.term { |
||||
padding-bottom: 8px; |
||||
} |
||||
/deep/ .term, .content { |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
</style> |
@ -1,2 +0,0 @@
|
||||
import DescriptionList from './DescriptionList' |
||||
export default DescriptionList |
@ -1,5 +0,0 @@
|
||||
<script> |
||||
/* WARNING: 兼容老引入,请勿继续使用 */ |
||||
import DescriptionList from '@/components/DescriptionList' |
||||
export default DescriptionList |
||||
</script> |
@ -1,40 +0,0 @@
|
||||
<template> |
||||
<div class="side-profile"> |
||||
<router-link :to="{ name:'Dashboard' }"> |
||||
<a-avatar class="avatar" size="large" src="https://gravatar.loli.net/avatar/?s=256&d=mm"/> |
||||
</router-link> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: 'SideProfile', |
||||
props: { |
||||
title: { |
||||
type: String, |
||||
default: 'Halo Dashboard', |
||||
required: false |
||||
}, |
||||
showTitle: { |
||||
type: Boolean, |
||||
default: true, |
||||
required: false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scope> |
||||
.sider .side-profile { |
||||
left: 0; |
||||
width: 100%; |
||||
height: 72px; |
||||
line-height: 72px; |
||||
padding-left: 24px; |
||||
-webkit-transition: all 0.3s; |
||||
transition: all 0.3s; |
||||
overflow: hidden; |
||||
z-index: 9; |
||||
} |
||||
</style> |
Loading…
Reference in new issue