<template>
    <view class="sliderPage">
      <view class="slider">
        <view class="rate" :style="{left: (index*10) + '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;
  padding-top: 8rpx;
  .slider{
    width: 120rpx;
    height: 8rpx;
    background: #E1E3E8;
    border-radius: 4rpx;
    position: relative;
    .rate{
      position: absolute;
      top: 0;
      height: 100%;
      background: #B2B4B9;
      border-radius: 4rpx;
      width: calc(100% / 8);
    }
  }
}
</style>
