<template>
  <div class="pass">
    <div class="left">
      <div
          class="menu-item menu-pass"
          :class="{active: $route.name === 'passList'}"
          @click="to('passList')"
      >通证列表</div>
      <div
          class="menu-item menu-record"
          :class="{active: $route.name === 'transferRecord'}"
          @click="to('transferRecord')"
      >划转记录</div>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  mounted() {
    console.log(this.$route.name)
  },
  methods: {
    to(path) {
      this.$router.push({ path: path });
    }
  }
}
</script>

<style scoped lang="less">
.pass {
  display: flex;
}
.left {
  width: 237px;
  flex-shrink: 0;
  height: calc(100vh - 50px);
  background: #FFFFFF;
  padding: 23px 17px 0 18px;

  .menu-item {
    width: 200px;
    height: 44px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #333B57;
    line-height: 44px;
    padding-left: 46px;
    background-repeat: no-repeat;

    &.active, &:hover {
      background-color: #F5F6FA;
    }

    &.menu-pass {
      background-size: 19px;
      background-position: 16px 12px;
      background-image: url("../../assets/images/pass/passlist.png");
      &.active {
        background-size: 27px;
        background-position: 12px 10px;
        background-image: url("../../assets/images/pass/passlist-active.png");
      }
    }

    &.menu-record {
      background-size: 18px;
      background-position: 17px 13px;
      background-image: url("../../assets/images/pass/record.png");
      &.active {
        background-size: 26px;
        background-position: 13px 11px;
        background-image: url("../../assets/images/pass/record-active.png");
      }
    }
  }
}
.main {
  width: 100%;
  background-color: #F5F6FA;
  padding: 29px 11px 56px 13px;
}

</style>
