<template>
    <div>  
        <div></div>
        <div class="tabMenu">
            <ul>
                <li v-for="(item,i) in ['病历','透析','今日','前次']" :key="i" :class="index == i? 'active':'' " >{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  name: "DetailsHead",
  data() {
    return {
      index: 2
      
    };
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tabMenu {
  background: $main-color;
  padding: 0.2rem 0;
  ul {
    width: 50%;
    margin: 0 auto;
    @include box-sizing;
    @include display-flex;
    @include text-align;
    li {
      font-size: 0.32rem;
      color: $text-color;
      @include flex;
      float: left;
      padding: 0 0 0.15rem 0;
      &.active {
        font-weight: 700;
        position: relative;
        &:after {
          width: 0.5rem;
          height: 0.06rem;
          background: $white-bg;
          content: "";
          display: block;
          text-align: center;
          position: absolute;
          left: 50%;
          bottom: 0;
          border-radius: 10px;
          transform: translate(-50%, 50%);
        }
      }
    }
  }
}
</style>

