.chartConfig { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; .controlRow { display: flex; align-items: center; margin-bottom: 4px; height: 44px; padding: 6px; background: #ffffff; .leftBtn { font-size: 18px; font-weight: bold; cursor: pointer; margin-right: 10px; &:hover { color: #1685FF; opacity: 0.8; } } } .contentWrapper { flex: 1; width: 100%; display: flex; column-gap: 8px; overflow: hidden; :global { .@{ant-prefix}-form-item { margin-bottom: 8px; } .@{ant-prefix}-input-number { width: 100%; } } .leftLayout { flex: 1; height: 100%; padding: 8px; background: #fff; overflow: auto; .layoutWrapper { width: 100%; height: 100%; display: flex; .chartWrapper { display: flex; column-gap: 8px; flex: 1; overflow: hidden; .chartItem { border: 1px dashed #3d3d3d; display: flex; justify-content: center; align-items: center; cursor: pointer; &.activeChart { //background: #1685FF; border-color: #1685FF; color: #fff; } } } .tableWrapper { border: 1px dashed #3d3d3d; display: flex; justify-content: center; align-items: center; cursor: pointer; } // 上下布局 &.columnLayout { flex-direction: column; row-gap: 8px; .tableWrapper { width: 100%; height: 50%; } .chartWrapper { width: 100%; flex: 1; .chartItem { //flex: 1; width: 100%; border: 1px dashed #333; &.activeChart { border-color: #1685FF; color: #fff; } } } } // 左右布局 &.rowLayout { column-gap: 8px; .chartWrapper { display: flex; flex-direction: column; row-gap: 8px; .chartItem { //flex: 1; width: 100%; border: 1px dashed #333; &.activeChart { border-color: #1685FF; color: #fff; } } } } } } .rightPanel { flex: none; width: 500px; height: 100%; background: #fff; overflow: hidden; display: flex; flex-direction: column; .configForm { width: 100%; flex: 1; overflow: hidden; display: flex; flex-direction: column; .titleWrap { display: flex; height: 40px; flex: none; justify-content: center; align-items: center; background: #1685FF; color: #ffffff; } .tableFormWrap { flex: none; } .commonTitle { position: relative; padding-left: 20px; &::before { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); content: ''; width: 3px; height: 14px; background: #1685FF; } } .saveBtnWrap { flex-direction: row-reverse; column-gap: 4px; padding: 0 12px; margin-top: 8px; align-items: center; } .chartFormWrap { flex: 1; overflow: auto; .pointerEvents { pointer-events: none; } } } .submitWrap { width: 100%; height: 40px; flex: none; display: flex; align-items: center; flex-direction: row-reverse; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } } } }