<template>
    <div class="system-data-migration">
        <a-tabs v-model:activeKey="tabActiveKey" class="main-tabs">
          <a-tab-pane key="import" tab="导出工作区">
              <Export/>
          </a-tab-pane>
          <a-tab-pane key="outport" tab="导入工作区" force-render>
             <Import/>
          </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script lang="ts" setup>
  import { ref, computed, onMounted, onUnmounted, createVNode} from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import Export from './components/export/index.vue';
  import Import from './components/import/index.vue';
  
  const tabActiveKey = ref('import');

    
</script>

<style lang="less" scoped>
   .system-data-migration{
      position:absolute;
      height:100%;
      width:100%;
      background-color:white;
      padding-top:10px;
    }
    
    .main-tabs {
        height: 100%;
    }
    
    :deep(.ant-tabs-nav){
          border-bottom:0px;
    }
    :deep(.ant-tabs-nav-wrap) {
        width: 100% !important;
        display: block !important;
    }

    :deep(.ant-tabs-tab) {
        min-width: 200px !important;
        width:calc(50% - 2px);
        display: block !important;
        text-align: center !important;
        font-size:16px;
        padding:8px 0px;
        &.ant-tabs-tab-active{
            // box-shadow: 10px 10px 100px rgba(#1677ff, 1) inset;
            .ant-tabs-tab-btn{
                // color:#fff; 
            }
        }
    }
    
    :deep(.ant-tabs-tab:first-child) {
       border-radius: 10px 0px 0px 10px;
    }
    
   :deep(.ant-tabs-tab + .ant-tabs-tab){
      margin:0px 0px 0px 0px;
      border-radius: 0px 10px 10px 0px;
    }
    
    
    :deep(.ant-tabs-content-holder) {
            height:100%;
     }
     
     :deep(.ant-tabs-content) {
         height: 100% !important;
         overflow-y: auto;
         padding:10px 10px;
     }
     
     
    :deep(.ant-tabs-tabpane) {
        padding: 0 8px;
        height:100%;
    }

    :deep(.ant-tabs-nav) {
        margin-bottom: 0;
    }

  
</style>
