.online_5{
    /*使用组件将 --position 的值改为 fixed*/
    /* --position: absolute; */
    /* position: var(--position); */
    padding: 8px 9px;
    background-color: #fff;
    border-radius: 5px;
    position: fixed;
    right: 10px;
    bottom: 40%;
    z-index: 1000;

    /* display: flex; */
    /* flex-direction: column; */
    /* row-gap: 12px; */
    /* .trilateral_5{
        --color1: @primary-color;
        --color2: @white;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 0;
        height: 0;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent var(--color1) transparent;
        &::after{
            content: '';
            display: block;
            position: absolute;
            top: -6px;
            left: -9px;
            width: 0;
            height: 0;
            border-width: 9px;
            border-style: solid;
            border-color: transparent transparent var(--color2) transparent;
        }
    } */

    .customer-wrap{
        position: absolute;
        width: 227px;
        /* height: 200px; */
        top: 3px;
        right: 63px;
        display: none;
        background-color: #fff;
        border-radius: 8px;
    }
    .customer-show{
        width: calc(100% - 10px);
        background: @white;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: all .75s;
    }
    .customer-item{
        display: flex;
        align-items: center;
        column-gap: 10px;
        padding: .75rem;
        div{
            color: #676767;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            row-gap: 8px;
            span:first-of-type{
                font-size: 18px;
                font-weight: bold;
            }
        }
        img{
            max-width: 24px;
        }
        &:hover{
            background: #f7f7f7;
        }
    }
    /* .svgs{
        position: relative;
    } */
    .slide-nav-item{

        /* width: 48px;
        height: 48px;
        background: #fff;
        border-radius: 5px;
        padding: 8px; */
        font-size: 18px;
        /* text-align: center; */
        /* color: @primary-color; */
        /* line-height: 1.4; */
        position: relative;
        #code{
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-image: url('../image/code0.png');
        }
        &:hover{
            color: @white;
            background: @primary-color;
            .trilateral_5{
                --color1: @white;
                --color2: @primary-color;
            }
            .customer-wrap{
                display: block;
            }
            #code{
                background-image: url('../image/code.png');
            }
        }
    }
}
/* .online_5:hover{
    .customer-warp{
        display: block;
    }
}
.customer-warp{
    display: none;
    width: 100px;
    height: 100px;
    background-color: #fff;
} */