shuichacha/shuichacha-for-TJ/components/dashboard/dashboard.wxss

/* components/dashboard/dashboard.wxss */
.dashboard {
  width: 100%;
  height: 480rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FAFCFF;
}

.dashboard .content {
  width: 240rpx;
  height: 100%;
  margin-right: 60rpx;
}

.dashboard .content .count {
  width: 192rpx;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: rgba(255, 255, 255, 1);
  border-radius: 12rpx;
  padding: 0 24rpx;
  overflow: hidden;
}

.dashboard .content .count .number {
  font-size: 66rpx;
  font-weight: bold;
  color: rgba(66, 70, 86, 0.7);
  line-height: 96rpx;
}

.dashboard .content .count .number text {
  font-size: 40rpx;
  font-weight: bold;
  color: rgba(66, 70, 86, 0.7);
  line-height: 48rpx;
  letter-spacing: 10rpx;
  margin-top: 6rpx;
}

.dashboard .content .count .txt {
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(66, 70, 86, 0.7);
  line-height: 32rpx;
  text-align: center;
}

.dashboard .content .item {
  width: 240rpx;
  height: 60rpx;
  border-radius: 12rpx;
  margin-top: 20rpx;
  display: flex;
  align-items: center;
}

.dashboard .content .item .icon {
  width: 20rpx;
  height: 20rpx;
  border-radius: 100%;
  margin: 0 20rpx 0 24rpx;
}

.dashboard .content .item .name {
  font-size: 22rpx;
  font-weight: 400;
  color: rgba(66, 70, 86, 1);
}



.dashboard .ruler {
  width: 130rpx;
  height: 100%;
  margin-left: 40rpx;
}

.dashboard .ruler .item {
  position: relative;
}

.dashboard .ruler .item .area {
  height: 100%;
  display: flex;
  align-items: center;
}

.dashboard .ruler .item .area .bg {
  height: 70%;
  width: 40rpx;
  border-radius: 4rpx;
}

.dashboard .ruler .item .area .scale {
  width: 24rpx;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin-left: 16rpx;
}

.dashboard .ruler .item .area .scale .line {
  display: inline-block;
  width: 24rpx;
  height: 2rpx;
  background: rgba(221, 223, 225, 1);
}

.dashboard .ruler .long-scale {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.dashboard .ruler .long-scale .line {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-block;
  width: 80rpx;
  height: 2rpx;
  background: rgba(221, 223, 225, 1);
}

.dashboard .ruler .long-scale .number {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: -17rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(104, 107, 120, 1);
  line-height: 34rpx;
  background-color: rgba(250, 252, 255, 1);
  padding-left: 10rpx;
}

.dashboard .ruler .long-scale.top {
  top: 0;
  bottom: unset;
}

.wave-wrap {
  width: 180rpx;
  height: 100%;
  border-radius: 90rpx;
  box-shadow: 10rpx 20rpx 20rpx 0rpx rgba(236, 238, 245, 1), -10rpx -20rpx 20rpx 0rpx rgba(255, 255, 255, 1), 8rpx 4rpx 30rpx 0rpx rgba(247, 249, 252, 1);
  overflow: hidden;
  position: relative;
  background: rgba(250,252,255,1);
}

.wave-wrap .wave-inner {
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
  background-color: rgb(118, 218, 255);
  background: linear-gradient(360deg, #59B7FF 0%, #0091FF 80%, #59B7FF 100%);
}

.wave-wrap .wave-inner .bubble {
  width: 100%;
  height: 100rpx;
  position: absolute;
  top: -5rpx;
  left: 0;
  animation-name: translate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 4s;
}

.wave-wrap .before,
.wave-wrap .after {
  position: absolute;
  left: 50%;
  width: 540rpx;
  height: 576rpx;
  border-radius: 45%;
  background-color: rgba(250,252,255,1);
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.wave-wrap .before {
  bottom: 95%;
  animation-duration: 10s;
}

.wave-wrap .after {
  bottom: 92%;
  opacity: .5;
  border-radius: 48%;
  animation-duration: 10s;
}


@keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotateZ(0deg);
  }

  25% {
    transform: translate(-50%, -0.5%) rotateZ(90deg);
  }

  50% {
    transform: translate(-50%, 0%) rotateZ(180deg);
  }

  75% {
    transform: translate(-50%, -0.5%) rotateZ(270deg);
  }

  100% {
    transform: translate(-50%, 0%) rotateZ(360deg);
  }
}

@keyframes translate {
  0% {
    top: -5rpx;
    opacity: 0;
  }

  25% {
    top: -25rpx;
    opacity: 0.7;
  }

  50% {
    top: -50rpx;
    opacity: 0.5;
  }

  75% {
    top: -80rpx;
    opacity: 0;
  }

  100% {
    top: -5rpx;
    opacity: 0;
  }

}