adm-statistics.vue 932 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div class="Statistics">
  3. <span class="title">{{ statisticsMsg.title }}</span>
  4. <span class="total">{{ statisticsMsg.total }}</span>
  5. </div>
  6. </template>
  7. <script lang="ts">
  8. interface Statistics {
  9. title: string
  10. total: number
  11. }
  12. import { Vue, Component, Prop } from "vue-property-decorator";
  13. @Component({
  14. name: "adm-statistics"
  15. })
  16. export default class extends Vue {
  17. @Prop({ type: Object }) statisticsMsg: Statistics;
  18. }
  19. </script>
  20. <style scoped lang="scss">
  21. $dib: inline-block;
  22. $h: 67px;
  23. .Statistics {
  24. height: $h;
  25. background: #E2E3E4;
  26. margin: 12px;
  27. .title {
  28. display: $dib;
  29. font-size: 16px;
  30. color: #646C73;
  31. line-height: $h;
  32. margin-left: 25px;
  33. margin-right: 21px;
  34. }
  35. .total {
  36. display: $dib;
  37. font-size: 22px;
  38. font-weight: 500;
  39. color: #1F2429;
  40. line-height: $h;
  41. }
  42. }
  43. </style>