Application.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <template>
  2. <List :class="prefixCls">
  3. <a-row :gutter="16">
  4. <template v-for="item in list" :key="item.title">
  5. <a-col :span="6">
  6. <ListItem>
  7. <Card :hoverable="true" :class="`${prefixCls}__card`">
  8. <div :class="`${prefixCls}__card-title`">
  9. <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
  10. {{ item.title }}
  11. </div>
  12. <div :class="`${prefixCls}__card-num`">
  13. 活跃用户:<span>{{ item.active }}</span> 万
  14. </div>
  15. <div :class="`${prefixCls}__card-num`">
  16. 新增用户:<span>{{ item.new }}</span>
  17. </div>
  18. <Icon
  19. :class="`${prefixCls}__card-download`"
  20. v-if="item.download"
  21. :icon="item.download"
  22. />
  23. </Card>
  24. </ListItem>
  25. </a-col>
  26. </template>
  27. </a-row>
  28. </List>
  29. </template>
  30. <script lang="ts">
  31. import { defineComponent } from 'vue';
  32. import { List, Card, Row, Col } from 'ant-design-vue';
  33. import Icon from '/@/components/Icon/index';
  34. import { applicationList } from './data';
  35. export default defineComponent({
  36. components: {
  37. List,
  38. ListItem: List.Item,
  39. Card,
  40. Icon,
  41. [Row.name]: Row,
  42. [Col.name]: Col,
  43. },
  44. setup() {
  45. return {
  46. prefixCls: 'account-center-application',
  47. list: applicationList,
  48. };
  49. },
  50. });
  51. </script>
  52. <style lang="less">
  53. .account-center-application {
  54. &__card {
  55. width: 100%;
  56. margin-bottom: -12px;
  57. .ant-card-body {
  58. padding: 16px;
  59. }
  60. &-title {
  61. margin-bottom: 5px;
  62. font-size: 16px;
  63. font-weight: 500;
  64. .icon {
  65. margin-top: -5px;
  66. font-size: 22px;
  67. }
  68. }
  69. &-num {
  70. margin-left: 24px;
  71. line-height: 36px;
  72. color: @text-color-secondary;
  73. span {
  74. margin-left: 5px;
  75. font-size: 18px;
  76. }
  77. }
  78. &-download {
  79. float: right;
  80. font-size: 20px !important;
  81. color: @primary-color;
  82. }
  83. }
  84. }
  85. </style>