@import 'press-ui/common/style/smoba/mixin.scss';

.press__task {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 .4rem;

  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-award-bg.jpg) no-repeat;
    background-size: cover;
  }
}

.press-hor-match-header {
  position: relative;
}

.press__header-right {
  display: flex;
  align-items: center;
  position: relative;

  .press__header-btn {
    position: relative;
    display: flex;
    align-items: center;
    height: .42rem;
    padding: 0 .16rem 0 .16rem;
    color: #82a0cc;
    font-size: .2rem;
    border: .02rem solid #2a3f65;
  }

  .press__header-rule {
    width: .24rem;
    height: .24rem;
    margin-right: .04rem;
    background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/icon-rule.png) no-repeat;
    background-size: 100%;
  }
}

.press__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  height: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 80%, transparent 98%);
}

.press__award-list {
  width: 7.18rem;
  flex: 1;
  margin-top: .14rem;
  overflow-y: auto;
  overflow-x: hidden;

  .press__task-list {
    width: 100%;
  }

  .press__match-list {
    margin-top: .12rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: .52rem;

    .press__match-item {
      width: 3.48rem;
      margin-right: .22rem;
      margin-bottom: .2rem;

      &:nth-child(2n) {
        margin-right: 0;
      }
    }

    .press__match-awards {
      width: 2.98rem;
      overflow-x: auto;
    }
  }
}

.press__award-title {
  width: 3.52rem;
  height: .51rem;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/task-award-title.png) no-repeat;
  background-size: 100%;
}

.press__match-title {
  margin: 0 auto;
  width: 6.87rem;
  height: .18rem;
  background: url(https://image-1251917893.file.myqcloud.com/Esports/hor/home/recommend-match-title.png) no-repeat;
  background-size: 100%;
}