<template>
    <div class="city-box">
      <ul>
        <li v-for="d in cityList" @click="chooseCity(d)" :class="{active:d.threeCode==cityCode}">{{d.shortName}}</li>
      </ul>
    </div>
</template>
<script>
    export default {
        name: '',
        props:{
          cityList:'',
          cityCode:''
        },
        data () {
            return {}
        },
        methods: {
          chooseCity(d){
              this.$emit("chooseCity",d)
          },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import "../../assets/stylus/colorConfig.styl"
.city-box{
  padding 0px 10px
  ul {
    display inline-block
    li {
      float left
      width 60px
      line-height 15px
      padding-bottom 12px
      text-align center
      font-size 14px
      color mainTitleColor
      cursor pointer
      box-sizing border-box
      &.active {
        color mainColor
      }
      span {
        padding 4px 10px
      }
      &:hover {
        span {
          background #ffede9
        }
      }
    }
  }
}
</style>
