JenkinsTest/page/zt/scss/rank.scss

@import "../../../sass/base/mixins";

$borderColor : #dcdcdc;
$orange : #ff6b1a;

.page-zt-rank{
    min-height: 100%;
    background: #ffffff;
    .rank-hd{
        height: px2rem(80);
        line-height: px2rem(80);
        padding: 0 px2rem(24);
        position: relative;
        z-index: 2;
        font-size: px2rem(28);
        color: #181818;
        .hd-row1{
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 2;
            background: #ffffff;
        }
        .hd-row2{
            display: none;
            position: absolute;
            top: px2rem(80);
            left: 0;
            z-index: 1;
            width: 100%;
            background: #ffffff;
            transform: translateY(-100%);
            transition: all .2s;
            &.active{
                transform: translateY(0);
            }
        }
        .btn-choose{
            display: none;
            color: #888888;
            font-size: px2rem(24);
            padding-right: px2rem(32);
            background: url(../../img/icon-choose.png) right center no-repeat;
            background-size: auto px2rem(24);
        }
        .list-choose{
            border-top: 1px solid $borderColor;
            li{
                border-bottom: 1px solid $borderColor;
                padding: 0 px2rem(24);
                text-align: center;
                color: $orange;
            }
            .item-choose{
                text-align: left;
                color: #181818;
                position: relative;
                &.active{
                    color: $orange;
                    &:before{
                        background: url(../../img/icon-select2.png) no-repeat;
                        background-size: 100%;
                    }
                }
                &:before{
                    content: '';
                    width: px2rem(36);
                    height: px2rem(36);
                    position: absolute;
                    top: 50%;
                    right: px2rem(24);
                    margin-top: px2rem(-18);
                    background: url(../../img/icon-select.png) no-repeat;
                    background-size: 100%;
                }
            }
        }
    }
    .rank-bd{
        position: relative;
        z-index: 1;
    }
}