<template>
    <div class="title-base">
      <div class="title-icon" :style="{'background':'url('+ moduleTileIcon +') no-repeat','background-size':'100% 100%'}"></div>
      <div class="title-text" :style="{'font-size':font + 'vw'}">{{title}}</div>
    </div>
</template>

<script>
    export default {
      title: "ModuleTitle",
      props:{
        moduleTileIcon:{
          default: require('src/assets/images/收费笔数小标题.png')
        },
        title:{
          type:String,
          default:'各收费类型笔数占比（笔）'
        },
        font:{
          type:Number,
          default:0.69
        }
      }
    }
</script>

<style lang="less" scoped>
  .title-base{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .title-icon{
      margin-top: 1%;
      width: 6%;
      height: 65%;
      background: #4f5bff;
    }
    .title-text{
      color: #fff;
      margin-left: 2%;
      margin-top: 2%;
      width: 80%;
      height: 100%;
    }
  }
</style>
