<template>
  <div class="main_root">
    <div class="menu_info">
      <div
        :class="['menu_item', selectedMenu === 1 ? 'selected' : '']"
        @click="selectedMenu = 1"
      >
        按批次
      </div>
      <div
        :class="['menu_item', selectedMenu === 2 ? 'selected' : '']"
        @click="selectedMenu = 2"
      >
        按详情
      </div>
    </div>
    <Batch v-if="selectedMenu === 1"></Batch>
    <Detail v-else-if="selectedMenu === 2"></Detail>
  </div>
</template>

<script>
import Batch from "./batch.vue";
import Detail from "./detail.vue";
export default {
  components: {
    Batch,
    Detail
  },
  data() {
    return {
      selectedMenu: 1
    };
  }
};
</script>

<style lang="less" scoped>
.menu_info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 16px;
  font-size: 16px;
  color: #7c8db5;
  .menu_item {
    margin-right: 16px;
    padding: 0 4px 6px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    &.selected {
      color: #339dff;
      border-color: #339dff;
    }
  }
}
</style>
