urbanLifeline/urbanLifelineWeb/packages/shared/src/components/dynamicComponent/DynamicComponent.scss

.dynamic-component {
    width: 100%;

    // Element Plus 表单项适配
    :deep(.el-form-item) {
        margin-bottom: 18px;

        .el-form-item__label {
            font-weight: 500;
            color: #606266;
            font-size: 14px;
        }

        .el-form-item__content {
            .el-input,
            .el-select,
            .el-date-editor,
            .el-time-picker,
            .el-cascader,
            .el-tree-select {
                width: 100%;
            }

            // 数字输入框
            .el-input-number {
                width: 100%;
                
                .el-input__wrapper {
                    width: 100%;
                }
            }

            // 复选框组和单选框组
            .el-checkbox-group,
            .el-radio-group {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;

                .el-checkbox,
                .el-radio {
                    margin-right: 0;
                }
            }

            // 开关组件
            .el-switch {
                .el-switch__label {
                    font-size: 14px;
                    color: #606266;
                }
            }

            // 滑块组件
            .el-slider {
                .el-slider__input {
                    width: 130px;
                }
            }

            // 评分组件
            .el-rate {
                display: flex;
                align-items: center;
                
                .el-rate__text {
                    margin-left: 8px;
                    font-size: 14px;
                    color: #606266;
                }
            }

            // 颜色选择器
            .el-color-picker {
                .el-color-picker__trigger {
                    border: 1px solid #dcdfe6;
                    border-radius: 4px;
                    
                    &:hover {
                        border-color: #c0c4cc;
                    }
                }
            }

            // 上传组件
            .el-upload {
                &.upload-demo {
                    .el-upload__tip {
                        margin-top: 8px;
                        font-size: 12px;
                        color: #909399;
                    }
                }
            }

            // 级联选择器
            .el-cascader {
                .el-cascader__tags {
                    max-width: 100%;
                }
            }

            // 树形选择
            .el-tree-select {
                .el-tree-select__tags {
                    max-width: 100%;
                }
            }
        }

        // 错误状态样式
        &.is-error {
            .el-input__wrapper,
            .el-select__wrapper,
            .el-date-editor,
            .el-cascader__wrapper,
            .el-tree-select__wrapper {
                box-shadow: 0 0 0 1px #f56565 inset;
            }
        }

        // 必填标记
        &.is-required {
            .el-form-item__label::before {
                content: '*';
                color: #f56565;
                margin-right: 4px;
            }
        }
    }

    // 描述信息图标
    .description-icon {
        margin-left: 4px;
        color: #909399;
        cursor: help;
        font-size: 14px;

        &:hover {
            color: #409eff;
        }
    }

    // 自定义样式调整
    .el-form-item__content {
        // 确保组件占满宽度
        .el-input,
        .el-select,
        .el-date-editor,
        .el-cascader,
        .el-tree-select {
            width: 100% !important;
        }

        // 日期范围选择器特殊处理
        .el-date-editor--daterange,
        .el-date-editor--datetimerange {
            width: 100% !important;
        }

        // 多选标签折叠样式
        .el-tag {
            margin-right: 6px;
            margin-bottom: 4px;
        }
    }

    // 响应式设计
    @media (max-width: 768px) {
        :deep(.el-form-item) {
            .el-form-item__content {
                .el-checkbox-group,
                .el-radio-group {
                    flex-direction: column;
                    gap: 12px;
                }
            }
        }
    }
}