igg4-miniprogram/src/pages/doctorDetail/index.scss

page {
  background: #f6f6f6;
  padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
}
.page {
  min-height: 100vh;
  .container {
    margin: 40rpx 30rpx 0;
    padding: 32rpx;
    background: #fff linear-gradient(to top, #ffffff 0%, #e8f0f1 100%) no-repeat top center/100% 200rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 2rpx solid #ffffff;
    .c-header {
      display: flex;
      gap: 24rpx;
      .avatar {
        flex-shrink: 0;
        width: 168rpx;
        height: 168rpx;
        .avatar-user {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .wrap {
        .name {
          font-size: 40rpx;
          color: rgba(40, 48, 49, 1);
          font-weight: bold;
          line-height: 1;
          display: flex;
          align-items: baseline;
          gap: 20rpx;
          .label {
            font-weight: normal;
            font-size: 36rpx;
            color: rgba(34, 34, 34, 0.7);
          }
        }
        .content {
          margin-top: 20rpx;
          font-size: 36rpx;
          color: rgba(34, 34, 34, 0.7);
          line-height: 44rpx;
          .tag {
            margin-top: 12rpx;
            display: inline-block;
            flex-shrink: 0;
            padding: 6rpx 12rpx;
            font-size: 28rpx;
            color: #fff;
            line-height: 1;
            background: linear-gradient(90deg, #ffd650 0%, #f8a61a 100%);
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }
        }
      }
    }
  }
  .row {
    padding: 32rpx;
    margin: 40rpx 30rpx 0;
    background-color: #fff;
    border-radius: 24rpx;
    .title {
      font-size: 40rpx;
      color: #000;
      display: flex;
      align-items: center;
      gap: 12rpx;
      &::before {
        content: '';
        width: 8rpx;
        height: 40rpx;
        background: linear-gradient(94deg, #0eb66d 0%, #00d277 100%);
        border-radius: 50rpx 50rpx 50rpx 50rpx;
      }
    }
    .r-content {
      margin-top: 24rpx;
      font-size: 36rpx;
      color: rgba(34, 34, 34, 0.7);
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx 28rpx;
      .tag {
        width: 200rpx;
        height: 52rpx;
        background: #e3fff3;
        border-radius: 8rpx;
        display: flex;
        .week {
          flex: 1;
          font-size: 32rpx;
          line-height: 52rpx;
          color: #ffffff;
          background: linear-gradient(94deg, #0eb66d 0%, #00d277 100%);
          text-align: center;
          border-radius: 8rpx 0 8rpx 8rpx;
        }
        .value {
          flex: 1;
          font-size: 32rpx;
          color: #0eb66d;
          text-align: center;
          line-height: 52rpx;
        }
      }
      .week-name {
        flex: 1;
        padding: 20rpx 24rpx;
        background-color: #e3fff3;
        border-radius: 16rpx;
        font-size: 24rpx;
        color: rgba(157, 160, 168, 1);
        line-height: 40rpx;
        .label {
          margin-right: 12rpx;
          display: inline-block;
          font-size: 20rpx;
          color: rgba(255, 255, 255, 1);
          line-height: 32rpx;
          padding: 0 8rpx;
          background: linear-gradient(94deg, #0eb66d 0%, #00d277 100%);
          border-radius: 8rpx 8rpx 8rpx 8rpx;
        }
      }
    }
  }
}

#drug-page {
  .container {
    background: #fff;
  }
  .row {
    .title::before {
      background: rgba(89, 86, 233, 1);
    }
    .tag {
      background: #f5f4ff;
      .week {
        background: linear-gradient(270deg, #5956e9 0%, #b384f4 100%);
      }
      .value {
        color: rgba(109, 106, 236, 1);
      }
    }
  }
  .row {
    .label {
      background: linear-gradient(270deg, #5956e9 0%, #b384f4 100%);
    }
    .week-name {
      background-color: rgba(245, 244, 255, 1);
    }
  }
}