pqs-9100_client/frontend/src/views/machine/testScript/components/testScriptFlickerTab.vue

<template>
    <div class="tabs-container">
        <el-tabs type="border-card" class="fixed-width-tabs" style="height: 100%">
            <el-tab-pane label="Modulation">
                <!-- 全局设置菜单内容 -->
                <div class="form-container">
                    <el-form-item label=""></el-form-item>
                    <el-form-item label="电压变动幅度(%)" label-width="140px" prop="name">
                        <el-input
                            style="width: 150px"
                            v-model="form[0].flickerData.fchagValue"
                            :disabled="!form[0].flickerFlag"
                        />
                    </el-form-item>
                </div>
                <div class="form-container">
                    <el-form-item label="波动类型" prop="name">
                        <el-select
                            placeholder="请选择波动类型"
                            style="width: 150px"
                            v-model="form[0].flickerData.waveFluType"
                            :disabled="!form[0].flickerFlag"
                        >
                            <el-option label="Hz" :value="1"></el-option>
                            <el-option label="CPM" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        :label="`波动频度( ${form[0].flickerData.waveFluType == 1 ? 'Hz/min' : '次/min'})`"
                        label-width="140px"
                        prop="name"
                    >
                        <el-input
                            style="width: 150px"
                            v-model="form[0].flickerData.fchagFre"
                            :disabled="!form[0].flickerFlag"
                        />
                    </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="WaveForm">
                <!-- 全局设置菜单内容 -->
                <div>
                    <el-form-item label="波类型" label-width="100px" prop="name">
                        <el-select
                            placeholder="请选择波类型"
                            style="width: 150px"
                            v-model="form[0].flickerData.waveType"
                            :disabled="!form[0].flickerFlag"
                        >
                            <el-option label="RECT" :value="2"></el-option>
                            <el-option label="SIN" :value="1"></el-option>
                            <el-option label="SQU" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="占空比(%)" label-width="100px" prop="name">
                        <el-input
                            style="width: 150px"
                            v-model="form[0].flickerData.fdutyCycle"
                            :disabled="!form[0].flickerFlag"
                        />
                    </el-form-item>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
const props = defineProps({
    childForm: {
        type: Array,
        required: true
    }
})
const form: any = computed({
    get() {
        return props.childForm
    },
    set(value) {}
})
</script>

<style scoped>
.form-container {
    display: flex;
    justify-content: space-between; /* 使两个 el-form-item 之间有间距 */
    align-items: center; /* 使两个 el-form-item 垂直居中对齐 */
}

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

.fixed-width-tabs {
    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>