$menuBgActive: linear-gradient(266deg, rgba(107, 178, 250, .05) 0%, rgba(57, 122, 242, .4) 100%);

.dy-submenu {
    float: left;
    flex-direction: column;
    width: 136px;
    height: 100%;
    overflow: hidden;
    background: #1f263e;
    box-shadow: 2px 2px 10px 0 rgba(24, 29, 50, .3);
    transition: width .4s;

    .dy-submenu-title {
        width: 100%;
        // float: left;
        height: 50px;
        overflow: hidden;
        font-size: 14px;
        color: #f2f2f2;

        div {
            float: left;
            height: 24px;
            margin: 22px 0 8px 18px;
            overflow: hidden;
        }
    }

    .dy-icon-submenu {
        float: right;
        display: block;
        margin-top: 24px;
        margin-right: 10px;
        transform: rotate(-90deg);

        &:hover {
            cursor: pointer;
        }
    }
}

.dy-submenu-close {
    width: 0;
    transition: width .4s;
}
//二级菜单
.dy-submenu-content-wrap {
    height: calc(100% - 50px);

    .dy-submenu-scroll {
        height: 100%;
        margin-right: 5px;
        overflow: auto;

        /* 滚动条样式 */
        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #2e3650;
        }

        &::-webkit-scrollbar-track {
            background: #1f263e;
        }
    }
}

.dy-submenu-content {
    margin-right: 5px;

    .dy-submenu-list {
        width: 100%;
        overflow: hidden;
    }

    .dy-submenu-list-item {
        position: relative;
        float: left;
        width: 100%;
        height: 44px;
        font-size: 14px;
        line-height: 44px;
        color: #aeb0b7;

        &:hover {
            background: $menuBgActive;
            cursor: pointer;
        }
    }

    .dy-submenu-list-ul {
        width: 100%;
        height: 0;
        overflow: hidden;
        font-size: 14px;
        transition: height .3s;

        div {
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-indent: 50px;
            color: #aeb0b7;
            background: #283254;
        }
    }

    .dy-menu-list-text {
        float: left;
        margin-left: 10px;
        overflow: hidden;
        opacity: 1;
    }

    .dy-menu-list-up {
        float: right;
        display: block;
        margin-top: 14px;
        margin-right: 0;
        line-height: 1;
        color: #aeb0b7;
        transform: rotate(180deg);
    }

    .dy-submenu-list-active {
        color: #397af2;
        background: linear-gradient(266deg, rgba(107, 178, 250, .05) 0%, rgba(57, 122, 242, .4) 100%);

        .dy-border {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 4px;
            height: 100%;
            background: #397af2;
        }

        .dy-menu-list-up {
            @include transition(rotateX(0deg),.5s);
        }

        .dy-menu-list-bottom {
            @include transition(rotateX(180deg),.5s);
        }

        .dy-submenu-list-ul {
            overflow: hidden;
            transition: height .3s;

            div {
                width: 100%;
                height: 44px;
                line-height: 44px;
                text-indent: 18px;
                color: #aeb0b7;
                background: #283254;

                &:hover {
                    background: $menuBgActive;
                    cursor: pointer;
                }
            }

            .dy-three-active {
                color: #fff;
                background: rgba(57, 122, 242, 1);

                &:hover {
                    color: #fff;
                    background: rgba(57, 122, 242, 1);
                }
            }
        }
    }
}

.dy-ul {
    // display: none;
    // height:auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s;
}

.dy-submenu-wrap {
    // background:linear-gradient(266deg,rgba(107,178,250,0.05) 0%,rgba(57,122,242,0.4) 100%);
    box-sizing: border-box;

    /* Safari */
    width: 214px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 40px;
    color: rgba(255, 255, 255, .4);
    transition: color .2;

    &:hover {
        // color: rgba(255,255,255,1);
        color: #397af2;
        cursor: pointer;
    }

    em {
        float: right;
        display: block;
        font-size: 14px;
    }
}

.dy-menu-active {
    position: relative;
    color: $FFF;

    .dy-submenu-wrap {
        color: #397af2;
        background: $menuBgActive;

        .dy-border {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 5px;
            height: 40px;
            background: rgba(57, 122, 242, 1);
        }
    }

    .dy-icon-top {
        @include transition(rotateX(0deg),.5s);
    }

    .dy-ul {
        max-height: 60px;
        transition: max-height .5s;
    }
}

.dy-menu-aclose {
    position: relative;
    color: $FFF;

    .dy-submenu-wrap {
        color: #397af2;
        background: $menuBgActive;

        .dy-border {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 5px;
            height: 40px;
            background: rgba(57, 122, 242, 1);
        }
    }
}