GeneB-miniprogram/src/patient/pages/course/index.scss

.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .pgae-header {
    flex-shrink: 0;
    padding: 0 40rpx 38rpx;
    background: linear-gradient(180deg, #fee1e0 0%, #ffffff 100%);
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.07);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    .title {
      font-size: 40rpx;
      color: rgba(1, 1, 5, 1);
      font-weight: bold;
    }
    .content {
      margin-top: 6rpx;
      font-size: 32rpx;
      color: rgba(1, 1, 5, 1);
    }
  }
  .page-container {
    flex: 1;
    .swiper {
      height: 100%;
      .swiper-item {
        .scroll-view {
          height: 100%;
          .scroll-view-container {
            height: 100%;
            padding: 88rpx 40rpx 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            .row {
              flex-shrink: 0;
              display: flex;
              gap: 24rpx;
              .aside {
                flex-shrink: 0;
                width: 64rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                .num {
                  width: 64rpx;
                  height: 64rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 38rpx;
                  color: rgba(255, 255, 255, 1);
                  background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%);
                  box-shadow: 0rpx 13rpx 26rpx 0rpx rgba(151, 151, 151, 0.05);
                  border-radius: 50%;
                }
                .radio {
                  width: 48rpx;
                  height: 48rpx;
                }
                .slow-line {
                  height: 32rpx;
                  width: 4rpx;
                  background-color: rgba(246, 74, 58, 1);
                }
                .line {
                  flex: 1;
                  width: 4rpx;
                  background-color: rgba(246, 74, 58, 1);
                }
              }
              .container {
                padding-bottom: 84rpx;
                .c-header {
                  .title {
                    font-size: 44rpx;
                    color: rgba(246, 74, 58, 1);
                    line-height: 64rpx;
                    font-weight: bold;
                  }
                  .content {
                    margin-top: 20rpx;
                    font-size: 28rpx;
                    color: rgba(161, 164, 172, 1);
                    line-height: 40rpx;
                  }
                }
                .c-body {
                  padding: 18rpx 42rpx;
                  min-height: 104rpx;
                  box-sizing: border-box;
                  background: #ffffff;
                  border-radius: 96rpx 96rpx 96rpx 96rpx;
                  border: 4rpx solid #f64a3a;
                  display: flex;
                  align-items: center;
                  gap: 32rpx;
                  .wrap {
                    .content {
                      font-size: 32rpx;
                      color: rgba(1, 1, 5, 1);
                      font-weight: bold;
                    }
                    .hostipl-name {
                      margin-top: 4rpx;
                      padding-left: 28rpx;
                      font-size: 28rpx;
                      color: rgba(161, 164, 172, 1);
                      line-height: 40rpx;
                    }
                  }
                  .icon {
                    width: 40rpx;
                    height: 40rpx;
                  }
                  .status-icon {
                    position: relative;
                    width: 80rpx;
                    height: 40rpx;
                    .s-icon {
                      position: absolute;
                      top: 50%;
                      left: 0;
                      transform: translateY(-50%);
                      width: 100rpx;
                      height: 100rpx;
                    }
                  }
                }
                .c-footer {
                  margin-top: 16rpx;
                  padding-left: 44rpx;
                  .content {
                    font-size: 28rpx;
                    color: rgba(161, 164, 172, 1);
                  }
                  .bind-doctor {
                    font-size: 28rpx;
                    color: rgba(246, 74, 58, 1);
                    line-height: 40rpx;
                    margin-bottom: -40rpx;
                  }
                }
              }
            }
            .row:first-of-type {
              .container {
                padding-bottom: 48rpx;
              }
            }
            .grow-row {
              flex: 1;
              display: flex;
              gap: 24rpx;
              .aside {
                flex-shrink: 0;
                width: 64rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                .line {
                  flex: 1;
                  width: 4rpx;
                  background-color: rgba(246, 74, 58, 1);
                }
              }
            }
          }
        }
      }
    }
  }
}