/**index.wxss**/
@import "/style/theme.less";
@import "/style/form.less";

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url(https://sela.oss-cn-shanghai.aliyuncs.com/assets/bg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.scrollarea {
  flex: 1;
  overflow-y: hidden;

  .banner {
    padding: 0 30rpx;
    text-align: center;
  }

  .agency {
    margin-top: 40rpx;

    .pill {
      flex: 0 0 25%;
      text-align: center;

      &-img {
        width: 128rpx;
        height: 128rpx;
        margin: 0 auto;
      }

      &-txt {
        margin-top: 12rpx;
      }
    }
  }

  .member {
    margin-top: 40rpx;

    .pill {
      flex: 0 0 50%;
      text-align: center;

      &-img {
        width: 100%;
        height: 160rpx;
        margin: 0 auto;
      }
    }
  }

  .notice {
    .t-cell {
      padding: 16rpx 32rpx;
      border-radius: 24rpx;
      font-size: 12rpx;
    }

    .notice-cell {
      border-radius: 24rpx;

      .desc {
        text-align: left;
        padding-left: 16rpx;
        position: relative;

        &:before {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          content: '';
          width: 1rpx;
          height: 60%;
          background-color: #D8D8D8;
        }
      }
    }

    .avatar {
      .notice-img {
        width: 60rpx;
        height: 64rpx;
      }
    }
  }

  .activity {
    width: 100%;
    height: 48rpx;
    margin-top: 48rpx;
    margin-bottom: 40rpx;

    .tab-item {
      flex: 1;
      white-space: nowrap;
      color: #22222260;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 48rpx;
      position: relative;

      &.text-title {
        color: #222222;
        position: relative;

        &:before {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          content: '';
          width: 1rpx;
          height: 60%;
          background-color: #D8D8D8;
        }
      }

      &.active {
        color: #222021;
        font-weight: 600;
        font-size: 32rpx;

        &:after {
          content: '';
          position: absolute;
          bottom: -8rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 48rpx;
          height: 6rpx;
          border-radius: 2px;
          background-color: @mainColor;
        }
      }

      .notice-img {
        margin-left: 8rpx;
        display: inline-block;
        width: 12rpx;
        height: 20rpx;
      }
    }
  }

  .list {
    margin-top: 16rpx;

    &-item {
      padding: 24rpx 0;

      &-inner {
        height: 200rpx;
        border-radius: 24rpx;
        background-color: #FFFFFF;
        box-shadow: 0rpx 1rpx 8rpx -1rpx rgba(55, 139, 152, 0.2);
        position: relative;
        padding: 20rpx;
        padding-left: 240rpx;

        .src {
          position: absolute;
          left: 20rpx;
          bottom: 20rpx;
          width: 200rpx;
          height: 200rpx;
          border-radius: 5rpx;
          overflow: hidden;
          background-color: yellow;

          &-badge {
            width: 100rpx;
            height: 44rpx;
            border-radius: 6rpx 0px 11rpx 0rpx;
            background-color: rgba(57, 197, 123, 0.8);
            backdrop-filter: blur(20rpx);
            position: absolute;
            top: 0;
            left: 0;
            color: white;
            font-weight: 400;
            line-height: 44rpx;
            font-size: 22rpx;
          }

          &-img {
            width: 100%;
            height: 100%;
          }
        }

        .list-item-right {
          position: relative;
          flex: 1;

          .title {
            text-align: left;
            width: 100%;
          }

          .btn {
            position: absolute;
            right: 0rpx;
            bottom: 0rpx;
            width: 140rpx;
            height: 60rpx;
            border-radius: 12rpx;
            color: white;
            line-height: 60rpx;
          }
        }
      }
    }
  }
}