Home.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <template>
  2. <div class="home">
  3. <div class="banner">
  4. <img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png">
  5. <h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
  6. </div>
  7. <br/>
  8. <h2># Trend 组件 </h2>
  9. <a-divider> 正常</a-divider>
  10. <a-card>
  11. <trend flag="up" style="margin-right: 16px;">
  12. <span slot="term">工资</span>
  13. 5%
  14. </trend>
  15. <trend flag="up" style="margin-right: 16px;">
  16. <span slot="term">工作量</span>
  17. 50%
  18. </trend>
  19. <trend flag="down">
  20. <span slot="term">身体状态</span>
  21. 50%
  22. </trend>
  23. </a-card>
  24. <a-divider> 颜色反转</a-divider>
  25. <a-card style="margin-bottom: 3rem">
  26. <trend flag="up" :reverse-color="true" style="margin-right: 16px;">
  27. <span slot="term">工资</span>
  28. 5%
  29. </trend>
  30. <trend flag="down" :reverse-color="true" style="margin-right: 16px;">
  31. <span slot="term">工作量</span>
  32. 50%
  33. </trend>
  34. </a-card>
  35. <h2># AvatarList 组件 </h2>
  36. <a-divider> AvatarList</a-divider>
  37. <a-card style="margin-bottom: 3rem">
  38. <avatar-list :max-length="3">
  39. <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"/>
  40. <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"/>
  41. <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
  42. <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
  43. <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
  44. <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
  45. <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
  46. </avatar-list>
  47. <a-divider type="vertical" style="margin: 0 16px"/>
  48. <avatar-list size="mini">
  49. <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"/>
  50. <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"/>
  51. <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"/>
  52. </avatar-list>
  53. </a-card>
  54. <h2># CountDown 组件 </h2>
  55. <a-divider> CountDown</a-divider>
  56. <a-card style="margin-bottom: 3rem">
  57. <count-down
  58. style="font-size: 2rem"
  59. :target="new Date().getTime() + 3000000"
  60. :on-end="onEndHandle">
  61. </count-down>
  62. <a-divider type="vertical" style="margin: 0 16px"/>
  63. <count-down
  64. style="font-size: 2rem"
  65. :target="new Date().getTime() + 10000"
  66. :on-end="onEndHandle2">
  67. </count-down>
  68. </a-card>
  69. <h2># Ellipsis 组件 </h2>
  70. <a-divider> Ellipsis</a-divider>
  71. <a-card style="margin-bottom: 3rem">
  72. <ellipsis :length="100" tooltip>
  73. There were injuries alleged in three cases in 2015, and a
  74. fourth incident in September, according to the safety recall report. After meeting with US regulators in
  75. October, the firm decided to issue a voluntary recall.
  76. </ellipsis>
  77. </a-card>
  78. <h2># NumberInfo 组件 </h2>
  79. <a-divider> NumberInfo</a-divider>
  80. <a-card>
  81. <number-info
  82. :sub-title="() => { return 'Visits this week' }"
  83. :total="12321"
  84. status="up"
  85. :sub-total="17.1"></number-info>
  86. </a-card>
  87. </div>
  88. </template>
  89. <script>
  90. // @ is an alias to /src
  91. import Trend from '@/components/Trend'
  92. import AvatarList from '@/components/AvatarList'
  93. import CountDown from '@/components/CountDown/CountDown'
  94. import Ellipsis from '@/components/Ellipsis'
  95. import NumberInfo from '@/components/NumberInfo'
  96. const AvatarListItem = AvatarList.AvatarItem
  97. export default {
  98. name: 'Home',
  99. components: {
  100. NumberInfo,
  101. Ellipsis,
  102. CountDown,
  103. Trend,
  104. AvatarList,
  105. AvatarListItem
  106. },
  107. data() {
  108. return {
  109. targetTime: new Date().getTime() + 3900000
  110. }
  111. },
  112. methods: {
  113. onEndHandle() {
  114. this.$message.success('CountDown callback!!!')
  115. },
  116. onEndHandle2() {
  117. this.$notification.open({
  118. message: 'Notification Title',
  119. description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  120. });
  121. }
  122. }
  123. }
  124. </script>
  125. <style scoped>
  126. .home {
  127. width: 900px;
  128. margin: 0 auto;
  129. padding: 25px 0;
  130. }
  131. .home > .banner {
  132. text-align: center;
  133. padding: 25px 0;
  134. margin: 25px 0;
  135. }
  136. </style>