@import "../../var/style.less"; // 导入变量和混合定义

.timeline {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .px-to-vw(width, 1500);
    .px-to-vh(height, 236);
    .px-to-vw(padding-top, 32);
    .px-to-vw(padding-left, 20);
    .px-to-vw(padding-bottom, 48);
    .px-to-vw(padding-right, 20);
    background: url('../TimeLine/images/xunjiancardBg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .timelineItem {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        align-items: center;
        .px-to-vw(width, 122);
        .px-to-vh(height, 156);
        // border: 1px solid red;
        overflow-x: scroll;

        .status {
            font-weight: 500;
            .font-size-to-vw(24);
            .px-to-vh(height, 24);
            .px-to-vh(line-height, 24);
            color: #FFFFFF;
            .px-to-vh(margin-bottom, 20);
        }

        .center {
            .px-to-vw(width, 32);
            .px-to-vh(height, 32);
            background: linear-gradient(180deg, #66CCFF 0%, #B3E6FF 100%);
            .px-to-vw(border-radius, 8);
            .px-to-vh(margin-bottom, 28);

        }

        .date {
            font-weight: 400;
            .font-size-to-vw(20);
            .px-to-vh(height, 20);
            .px-to-vh(line-height, 20);
            color: #CCE6FF;
            white-space: nowrap;
            .px-to-vh(margin-bottom, 12);
            transform: scale(0.9);
        }

        .name {
            font-weight: 400;
            .font-size-to-vw(20);
            .px-to-vh(height, 20);
            .px-to-vh(line-height, 20);
            color: #CCE6FF;
        }

        &::before {
            position: absolute;
            left:0;
            .px-to-vh(top,55);
            content: '';
            display: inline-block;
            .px-to-vw(width,37);
            .px-to-vh(height,10);
            background: #66CCFF;
        }
        &::after {
            position: absolute;
            right:0;
            .px-to-vh(top,55);
            content: '';
            display: inline-block;
            .px-to-vw(width,37);
            .px-to-vh(height,10);
            background: #66CCFF;
        }

        &.midOff {
            &::after {
                background: #233A59;
            }
        }

        &.off {
            .status {
                color: #6B8299;
            }
            .center {
                background: #233A59;
            }
            .date {
                color: #6B8299;
            }
            .name {
                color: #6B8299;
            }

            &::before {
                background: #233A59;
            }
            &::after {
                background: #233A59;
            }
        }
    }
}