eventList.vue

<template>
  <div class="box">
      <div v-for="(item,index) in list" :key="index" class="list-box">
        <div class="list-name">{{item.event_name}}</div>
        <div class="list-num">{{item.total_num}}</div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list:[]
    }
  },
  methods:{
     getTrafficType() {
      this.$api.show.getTrafficType().then(res => {
        this.list = res.list_data
      })
    }
  },
  created(){
    this.getTrafficType()
  }
}
</script>

<style lang="stylus" scoped>
.box{
  width 7vw
  background #fff
  box-shadow:0px 2px 4px 0px rgba(0,0,0,0.18);
  opacity:0.9;
}
.list-box{
  display flex
  height 3vh
  line-height 3vh
  border-bottom 1px solid #E5E5E5
}
.list-box:last-child{
  border-bottom 0
}
.list-name{
  padding-left 10px
  flex 1
  overflow hidden
}
.list-num{
  width 2.5vw
  border-left 1px solid #E5E5E5
  text-align center
}

</style>