ArticleListContent.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  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. <script>
  16. export default {
  17. name: 'ArticleListContent',
  18. props: {
  19. prefixCls: {
  20. type: String,
  21. default: 'antd-pro-components-article-list-content-index-listContent'
  22. },
  23. description: {
  24. type: String,
  25. default: ''
  26. },
  27. owner: {
  28. type: String,
  29. required: true
  30. },
  31. avatar: {
  32. type: String,
  33. required: true
  34. },
  35. href: {
  36. type: String,
  37. required: true
  38. },
  39. updateAt: {
  40. type: String,
  41. required: true
  42. }
  43. }
  44. }
  45. </script>
  46. <style lang="less" scoped>
  47. @import '../index.less';
  48. .antd-pro-components-article-list-content-index-listContent {
  49. .description {
  50. max-width: 720px;
  51. line-height: 22px;
  52. }
  53. .extra {
  54. margin-top: 16px;
  55. color: @text-color-secondary;
  56. line-height: 22px;
  57. & /deep/ .ant-avatar {
  58. position: relative;
  59. top: 1px;
  60. width: 20px;
  61. height: 20px;
  62. margin-right: 8px;
  63. vertical-align: top;
  64. }
  65. & > em {
  66. margin-left: 16px;
  67. color: @disabled-color;
  68. font-style: normal;
  69. }
  70. }
  71. }
  72. @media screen and (max-width: @screen-xs) {
  73. .antd-pro-components-article-list-content-index-listContent {
  74. .extra {
  75. & > em {
  76. display: block;
  77. margin-top: 8px;
  78. margin-left: 0;
  79. }
  80. }
  81. }
  82. }
  83. </style>