侧边栏

点击时背景色变化多出侧滑线，默认进来就是侧边栏第一个

                           

<template>
  <ul class="class_left">
    <li v-for="(item, index) in labels" :key="index" @click="Tap(index, item)">
      <div :class=" LightIndex == index ? 'left_content' : ' ' "></div>
      <div :class=" LightIndex == index ? 'left_font' : ' ' ">{{item.state}}</div>
    </li>
  </ul>
</template>

<script>
import labels from './js/labels.js'
export default {
  data () {
    return {
      labels,
      LightIndex: 0
    }
  },
  methods: {
    Tap (index, item) {
      this.LightIndex = index
      console.log(index, item)
    }
  }
}
</script>

<style lang="less" scoped>
  .class_left{
    margin-top: 1.333333rem; //侧边栏一般都有个顶部栏，margin-top就是避免被遮住一部分，顶部栏记得加z-index：1层级，才不会侧边栏滚动时显示和顶部栏重叠那一部分
    background: whitesmoke;
    width: 2.826666rem;
    padding-bottom: 0.7rem;
    li{
      height: 1.053333rem;
      line-height:1.053333rem;
      width: 2.826666rem;
      text-align: center;
      font-size: 0.373333rem;
      font-weight: 500;
      color: #343434;
      margin-bottom: 0.26rem;
      position: relative;
    }
    .left_content{
      background: #FF215D;
      height: 100%;
      width: 0.0825rem;
      position: absolute;
      top:50%;
      transform: translateY(-50%);
    }
    .left_font{
      background: white;
    }
  }
</style>