<template>
  <div class="order-list">
    <div class="header">
      <Icon class="icon" name="arrow-left" size="16" color="#736F6F" />
      <ul>
        <li
          v-for="(item, index) in tabList"
          :class="{ active: index === currentTab }"
          @click="tabChange(index)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="list">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { Icon } from 'vant'
export default {
  components: {
    Icon,
 
  },
  data () {
    return {
      tabList: ['订单'],
      currentTab: 0,
    }
  },
  methods: {
    tabChange (index) {
      this.currentTab = index
    }
  }
}
</script>
<style lang="scss" scoped>
.order-list {
  height: 100vh;
  position: relative;
  .header {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 13px 19px;
    height: 43px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .icon {
      margin-right: 10px;
    }
    ul {
      display: flex;
      align-items: center;
      li {
        color: #1f1e1e;
        font-size: 18px;
        margin-right: 33px;
      }
      .active {
        font-size: 21px;
        font-weight: 600;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          width: 8px;
          height: 4px;
          background: #d32323;
          border-radius: 2px;
          bottom: -8px;
          left: 50%;
        }
      }
    }
  }
  .list {
    height: 100vh;
    padding-top: 43px;
  }
  
}
</style>
