<template>
    <div class="tabs-container">
      <el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%;">
        <el-tab-pane label="间谐波A">
          <!-- 全局设置菜单内容 -->
          <div>
            <el-form-item label="含有率(%)" prop='name'>
              <el-input />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="间谐波次数" prop='name'>
              <el-input />
            </el-form-item>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%;">
        <el-tab-pane label="间谐波B">
          <!-- 全局设置菜单内容 -->
          <div>
            <el-form-item label="含有率(%)" prop='name'>
              <el-input />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="间谐波次数" prop='name'>
              <el-input />
            </el-form-item>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.tabs-container {
  display: flex;
  justify-content: center; /* 使两个 el-tabs 居中对齐 */
  align-items: stretch; /* 使两个 el-tabs 高度拉伸 */
  height: 100%;
  padding: 0 20px; /* 可选：添加左右间距 */
}

.fixed-width-tabs {
  width: 400px; /* 设置固定的宽度 */
  margin-right: 100px; /* 可选：添加右侧间距 */
}

.fixed-width-tabs:last-child {
  margin-right: 0; /* 最后一个 el-tabs 不需要右侧间距 */
}

.el-tab-pane {
  display: flex;
  flex-direction: column; /* 确保内容上下排列 */
}

.el-form-item {
  margin-bottom: 20px; /* 可选：添加表单项之间的间距 */
}
</style>