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

.rhythm{
    width: 100%;
    height: 100%;
    position: relative;
    .titImg{
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        width: 100px;
        height: 38px;
        background: url("./imgs/tit.png") no-repeat;
        background-size: 100% 100%;
    }
    .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;
            &:first-child{
                width: 74px;
                height: 74px;
                background-size: 74px 74px;
                background-color: #35A8FF;
                border-radius: 20px;
                outline: 3px solid #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{
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        .rhythmBox{
            position: initial;
            transform: initial;
            margin-top: 68px;
            flex-wrap: wrap;
            .rhythmImg{
                margin-bottom: 20px;
                width: 40px;
                height: 40px;
                border-radius: 10px;
                background-size: 36px 36px;
                &:nth-child(4){
                    margin-right: 0;
                }
                &:nth-child(7){
                    margin-right: 0;
                }
                &:first-child{
                    margin-left: 20px;
                    margin-right: 20px;
                    width: 110px;
                    height: 110px;
                    background-size: 110px 110px;
                    border-radius: 28px;
                    outline: 4px solid #FFFFFF;
                }
            }
        }
    }
}