1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <template>
- <div class="antd-pro-components-article-list-content-index-listContent">
- <div class="description">
- <slot>
- {{ description }}
- </slot>
- </div>
- <div class="extra">
- <a-avatar :src="avatar" size="small" />
- <a :href="href">{{ owner }}</a> 发布在 <a :href="href">{{ href }}</a>
- <em>{{ updateAt | moment }}</em>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'ArticleListContent',
- props: {
- prefixCls: {
- type: String,
- default: 'antd-pro-components-article-list-content-index-listContent'
- },
- description: {
- type: String,
- default: ''
- },
- owner: {
- type: String,
- required: true
- },
- avatar: {
- type: String,
- required: true
- },
- href: {
- type: String,
- required: true
- },
- updateAt: {
- type: String,
- required: true
- }
- }
- }
- </script>
- <style lang="less" scoped>
- @import '../index.less';
- .antd-pro-components-article-list-content-index-listContent {
- .description {
- max-width: 720px;
- line-height: 22px;
- }
- .extra {
- margin-top: 16px;
- color: @text-color-secondary;
- line-height: 22px;
- & /deep/ .ant-avatar {
- position: relative;
- top: 1px;
- width: 20px;
- height: 20px;
- margin-right: 8px;
- vertical-align: top;
- }
- & > em {
- margin-left: 16px;
- color: @disabled-color;
- font-style: normal;
- }
- }
- }
- @media screen and (max-width: @screen-xs) {
- .antd-pro-components-article-list-content-index-listContent {
- .extra {
- & > em {
- display: block;
- margin-top: 8px;
- margin-left: 0;
- }
- }
- }
- }
- </style>
|