.dropdown-title {
    width: 1.6rem;
    z-index: 1;
    position: relative;
    height: 24px;
    line-height: .24rem;
    &.left {
        text-align: left;
    }
    &.right {
        text-align: right;
    }
    .title-text {
        font-size: .2rem;
        max-width: 1.3rem;
        text-align: center;
        overflow-y: hidden;
        white-space: nowrap;
        display: inline-block;
        text-overflow: ellipsis;
    }
    .icon {
        position: absolute;
        top: -9px;
        margin-left: 6px;
    }
    &.center {
        text-align: center;
        padding-right: .24rem;
    }
}

.dropdown-container {
    top: .3rem;
    z-index: 1;
    position: relative;
    .menu {
        opacity: 0;
        padding: 0;
        position: absolute;
        transition: height .5s, max-height .5s, min-height .5s, opacity .5s;
        &:before {
            z-index: 2;
            content: "";
            position: absolute;
            border: 8px solid transparent;
            border-bottom-color: #36434d;
        }
        .dropdown-list {
             height: 0;
             border-radius: 4px;
             overflow: scroll;
             transition: height .5s, max-height .5s, min-height .5s, opacity .5s;
             padding: 0 .12rem;
             margin-top: -.05rem;
             background-color: #36434d;
             .dropdown-item {
                 font-size: .16rem;
                 text-align: center;
                 color: #ffffff;
             }
         }
         .dropdown-list-open {
             height: 100%;
             transition: height .5s, max-height .5s, min-height .5s, opacity .5s;
         }
    }
    .open {
        opacity: 1;
        transition: height .5s, max-height .5s, min-height .5s, opacity .5s;
    }
    &.center {
        .menu {
            .dropdown-list {
                 border: solid 1px #fff;
                 .dropdown-item {
                     margin: .24rem 0;
                 }
             }
             &:before {
                 left: 50%;
                 top: -.2rem;
                 margin-left: -8px;
             }
        }
    }
    &.left, &.right {
        .menu {
            &:before {
               z-index: 1;
               top: -.16rem;
            }
            .dropdown-list {
                position: absolute;
                padding:0 28px 0 16px;
                .dropdown-item {
                    margin-top: .2rem;
                    text-align: left;
                    word-break:keep-all;
                    white-space:nowrap;
                    &:first-child {
                        margin-top: .27rem;
                    }
                    .item-label {
                      position: relative;
                      margin-left: .12rem;
                      top: -.14rem;
                    }
                }
            }
        }
    }
}