<template>
  <div class="app-container">
    <!-- 顶部操作区域 -->
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="供应商主页" name="first" />
      <el-tab-pane label="商品详情" name="second" />
      <el-tab-pane label="文章详情" name="third" />
      <el-tab-pane label="搜索列表" name="fourth" />
      <!-- 列表 -->
      <template v-if="activeName === 'first'">
        <shop />
      </template>
      <template v-if="activeName === 'second'">
        <product />
      </template>
      <template v-if="activeName === 'third'">
        <Article />
      </template>
      <template v-if="activeName === 'fourth'">
        <search />
      </template>
    </el-tabs>
  </div>
</template>

<script>
import Shop from './components/shop'
import Product from './components/product'
import Article from './components/article'
import Search from './components/search'
export default {
  name: 'CustomerPageList',
  components: {
    Shop,
    Product,
    Article,
    Search
  },
  filters: {},
  data() {
    return {
      activeName: 'first',
      isLoading: true,
      list: [],
      total: 0
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // tab切换
    handleClick(tab, event) {}
  }
}
</script>

<style></style>
