// compress: true, sourceMap: true
p-input {
    position: relative;
    display: flex;
    align-items: center; 
    height: 30px;
    color: #fdfdfd;
    >.input_con {
        position: relative;
        height: 100%;
        flex: 1;
        // margin: 0 4px;
        border-bottom: rgba(255, 255, 255, .3) solid 1px;
        input {
            position: absolute;
            box-sizing: border-box;
            padding: 0 4px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            font-size: 11px;
            background-color: transparent;
            border: none;
            outline: none;
            color: inherit;
            text-align: inherit;
        }
    }
    >.p_input_jiao {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        display: none;
    }
    >[xv-content] {
        display: none;
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 100%;
        height: ~"calc(100% + 2px)";
        opacity: 0;
        outline: none;
    }
    .color_mark {
        position: relative;
        width: 16px;
        height: 16px;
        border-radius: 9px;
        >input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: none;
            opacity: 0;
        }
    }
    >.colorMarkBg {
        display: none;
        position: relative;
        width: 16px;
        height: 16px;
        border-radius: 9px;
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.3) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.3) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.3) 25%, transparent 0, transparent 75%, rgba(0, 0, 0, 0.3) 0);
        background-position: 0 0, 5px 5px;
        background-size: 10px 10px;
        background-color: #fff;
    }
    &[type="select"] {
        >.p_input_jiao {
            display: flex;
        }
        >[xv-content] {
            display: block;
        }
    }
    &[type="color"] {
        >.colorMarkBg {
            display: block;
        }
    }
    .p-input-mask {
        display: none;
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 100%;
        height: ~"calc(100% + 2px)";
    }
    &[disabled] {
        opacity: .5;
        >.p-input-mask {
            display: block;
        }
    }
    .range_con {
        // range区域样式
        display: none;
        margin: 0 4px;
        width: 60%;
        .range_line {
            height: 4px;
            background-color: rgba(255, 255, 255, .2)
        }
        .range_line_inner {
            position: relative;
            height: 100%;
            background-color: #3a89b6;
        }
        .range_mark {
            position: absolute;
            right: -4px;
            top: -4px;
            width: 12px;
            height: 12px;
            border-radius: 7px;
            background-color: #3a89b6;
            box-shadow: 0 0 2px rgba(0, 0, 0, .9);
            transition: all ease .2s;
            cursor: ew-resize;
            &:hover {
                cursor: default;
                transform: scale(1.2);
            }
        }
    }
    &[type="range"] {
        >.range_con {
            display: block;
        }
        .bigit {
            z-index: 3;
            &:after {
                position: absolute;
                left: -180px;
                top: -180px;
                display: block;
                width: 400px;
                height: 400px; // background-color: rgba(177, 48, 48, 0.384);
                content: "";
            }
        }
    }
}