music-score/src/view/rhythm/index.module.less

.rhythm{
    width: 100%;
    height: 100%;
    position: relative;
    .titImg{
        width: 100px;
        height: 38px;
        background: url("./imgs/tit.png") no-repeat;
        background-size: 100% 100%;
        margin-right: 30px;
    }
    .rhythmBox{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        .rhythmImg{
            width: 50px;
            height: 50px;
            background: #FFFFFF;
            border-radius: 14px;
            background-size: 44px 44px;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 14px;
            &.active{
                width: 70px;
                height: 70px;
                background-size: 70px 70px;
                border-radius: 19px;
                background-color: #35A8FF;
                box-shadow: 0 0 0 3px #ffffff; 
            }
            &:last-child{
                margin-right: 0;
            }
            &.rhythm1{
                background-image: url("./imgs/1.png");
            }
            &.rhythm2{
                background-image: url("./imgs/2.png");
            }
            &.rhythm3{
                background-image: url("./imgs/3.png");
            }
            &.rhythm4{
                background-image: url("./imgs/4.png");
            }
            &.rhythm5{
                background-image: url("./imgs/5.png");
            }
            &.rhythm6{
                background-image: url("./imgs/6.png");
            }
            &.rhythm7{
                background-image: url("./imgs/7.png");
            }
        }
    }
    &.vertical{
        overflow: hidden;
        background: linear-gradient( 180deg, #AFE8FF 0%, #D9F3FE 100%);
        .titImg{
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            margin-right: 0;
        }
        .rhythmBox{
            flex-wrap: wrap;
            .rhythmImg{
                &.active{
                    background-color: #ffffff;
                    box-shadow: 0 0 0 2px #35A8FF;   
                }
                margin-bottom: 20px;
                width: 40px;
                height: 40px;
                border-radius: 10px;
                background-size: 36px 36px;
                &:nth-child(4){
                    margin-right: 0;
                }
                &:nth-child(5){
                    margin-bottom: 0;
                }
                &:nth-child(6){
                    margin-bottom: 0;
                }
                &:nth-child(7){
                    margin-right: 0;
                    margin-bottom: 0;
                }
                &:first-child{
                    margin-left: 20px;
                    margin-right: 20px;
                    width: 110px;
                    height: 110px;
                    background-size: 110px 110px;
                    border-radius: 28px;
                    box-shadow: 0 0 0 4px #FFFFFF;
                    background-color: #35A8FF;
                }
            }
        }
    }
}