<template>
  <div class="c_left">
    <ul>
      <li :class="{active:currActive=='orderList'}"><router-link to="/orderList/all">我的订单</router-link></li>
      <li :class="{active:currActive=='mine'}"><router-link to="/mine">账号设置</router-link></li>
      <li :class="{active:currActive=='travel'}"><router-link to="/travellerList">常用旅客</router-link></li>
    </ul>
  </div>
</template>
<script>
    export default {
        name: '',
        props:{
            currActive:''
        },
        data () {
            return {

            }
        },
        methods: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "../../assets/stylus/colorConfig.styl"
  .c_left{
    float left
    width 290px
    margin-right 20px
    ul{
      border 1px solid border_color
      background #fff
      li{
        position relative
        height 60px
        line-height 60px
        padding-left 28px
        box-sizing border-box
        border-bottom 1px solid border_color
        cursor pointer
        transition all 1s
        &:before{
          content ''
          position: absolute
          width 4px
          left 0px
          transition all .5s
          top 50%
          transform translateY(-50%)
        }
        a{
          display block
          width 100%
        }
        &.update_padd{
          font-size 14px
          span{
            font-size 12px
            padding-right 5px
          }
        }
        &:last-child{
          border-bottom none
        }

      }
    }
  }
</style>
