@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';

$contentWidth:690px;

.page {
  padding-bottom: $pageBottom;

  .bgc {
    background: #3680EB;
  }

  .bg {
    position: absolute;
    width: 750px;
    height: 1162px;
  }

  .main {
    font-size: 28px;
    color: #333333;

    .top-space {
      height: 20px;
    }

    .content {
      position: relative;

      // 导航
      .nav {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin: 0 auto;
        width: $contentWidth;

        &-item {
          width: 50%;

          .tit {
            text-align: center;
            font-size: 32px;
            color: rgba($color: #FFFFFF, $alpha: 0.5);
          }

          .line {
            margin: 12px auto 0;
            width: 0px;
            height: 6px;
            border-radius: 4px;
            background: #FFFFFF;
            transition: width 0.2s ease;
          }
        }

        &-item-act {
          .tit {
            color: rgba($color: #FFFFFF, $alpha: 1);
          }

          .line {
            width: 60px;
          }
        }
      }

      // 排行榜
      .rank {
        margin: 20px auto 0;
        min-height: 1000px;

        // 功能区
        &-func {
          position: relative;
          display: flex;
          justify-content: space-between;

          &-item {
            width: 50%;

            // 本轮排行
            .pubish {
              display: flex;
              align-items: center;
              flex-wrap: wrap;

              .func {
                @extend .fcc;
                height: 80px;
                font-size: 32px;
                color: #3680EB;
                background: #F5F8FE;
                border-radius: 8px;
                @extend .bb;
                padding: 0 12px;

                .icon {
                  width: 32px;
                  height: 32px;
                  margin: 0 8px;
                }

                .arrow {
                  width: 12px;
                  height: 8px;
                  margin: 0 8px;
                }
              }

              .t1 {
                color: #666666;
                font-size: 24px;
                padding: 5px 0;
              }

              .t2 {}

              .c1 {
                color: #FF7900;
              }

              .c2 {
                color: #3680EB;
              }

            }

            .mode {
              width: 220px;
              height: 56px;
              background: #F5F8FE;
              border-radius: 28px;
              font-size: 26px;
              color: #3F85EB;
              @extend .bb;
              padding: 10px 32px;
            }
          }
        }

        // 标题
        .tit {
          width: 630px;
          height: 40px;
          font-size: 20px;
          color: #3680EB;
          background: rgba($color: #3680EB, $alpha: 0.05);
          border-radius: 20px;
          margin: 26px auto 0;
          display: flex;

          .tt {
            height: 40px;
            line-height: 40px;
          }

          .t1 {
            margin-left: 18px;
          }

          .t2 {
            margin-left: 150px;
          }

          .t3 {
            margin-left: 238px;
          }
        }

        // 排行item
        .item-wrap {
          margin: 16px auto 0;
          height: 630px;
        }

        // 省略号
        .etc {
          text-align: center;
          height: 82px;
          line-height: 82px;
          font-size: 32px;
          color: #333333;
        }

        .my-rank {
          background: #F5F8FE;

          .rank-item {
            height: 112px;
            // border-bottom: none;
          }
        }

        // 排行item
        .rank-item {
          display: flex;
          // justify-content: space-between;
          border-bottom: solid 1px #dddddd;
          $itemHeight: 104px;
          height: $itemHeight;

          .no {
            width: 72px;
            padding-right: 54px;
            @extend .fcc;
            // text-align: center;
            // height: $itemHeight;
            // line-height: $itemHeight;

            .medal {
              width: 52px;
              height: 68px;
            }
          }

          .user {
            display: flex;
            align-items: center;
            font-size: 28px;
            width: 360px;
            // background-color: wheat;
            @include no-wrap();
            overflow-x: hidden;

            .avatar {
              width: 72px;
              height: 72px;
              margin-right: 12px;
              border-radius: 36px;
            }
          }

          .integral {
            color: #666666;
            width: 124px;
            display: flex;
            align-items: center;
            // @extend .fcc;
            // height: $itemHeight;
            // line-height: $itemHeight;
          }
        }

        .rank-item-first {
          .integral {
            color: #FF7900;
          }
        }

      }

      // 按钮容器
      .btn-wrap {
        position: relative;
        margin: 36px auto 0;

        .btn {
          position: relative;
          width: 220px;
          height: 64px;
          line-height: 64px;
          border-radius: 42px;
          background: #FFFFFF;
          margin: 0 auto;
          color: #3680EB;
          text-align: right;
          padding-right: 32px;
          @extend .bb;

          .integral {
            position: absolute;
            left: -52px;
            top: -20px;
            width: 148px;
            height: 108px;
          }
        }
      }
    }
  }
}