<template>
  <div>
    <ul class="tab-btn__box">
      <li @click="tabChange(index)" :class="index === tabIndex && 'active'" v-for="(item, index) in data.tab" :key="index">
        <div class="num">0{{ index + 1 }}</div>
        <div class="text">{{ item }}</div>
      </li>
    </ul>
    <ul class="tab-content__box">
      <li :class="index === tabIndex && 'active'" v-for="(item, index) in data.content" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    data: { type: Object }
  },
  data() {
    return {
      tabIndex: 0
    }
  },
  methods: {
    tabChange(index) {
      this.tabIndex = index
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-btn__box{
  display: flex;
  justify-content: space-between;
  li{
    width: 1.1rem;
    height: .75rem;
    background: #FBFBFB;
    position: relative;
    box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
    &.active{
      background: #fff;
      &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: .04rem;
        background: #AA1941;
      }
    }
    .num{
      font-size: .18rem;
      font-weight: normal;
      line-height: 100%;
      color: #AA1941;
      text-align: center;
      padding-top: .17rem;
    }
    .text{
      font-size: .1rem;
      line-height: 100%;
      color: #424242;
      margin-top: .1rem;
      text-align: center;
    }
  }
}
.tab-content__box{
  width: 100%;
  li{
    font-size: .12rem;
    line-height: .24rem;
    color: #333333;
    padding: .32rem .21rem;
    background: #fff;
    box-shadow: 0px 1px 25px rgba(0, 0, 0, 0.06);
    margin-top: .15rem;
    display: none;
    &.active{
      display: block;
    }
  }
}
</style>
