<template>
  <div class="percentBox">
    <div class="percent">
      <div class="percent_value" :style="{ width: percent }"></div>
    </div>
    <div class="value">{{ percent }}</div>
  </div>
</template>

<script>
export default {
  name: "MetaPercent",
  data() {
    return {};
  },
  props: ['percent'],
};
</script>

<style lang="scss" scoped>
.percentBox {
  width: 100%;
  height: 18px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  .percent {
    flex: 1;

    background-color: #fff;
    border-radius: 10px;
  }

  .percent_value {
    height: 100%;
    background: #64e1fb;
    border-radius: 10px;
  }
  .value {
    margin: 0 10px;
  }
}
</style>
