<template>
  <div class="container">
    <div class="semicircle" />
    <a-statistic :title="title" :prefix="prefix" :suffix="suffix" :value="value" />
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    prefix: {
      type: String,
      default: ''
    },
    suffix: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {}
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 函数方法 - 点击等操作执行的方法
  methods: {}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.container {
  display: flex;
  align-items: center;
}
.semicircle {
  width: 5px;
  height: 10px;
  background-color: #1890ff;
  border-radius: 0 100px 100px 0;
  margin-right: 8px;
}
::v-deep .ant-statistic-content {
  font-size: 18px;
  margin-right: 30px !important;
}
::v-deep .ant-space-item {
  margin-right: 8px !important;
}
</style>