<template>
  <div class="app-container">
    <el-tabs v-model="activeName"
      class="tabs">
      <el-tab-pane v-for="item in list"
        :label="item.name"
        :name="item.name"
        lazy>
        <keep-alive>
          <component :is="item.component"></component>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import cmm from './cmm'
import sycmStore from './sycm_store'
import sycmPrd from './sycm_prd'
import { ref } from 'vue'
const list = ref([
  { name: '蝉妈妈', component: cmm },
  { name: '生意参谋-竞店', component: sycmStore },
  { name: '生意参谋-竞品', component: sycmPrd }
])
const activeName = ref(list.value[0].name)
</script>

<style scoped
  lang="scss">
  .app-container {
    .tabs {
      background: var(--el-bg-color-overlay);
      padding: 20px;
    }
  }
</style>