.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .header {
    flex: 1;
    // display: flex;
    // justify-content: center;
    // align-items: center;

    .circleContent {
      position: relative;
      z-index: 30;
      left: 100px;
      top: 50px;
      background-image: url(./tempBg.png);
      border: none;

      .circle {
        position: absolute;
        z-index: 10;
        left: 0;
        top: 0;
        border-radius: 50%;
        border: 10px solid #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 20px;
        -webkit-user-select: none;
      }

      .circleBar {
        position: absolute;
        z-index: 50;
        border-radius: 50%;
        background-color: transparent;
        border: 4rpx solid rgba(255, 255, 255, 1);
        cursor: pointer;
        box-shadow: 0 5rpx 12rpx rgba(0, 0, 0, 0.6);
      }
    }
  }

  .panel {
    .configList {
      margin-bottom: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .cutBar {
        color: red;
        font-size: 24rpx;
      }

      .addStyle {
        color: white;
        font-size: 24rpx;
      }

      .icoImg {
        width: 30rpx;
        height: 30rpx;
      }

      .slider {
        width: 500rpx;
      }

      .SliderValue {
        color: #fff;
        font-size: 16rpx;
        width: 20rpx;
      }

      .colorCircle {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1rpx solid #fff;
      }

      .colorCircle:nth-child(n + 1) {
        margin-left: 15rpx;
      }

      .cutBar {
        color: red;
      }

      .addBar {
        color: #fff;
      }
    }
  }

  .circleContent {
    width: 200rpx;
    height: 200rpx;
    border: 1rpx solid #000;
  }

  .circleBar {
    width: 200rpx;
    height: 200rpx;
  }
}

.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400rpx;
  height: 200rpx;
  color: white;
  border-radius: 20rpx;
  background-color: #1f1f1f;
}