<template>
    <div class="editor-container">
            <div class="left-editor">
                    <!-- 左侧编辑区域内容 -->
                    <canvas ref="canvas" width="600" height="165"></canvas>
            </div>
            <div class="right-editor">
                    <!-- 右侧编辑区域内容 -->
                        <el-form-item label="电压有效值(V)">
                            <el-input v-model="input1" />
                        </el-form-item>
                        <el-form-item label="电流有效值(A)">
                            <el-input v-model="input1"  />
                        </el-form-item>
                        <el-form-item label="相角(°)">
                            <el-input v-model="input2"  />
                        </el-form-item>
            </div>
    </div>
</template>

<script setup lang="ts">

</script>

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

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

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

.right-editor {
  flex: 1; /* 右侧区域占据 1/4 的宽度 */
}
</style>