index.scss

.share-ranking {
  width: 100%;
  height: 60px;
  padding: 0 12px;
  border-top: 8px solid $bg_f5f5f5;
  display: flex;
  font-size: 12px;

  .share-container {
    width: 100%;

    .share-list {
      flex: 1 1 auto;
    }

    .share-money {
      flex: 1 1 auto;
    }
  }

  .title {
    font-size: 14px;
    margin-right: 4px;
    display: inline-block;
    width: 60px;
  }

  .ranking-box {
    display: flex;
    justify-content: space-between;
  }

  .ranking-mess {
    display: inline-block;
    img {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      vertical-align: middle;
    }

    i {
      margin-left: 5px;
      color: $color_333;
      font-style: normal;
    }
  }

  .ranking-ellipsis {
    width: 22px;
    height: 22px;
    border-radius: 50%;
  }

  .share {
    border: 1px solid $red;
    border-radius: 3px;
    color: $red;
    background-color: $bg_fff;
    height: 22px;
    line-height: 20px;
    text-align: center;
  }

  .shareMbc {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 9;

    .content {
      width: 300px;
      height: 403px;
      background-color: $white;
      border-radius: 3px;
      // margin: 139px auto 20px auto;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .title-box {
        width: 100%;
        height: 57px;
        padding: 15px 0 10px 0;
        text-align: center;

        .lable {
          display: block;
          color: $color_333;
          font-size: 16px;
          height: 16px;
          line-height: 16px;
        }

        .tips {
          color: $color_666;
          font-size: 12px;
          height: 12px;
          line-height: 12px;
        }
      }

      ul {
        width: 100%;
        height: 302px;
        background-color: $bg_f5f5f5;
        padding: 0 25px 0 20px;
        overflow: auto;

        li {
          height: 60px;
          line-height: 60px;
          border-bottom: 1px solid $sp_e7eaf1;

          img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            float: left;
            margin-top: 8px;
          }

          .course-title {
            display: inline-block;
            color: $color_333;
            font-size: 16px;
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-left: 10px;
          }

          .course-price {
            color: $color_FF0000;
            font-size: 16px;
            float: right;
          }
        }
      }

      .shareBtn {
        width: 100%;
        height: 44px;
        text-align: center;

        button {
          border: none;
          padding: 0 10px;
          height: 24px;
          margin-top: 10px;
          background: linear-gradient(90deg, $bg_FF0000 0%, $bg_FF4000 100%);
          border-radius: 12px;
          font-size: 14px;
          color: $white;
        }
      }
    }

    .close {
      color: #fff;
      font-size: 22px;
      position: relative;
      left: 50%;
      margin-left: -11px;
      top: 16px;
    }
  }
}