<template>
    <div class="zr-infobox">
        <div class="zr-infotitle">
            {{prefix}}<b class="info-num">{{num}}</b>{{append}}
        </div>
        <slot></slot>
    </div>
</template>

<script>
export default {
  props: {
    prefix: {
      type: String,
      default: ''
    },
    num: {
      type: Number,
      default: 0
    },
    append: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
    .zr-infobox {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
        line-height: 24px;
        margin-bottom: 5px;
        .zr-infotitle {
            margin-right: 20px;
            position: relative;
            top: -1px;
            .info-num {
                font-size: 18px;
                margin: 0 5px;
                color: #333;
            }
        }
        
    }
</style>