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

<template>
    <div class="editor-container">
        <div class="left-editor">
            <!-- 左侧编辑区域内容 -->

            <img src="@/assets/images/transient.png" />
            <div class="inputTop">
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 4%" :disabled="!form[0].dipFlag">
                    <template #append>S</template>
                </el-input>
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 22%" :disabled="!form[0].dipFlag"> 
                    <template #append>S</template>
                </el-input>
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 40%" :disabled="!form[0].dipFlag">
                    <template #append>S</template>
                </el-input>
            </div>
            <div class="inputBottom">
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 21%" :disabled="!form[0].dipFlag">
                    <template #append>S</template>
                </el-input>
                <el-input v-model="form[0].dipData.fValue" style="width: 150px; left: 40%" :disabled="!form[0].dipFlag">
                    <template #append>S</template>
                </el-input>
            </div>
        </div>
        <div class="right-editor">
            <!-- 右侧编辑区域内容 -->
            <el-form-item label-width="120px" label="设定幅度(%)">
                <el-input v-model="form[0].dipData.fTransValue" style="width: 150px" :disabled="!form[0].dipFlag"/>
            </el-form-item>
            <el-form-item label-width="120px" label="持续时间(周波)">
                <el-input v-model="form[0].dipData.fRetainTime" style="width: 150px" :disabled="!form[0].dipFlag"/>
            </el-form-item>
        </div>
    </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 lang="scss" scoped>
canvas {
    border: 1px solid #ccc;
}

.editor-container {
    display: flex;
    height: 100%;
    width: 100%;
}

.left-editor {
    flex: 1; /* 左侧区域占据 3/4 的宽度 */
    position: relative;
    img {
        width: 90%;
        height: 150px;
        margin: 0 10px 20px;
    }
    .inputTop {
        position: absolute;
        top: 20px;
        width: 100%;
    }
    .inputBottom {
        position: absolute;
        bottom: -5px;
        width: 100%;
    }
}

.right-editor {
    width: 400px;
    /* margin-right: 250px; 向左侧移动一点 */
}
</style>