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

<template>
    <div class="editor-container">
                  <div class="left-editor">
                    <!-- 左侧编辑区域内容 -->
                 
                  </div>
                  <div class="right-editor">
                    <!-- 右侧编辑区域内容 -->
                        <el-form-item label-width="120px" label="设定幅度(%)">
                            <el-input v-model="input1"  style="width: 150px;" />
                        </el-form-item>
                        <el-form-item label-width="120px" label="持续时间(周波)">
                            <el-input v-model="input2"   style="width: 150px;"/>
                        </el-form-item>
                  </div>
                </div>
</template>

<script setup lang="ts">
const input1 = ref('')
const input2 = ref('')
</script>

<style scoped>
canvas {
  border: 1px solid #ccc;
}

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


.left-editor {
  flex: 3; /* 左侧区域占据 3/4 的宽度 */
  margin-left: 150px; /* 可选：添加间距 */
}

.right-editor {
  flex: 1; /* 右侧区域占据 1/4 的宽度 */
  margin-right: 250px; /* 向左侧移动一点 */
}
</style>