<template>
  <div class="rt-diving-box" :style="widthStyle">
    <div class="rt-dividing-style" :style="dividingStyle"></div>
  </div>
</template>

<script>
export default {
  name: 'rtDividing',
  props: {
    size: {
      type: String,
      default: '1'
    },
    color: {
      type: String,
      default: '#F0F0F0'
    },
    lineStyle: {
      type: String,
      default: 'solid'
    },
    lineWidth: {
      type: String,
      default: '100'
    }
  },
  computed: {
    dividingStyle() {
      return { borderBottom: `${this.size}` + 'px ' + this.lineStyle + ' ' + this.color };
    },
    widthStyle() {
      return { width: `${this.lineWidth}`+'%' };
    }
  }
};
</script>

<style scoped>
.rt-diving-box {
  margin: 0 auto;
}
.rt-dividing-style {
  height: 0px;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
