| <template> |
| <div class="head-info" :class="center && 'center'"> |
| <span>{{ title }}</span> |
| <p>{{ content }}</p> |
| <em v-if="bordered"/> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| name: 'HeadInfo', |
| props: { |
| title: { |
| type: String, |
| default: '' |
| }, |
| content: { |
| type: String, |
| default: '' |
| }, |
| bordered: { |
| type: Boolean, |
| default: false |
| }, |
| center: { |
| type: Boolean, |
| default: true |
| } |
| } |
| } |
| </script> |
| |
| <style lang="less" scoped> |
| .head-info { |
| position: relative; |
| text-align: left; |
| padding: 0 32px 0 0; |
| min-width: 125px; |
| |
| &.center { |
| text-align: center; |
| padding: 0 32px; |
| } |
| |
| span { |
| color: rgba(0, 0, 0, .45); |
| display: inline-block; |
| font-size: 14px; |
| line-height: 22px; |
| margin-bottom: 4px; |
| } |
| p { |
| color: rgba(0, 0, 0, .85); |
| font-size: 24px; |
| line-height: 32px; |
| margin: 0; |
| } |
| em { |
| background-color: #e8e8e8; |
| position: absolute; |
| height: 56px; |
| width: 1px; |
| top: 0; |
| right: 0; |
| } |
| } |
| </style> |