<template>
  <el-tabs v-model="activeMenu" type="border-card">
    <el-tab-pane :label="$t('project')" name="project">
      <div class="h-50px flex items-center">
        <Project />
      </div>
    </el-tab-pane>
    <el-tab-pane :label="$t('edit')" name="page">
      <div class="h-50px flex items-center">
        <Opreate />
      </div>
    </el-tab-pane>
    <el-tab-pane :label="$t('Tools')" name="tool">
      <div class="h-50px flex items-center">
        <Custom />
      </div>
    </el-tab-pane>
    <el-tab-pane :label="$t('help')" name="help">
      <div class="h-50px flex items-center">
        <Help />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Project from './Project.vue'
import Opreate from './Operate.vue'
import Custom from './Custom.vue'
import Help from './Help.vue'

const activeMenu = ref('project')
</script>

<style lang="less" scoped>
:deep(*) {
  .el-tabs__item {
    height: 32px;
  }
}
:deep(.el-tabs__content) {
  padding: 3px 15px;
}
</style>
