<template>
  <div class="app-statCard-page" :class="{'app-statCard-totalPage': info.img}">
    <div class="app-statCard-top">
      <span class="app-statCard-doc" v-if='info.color' :style="{background: info.color}" ></span>
      <span class="app-statCard-title" v-text="info.title"></span>
    </div>
    <div class="app-statCard-bottom">
      <span class="app-statCard-num"  :style="{fontSize: (info.numSize || '30') + 'px'}" v-text="info.num"></span>
      <span v-if='info.unit' class="app-statCard-unit" v-text="info.unit"></span>
    </div>
  </div>
</template>
<script setup>
// 统计卡片 上title 下数字
const props = defineProps({
  info : {
    type: Object,
    default: {}
  },
  type: {
    type: String,
    default: ''
  }
})

</script>

<style lang="less" scoped>
.app-statCard-page {
  margin: 0px 24px;
  min-width: 61px;
  flex: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.app-statCard-totalPage {
  margin-left: 0px;
}
.app-statCard-title,.app-statCard-unit {
  font-size: 12px;
  color: #3C4449;
}
.app-statCard-unit {
  margin-left: 2px;
}
.app-statCard-num {
  font-weight: 500;
  color: #3C4449;
  font-family: DINCond-Bold;
}
.app-statCard-doc {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}
</style>
