<template>
  <div id="compare"  :class="{'flex-c':isColumn}">
    <div class="text">{{text}}</div>
    <div class="value-v">
      <span class="value roboto">{{value}}</span>
      <slot></slot>
    </div>

  </div>
</template>

<script>
export default {
  name: "Compare",
  props:{
    isColumn:{
      default:false
    },

    text:{},
    value:{}
  }
}
</script>

<style scoped lang="scss">
#compare{
  width: max-content;
  .text{
    font-size: 14px;
    color: #72b9ff;
  }
  .value-v{
    .value{
      margin-right: 4px;
      margin-left: 4px;
    }

    color: #e5f2ff;
    font-size: 15px;
    font-weight: 700;
    vertical-align: middle;


  }
  &.flex-c{


    display: flex;
  }
}
</style>
