inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div class="antd-pro-components-article-list-content-index-listContent">
3     <div class="description">
4       <slot>
5         {{ description }}
6       </slot>
7     </div>
8     <div class="extra">
9       <a-avatar :src="avatar" size="small" />
10       <a :href="href">{{ owner }}</a> 发布在 <a :href="href">{{ href }}</a>
11       <em>{{ updateAt | moment }}</em>
12     </div>
13   </div>
14 </template>
15
16 <script>
17 export default {
18   name: 'ArticleListContent',
19   props: {
20     prefixCls: {
21       type: String,
22       default: 'antd-pro-components-article-list-content-index-listContent'
23     },
24     description: {
25       type: String,
26       default: ''
27     },
28     owner: {
29       type: String,
30       required: true
31     },
32     avatar: {
33       type: String,
34       required: true
35     },
36     href: {
37       type: String,
38       required: true
39     },
40     updateAt: {
41       type: String,
42       required: true
43     }
44   }
45 }
46 </script>
47
48 <style lang="less" scoped>
49 @import '../index.less';
50
51 .antd-pro-components-article-list-content-index-listContent {
52   .description {
53     max-width: 720px;
54     line-height: 22px;
55   }
56   .extra {
57     margin-top: 16px;
58     color: @text-color-secondary;
59     line-height: 22px;
60
61     & /deep/ .ant-avatar {
62       position: relative;
63       top: 1px;
64       width: 20px;
65       height: 20px;
66       margin-right: 8px;
67       vertical-align: top;
68     }
69
70     & > em {
71       margin-left: 16px;
72       color: @disabled-color;
73       font-style: normal;
74     }
75   }
76 }
77
78 @media screen and (max-width: @screen-xs) {
79   .antd-pro-components-article-list-content-index-listContent {
80     .extra {
81       & > em {
82         display: block;
83         margin-top: 8px;
84         margin-left: 0;
85       }
86     }
87   }
88 }
89 </style>