building_tx_mini_wx_rebuild/components/dotLine/index.wxss

/* components/dotLine/index.wxss */
/* 提示信息 */
.tip {
  display: flex;
  justify-content: center;
  margin-bottom: 50rpx;
}
.dot-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100rpx;
}
.dot-area>text {
  position: absolute;
  top: 70rpx;
  color: #F0F0F0;
  font-size: 24rpx;
}
.dot {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dot::after {
  position: absolute;
  content: '';
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
}
.dot-start {
  border: 1px solid #F0F0F0;
  transition: all 0.3s ease ;
}
.dot-start::after {
  background-color: #F0F0F0;
  transition: all 0.3s ease ;
}
.dot-end {
  border: 1px solid transparent;
  transition: all 0.3s ease ;
}
.dot-end::after {
  background-color: #69A5FF;
  transition: all 0.3s ease ;
}
.dot-line-area {
  height: 70rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.dot-line {
  /* width: 140rpx; */
  height: 8rpx;
  border-radius: 8rpx;
  background-color: #F0F0F0;
  z-index: 999;
}
.dot-line-behind {
  position: absolute;
  height: 8rpx;
  border-radius: 8rpx;
  background-color: #69A5FF;
}
.text-light {
  color: #69A5FF !important;
  transition: all 0.3s ease ;
}
.text-white {
  color: #F0F0F0 !important;
  transition: all 0.3s ease ;
}