<template>
  <ul class="tabs">
    <li :class="{ active: value === item.value }" v-for="(item, index) in list" :key="index" @click="handleClick(item)">{{item.label}}</li>
  </ul>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  methods: {
    handleClick(item) {
      this.$emit('input', item.value)
    }
  }
}
</script>
<style scoped>
ul{
  display:flex;
}
li{
  width:192px;
  height:54px;
  background:#f5f5f5;
  font-size:16px;
  line-height:54px;
  color:#666;
  text-align:center;
  border-top:4px solid #f5f5f5;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  cursor:pointer;
  user-select: none;
}
li.active{
  background:#fff;
  border-top:4px solid #68B8A4;
}
</style>