GeneB-miniprogram/src/components/popup/index.scss

.popup1 {
  padding: 84rpx 60rpx;
  background: linear-gradient(6deg, #ffffff 0%, #ffe6e4 100%);
  .logo {
    display: block;
    margin: 0 auto;
    width: 164rpx;
    height: 164rpx;
  }
  .title {
    margin-top: 32rpx;
    font-size: 48rpx;
    color: #f23a2f;
    font-weight: bold;
    text-align: center;
  }
  .content {
    margin-top: 30rpx;
    font-size: 32rpx;
    color: #010105;
    line-height: 52rpx;
  }
  .check {
    margin-top: 64rpx;
    font-size: 32rpx;
    color: rgba(1, 1, 5, 0.3);
    display: flex;
    .checkbox {
      transform: scale(0.8);
    }
    .c-content {
      padding-top: 5rpx;
      line-height: 48rpx;
    }
  }
  .link {
    color: #f23a2f;
  }
  .btn1 {
    margin-top: 40rpx;
    height: 88rpx;
    border-radius: 84rpx;
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    line-height: 88rpx;
    background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
  }
  .btn2 {
    margin-top: 20rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 32rpx;
    color: rgba(1, 1, 5, 0.4);
  }
}

.popup2 {
  padding: 36rpx 34rpx 58rpx;
  background-color: #fff;
  .photo {
    width: 492rpx;
    height: 492rpx;
  }
  .content {
    font-size: 40rpx;
    color: rgba(0, 0, 0, 1);
    text-align: center;
  }
}

.popup3 {
  .icon {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    display: block;
    width: 144rpx;
    height: 144rpx;
  }
  .container {
    margin-top: -94rpx;
    padding: 124rpx 32rpx 32rpx;
    width: 604rpx;
    background: linear-gradient(7deg, #ffffff 19%, #ffe8e4 100%);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    box-sizing: border-box;
    .title {
      display: block;
      margin: 0 auto;
      width: 146rpx;
      height: 40rpx;
    }
    .card {
      position: relative;
      margin-top: 32rpx;
      padding: 32rpx;
      background: #ffffff;
      display: flex;
      gap: 16rpx;
      justify-content: space-between;
      box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.05);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      &::after {
        position: absolute;
        bottom: -24rpx;
        left: 32rpx;
        content: '';
        width: 476rpx;
        height: 24rpx;
        background: #ffebea;
        border-radius: 0 0 24rpx 24rpx;
      }
      .avatar {
        flex-shrink: 0;
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
      }
      .wrap {
        flex: 1;
        .name {
          font-size: 32rpx;
          color: rgba(1, 1, 5, 1);
          font-weight: bold;
        }
        .hostipal {
          margin-top: 16rpx;
          line-height: 28rpx;
          .content {
            margin-right: 8rpx;
            display: inline-block;
            font-size: 28rpx;
            color: rgba(161, 164, 172, 1);
          }
          .tag {
            display: inline-block;
            font-size: 20rpx;
            color: rgba(255, 255, 255, 1);
            padding: 0 8rpx;
            background-color: rgba(255, 186, 1, 1);
            border-radius: 6rpx;
          }
        }
      }
    }
    .btn {
      margin-top: 66rpx;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 32rpx;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
      border-radius: 84rpx 84rpx 84rpx 84rpx;
    }
  }
}

.popup4 {
  .icon {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    display: block;
    width: 144rpx;
    height: 144rpx;
  }
  .container {
    margin-top: -94rpx;
    padding: 124rpx 32rpx 32rpx;
    width: 604rpx;
    background: linear-gradient(7deg, #ffffff 19%, #ffe8e4 100%);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    box-sizing: border-box;
    .title {
      display: block;
      margin: 0 auto;
      width: 146rpx;
      height: 40rpx;
    }
    .content {
      margin-top: 16rpx;
      font-size: 32rpx;
      color: rgba(161, 164, 172, 1);
      text-align: center;
    }
    .btn {
      margin-top: 32rpx;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 32rpx;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
      border-radius: 84rpx 84rpx 84rpx 84rpx;
    }
  }
}

.popup5 {
  .container {
    padding: 36rpx 32rpx 32rpx;
    width: 604rpx;
    background: linear-gradient(4deg, #f7f7fa 19%, #ffe8e4 100%);
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    box-sizing: border-box;
    .title {
      display: block;
      margin: 0 auto;
      width: 242rpx;
      height: 38rpx;
    }
    .row {
      margin-top: 32rpx;
      padding: 26rpx 32rpx;
      display: flex;
      gap: 22rpx;
      align-items: center;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      &:last-of-type {
        margin-top: 24rpx;
      }
      .avatar {
        flex-shrink: 0;
        width: 96rpx;
        height: 103rpx;
      }
      .wrap {
        flex: 1;
        line-height: 44rpx;
        .name {
          font-size: 32rpx;
          color: rgba(1, 1, 5, 1);
          font-weight: bold;
        }
        .content {
          font-size: 32rpx;
          color: rgba(161, 164, 172, 1);
        }
      }
      .icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}

.close {
  margin: 32rpx auto 0;
  display: block;
  width: 64rpx;
  height: 64rpx;
}