<template>
<!--  <view class="sliderPage">-->
<!--    <view class="slider">-->
<!--      <view class="rate" :style="{left: (index*15) + 'rpx'}"></view>-->
<!--    </view>-->
<!--  </view>-->

  <view class="scrollPage">
    <scroll-view class="scrollBox" 	scroll-x="true">
      <view :id="'item'+i" :class="index===i?`scrollItem selectScroll${index}`:'scrollItem'" v-for="(item,i) in pageList" :key="i">{{item}}</view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  name: "sliderPage",
  data(){
    return {
      pageList:["基础信息","车流画像","经营画像","客群画像","交易画像","业态品牌","考核考评","日常巡检"]
    }
  },
  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;
  background: #fff;
  .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);
    }
  }
}
.scrollPage{
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  padding: 0 16rpx;
  .scrollBox{
    width: 100%;
    height: 100%;
    white-space: nowrap;
    .scrollItem{
      display: inline-block;
      height: 100%;
      box-sizing: border-box;
      padding: 8rpx 16rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #786B6C;
      line-height: 40rpx;
    }
    .selectScroll1{
      color: #1E67FF;
      position: relative;
    }
    .selectScroll1:after{
      content:'';
      position: absolute;
      display: inline-block;
      bottom: 0rpx;
      left: 10rpx;
      width: 80%;
      height: 8rpx;
      background: #1E67FF;
    }
  }
}
</style>
