FileOverview.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div class="card-b">
  3. <div class="box" v-for="item in FILE_OVERVIEW_CONFIG" :key="item.id" @click="$emit('click', item)">
  4. <div class="img"> <img :src="item.src" alt="" /> </div>
  5. <div class="text">{{ item.text }}</div>
  6. <div class="num">{{ fileData[item.prop] }}</div>
  7. </div>
  8. </div>
  9. </template>
  10. <script lang="ts" setup>
  11. import { onMounted, shallowRef } from 'vue';
  12. import { BillboardType, DEFAULT_TEST_DATA, FILE_OVERVIEW_CONFIG } from '../billboard.data';
  13. const props = withDefaults(
  14. defineProps<{
  15. data?: BillboardType;
  16. }>(),
  17. {
  18. data: () => DEFAULT_TEST_DATA,
  19. }
  20. );
  21. defineEmits(['click']);
  22. const fileData = shallowRef<BillboardType['fileServerInfo']>({
  23. totalNum: 0,
  24. approvalNum: 0,
  25. });
  26. function fetchData() {
  27. fileData.value = props.data.fileServerInfo;
  28. }
  29. onMounted(() => {
  30. fetchData();
  31. });
  32. </script>
  33. <style lang="less" scoped>
  34. @font-face {
  35. font-family: 'douyuFont';
  36. src: url(/@/assets/images/files/douyuFont.otf);
  37. }
  38. .card-b {
  39. height: 100%;
  40. display: flex;
  41. flex-direction: row;
  42. align-items: center;
  43. .box {
  44. display: flex;
  45. flex: 1;
  46. flex-direction: column;
  47. justify-content: flex-start;
  48. align-items: center;
  49. &:first-child .img {
  50. position: relative;
  51. width: 72px;
  52. height: 78px;
  53. background: url(/@/assets/images/files/homes/file1.png) no-repeat center;
  54. img {
  55. position: absolute;
  56. left: 50%;
  57. top: 50%;
  58. transform: translate(-50%, -75%);
  59. }
  60. }
  61. &:last-child .img {
  62. position: relative;
  63. width: 72px;
  64. height: 78px;
  65. background: url(/@/assets/images/files/homes/sp.png) no-repeat center;
  66. img {
  67. position: absolute;
  68. left: 50%;
  69. top: 50%;
  70. transform: translate(-50%, -75%);
  71. }
  72. }
  73. .text {
  74. margin: 5px 0px;
  75. font-family: '思源黑体', 'Microsoft Yahei';
  76. color: #fff;
  77. font-size: 14px;
  78. }
  79. &:first-child .num {
  80. width: 120px;
  81. height: 30px;
  82. font-family: 'douyuFont';
  83. color: #fff;
  84. font-size: 20px;
  85. display: flex;
  86. justify-content: center;
  87. align-items: center;
  88. background: url(/@/assets/images/files/homes/file2.png) no-repeat center;
  89. }
  90. &:last-child .num {
  91. width: 120px;
  92. height: 30px;
  93. font-family: 'douyuFont';
  94. color: #fff;
  95. font-size: 20px;
  96. display: flex;
  97. justify-content: center;
  98. align-items: center;
  99. background: url(/@/assets/images/files/homes/sp2.png) no-repeat center;
  100. }
  101. }
  102. }
  103. </style>
  104. onMounted, import { getSummary } from '../billboard.api';onMounted, import { getSummary } from '../billboard.api';