<template>
  <div class="app-container">
    <el-tabs v-model="btn" @tab-change="changeTab">
      <el-tab-pane label="会员列表" name="one" />
      <el-tab-pane label="即将过期会员" name="two" />
    </el-tabs>

    <memberList v-if="btn=='one'" />
    <expiringSoon v-if="btn=='two'" />
  </div>
</template>

<script setup >

import { ref } from 'vue'
import memberList from '@/views/member/memberList.vue'
import expiringSoon from '@/views/member/expiringSoon.vue'
const btn = ref('one')
const changeTab = (n) => {
  btn.value = n
}
</script>

<style lang="scss" scoped>
.router {
  margin-right: 20px;
}
.tabs{
  display: flex;
  font-size: 16px;
  .tab{
    font-weight: 500;
    font-size: 16px;
    padding-bottom: 10px;
    margin: 0px 10px 10px 10px;
    cursor:pointer;
  }
  .tabBtn{
    border-bottom: 2px solid #014A9F;
    color: #014A9F;
  }
}
</style>