<template>
  <div class="content">
    <div class="top">
      <div class="cycleSty" :style="{backgroundColor:itemData.color}"></div>
      <div class="numSty">{{itemData.num}}</div>
    </div>
    <div class="titleSty">
      {{itemData.title}}
    </div>
  </div>
</template>

<script>
export default {
  name: "summaryModule",
  props:{
    itemData:{
      type:Object,
      default:{}
    }
  },
  data(){
    return{

    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  background-color: #fafafa;
  padding:10px 10px 10px  20px;
  .top{
    display: flex;
    align-items: center;
    .numSty{
      margin-left: 5px;
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: normal;
      color: #333333;
      line-height: normal;
      font-size: 18px;
    }
    .cycleSty{
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
  }
  .titleSty{
    margin-top: 10px;
    font-family: '苹方 中等', '苹方', sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #7F8295;
    font-size: 14px;
  }

}


</style>
