.dotLine-index {
    display: block;
    height: initial;
}
/* components/dotLine/index.wxss */

/* 提示信息 */

.dotLine-index .tip {
    display: flex;
    justify-content: center;
    margin-bottom: 50rpx;
}

.dotLine-index .dot-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100rpx;
}

.dotLine-index .dot-area > text {
    position: absolute;
    top: 70rpx;
    color: #f0f0f0;
    font-size: 24rpx;
}

.dotLine-index .dot {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dotLine-index .dot::after {
    position: absolute;
    content: "";
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
}

.dotLine-index .dot-start {
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

.dotLine-index .dot-start::after {
    background-color: #f0f0f0;
    transition: all 0.3s ease;
}

.dotLine-index .dot-end {
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.dotLine-index .dot-end::after {
    background-color: #69a5ff;
    transition: all 0.3s ease;
}

.dotLine-index .dot-line-area {
    height: 50rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.dotLine-index .dot-line {
    /* width: 140rpx; */
    height: 8rpx;
    border-radius: 8rpx;
    background-color: #f0f0f0;
    z-index: 999;
}

.dotLine-index .dot-line-behind {
    position: absolute;
    height: 8rpx;
    border-radius: 8rpx;
    background-color: #69a5ff;
}

.dotLine-index .text-light {
    color: #69a5ff !important;
    transition: all 0.3s ease;
}

.dotLine-index .text-white {
    color: #f0f0f0 !important;
    transition: all 0.3s ease;
}