提交

liuwh

2024-09-07 d7ca134342a0a2004d9c15fab49fd0a41557e29c

 gz-wxparty/components/steps/index.wxss

@@ -1,51 +1,82 @@
/* components/steps/index.wxss */
.steps {
   display: flex;
   align-items: center;
   background-color: #ffffff;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}

.steps-item {
   position: relative;
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(23, 26, 29, 0.40);
}

.steps-item-active,
.steps-item-active .steps-item-icon {
   color: var(--main-color);
  color: var(--main-color);
}

.steps-item-active .steps-item-round {
   background-color: var(--red-1);
   color: var(--main-color);
  background-color: var(--main-color);
  color: var(--white);
}

.steps-item-line {}

.steps-item-hoverLine {
  width: 168rpx;
  border: 1px solid var(--main-color);
}

.steps-item-line {
  width: 168rpx;
  border: 1px solid #E5E6EB;
}

.steps-item-active .steps-item-number1 {
  background-color: var(--main-color);
  color: var(--white);
}

.steps-item-round {
   position: relative;
   width: 60rpx;
   height: 60rpx;
   border-radius: 50%;
   color: #646566;
   margin-bottom: 8rpx;
   background-color: #f2f2f2;
  position: relative;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  color: #86909C;
  margin-bottom: 8rpx;
  background-color: #F2F3F5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps-item-round1 {
  position: relative;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  color: #86909C;
  margin-bottom: 8rpx;
  background-color: #e8f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps-item-text {
   font-size: 24rpx;
   line-height: 40rpx;
  font-size: 24rpx;
  line-height: 40rpx;
}

.steps-item-icon {
   position: absolute;
   z-index: 999;
   top: 50%;
   margin-top: -16rpx;
   right: -16rpx;
   color: #cccccc;
}
  position: absolute;
  z-index: 889;
  top: 50%;
  margin-top: -24rpx;
  right: -88rpx;
  color: #cccccc;
}