Browse Source

refactor(editor): 优化 BayEditor 组件布局和样式

- 调整 bay-info 和 bay-empty 的布局结构
- 添加 bay-empty 样式,用于显示空状态提示
- 优化 level heights部分的样式
master
lizw-2015 6 months ago
parent
commit
f3d2a49ec5
  1. 17
      src/editor/propEditors/BayEditor.vue

17
src/editor/propEditors/BayEditor.vue

@ -152,8 +152,7 @@ export type {
</div> </div>
</div> </div>
</div> </div>
<div class="flex-item-fill flex-column-container bay-editor-bay-info"> <div v-if="selectDay" class="flex-item-fill flex-column-container bay-editor-bay-info">
<template v-if="selectDay">
<div class="flex-item-fixed"> <div class="flex-item-fixed">
<ElFormItem label="Bay Width" :labelWidth="80"> <ElFormItem label="Bay Width" :labelWidth="80">
<ElInputNumber :controls="false" :modelValue="selectDay.bayWidth"/> <ElInputNumber :controls="false" :modelValue="selectDay.bayWidth"/>
@ -173,7 +172,9 @@ export type {
<ElInputNumber :controls="false" :modelValue="levelHeight"/> <ElInputNumber :controls="false" :modelValue="levelHeight"/>
</ElFormItem> </ElFormItem>
</div> </div>
</template> </div>
<div v-else class="flex-item-fill bay-editor-bay-empty">
Select One Bay
</div> </div>
</div> </div>
</div> </div>
@ -299,4 +300,14 @@ export type {
.bay-editor-bay-info-level-height :deep(input[type=number].el-input__inner) { .bay-editor-bay-info-level-height :deep(input[type=number].el-input__inner) {
text-align: left; text-align: left;
} }
.bay-editor-bay-empty {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #595959;
background: #f5f5f5;
margin-left: 8px;
}
</style> </style>

Loading…
Cancel
Save