<template>
   <div class="main-contain">
      <div class="position">
        <bread-crumb :crumbs='crumbs'></bread-crumb>
      </div>
      <div class="app-container">
            <!-- 新增 -->
                <el-tabs type="border-card" style="width:450px;">
                    <el-tab-pane label="首页">
                        <el-tabs v-model="activeName" @tab-click="handleClick"  >
                            <el-tab-pane label="新增模块" name="first">
                                 <new-feature> </new-feature>
                            </el-tab-pane>
                            <el-tab-pane label="已使用" name="second">
                                 <used-list></used-list>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="联系我们">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="新增模块" name="three">
                                <add-contact></add-contact>
                            </el-tab-pane>
                            <el-tab-pane label="已使用" name="four">
                                
                            </el-tab-pane>
                        </el-tabs>                        
                    </el-tab-pane>
                </el-tabs>
            <!-- 已使用 -->
           
      </div>
   </div>
</template>

<script> 
import BreadCrumb from "../components/bread-crumb";
import NewFeature from "./components/new-feature";
import UsedList from "./components/used-list";
import AddContact from "./components/add-contact";
export default {
  name: "preview",
  components: {
    BreadCrumb,
    NewFeature,
    UsedList,
    AddContact
  },
  data() {
    return {
      crumbs: [{ path: false, name: "预览" }],
      activeName: 'first'
    };
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>


