<template>
  <view class="sliderPage">
    <view class="slider">
      <view class="rate" :style="{right: (index*15) + 'rpx'}"></view>
    </view>
  </view>
</template>
<script>
export default {
  name: "sliderPage",
  data(){
    return {

    }
  },
  props:{
    index:{
      type: Number,
      default: 0
    }
  },
  onLoad(){

  },
  methods:{

  }
}
</script>

<style scoped lang="scss">
.sliderPage{
  width: 100%;
  height: 16rpx;
  display: flex;
  justify-content: center;
  margin-top: 8rpx;
  .slider{
    width: 120rpx;
    height: 8rpx;
    background: #e0dfdf;
    border-radius: 4rpx;
    position: relative;
    .rate{
      position: absolute;
      top: 0;
      height: 100%;
      background: #786B6C;
      border-radius: 4rpx;
      width: calc(100% / 8);
    }
  }
}
</style>
