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

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f9fafb;
  .tab-container {
    position: fixed;
    top: 0;
    // height: 137rpx;
    width: 100%;
    z-index: 99; /* 确保 z-index 不会遮挡关闭按钮 */
    transition: all 0.3s ease-in-out; /* 加入动画效果 */
  }
  .tab {
    background-color: white;
    padding: 24rpx 0;
    &-item {
      text-align: center;
      color: #666666;
      font-weight: 400;
      font-size: 24rpx;
      position: relative;
      &:not(:first-child) {
        margin-left: 16rpx;
      }
      &.active {
        color: #101010;
        font-weight: 700;
        font-size: 32rpx;
        &::after {
          content: "";
          width: 100rpx;
          height: 14rpx;
          background-image: url(https://cdn-cs.oss-cn-shanghai.aliyuncs.com/wx/underline.png);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          position: absolute;
          bottom: -16rpx;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .list {
    margin-top: 260rpx;
    &-header {
      margin: 20rpx 30rpx;
      height: 80rpx;
      background-color: white;
      border-radius: 10rpx;
      &-item {
        padding: 0 30rpx;
        line-height: 80rpx;
        &::after {
          content: '';
          background-image: url(https://cdn-cs.oss-cn-shanghai.aliyuncs.com/wx/triangle.png);
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          width: 16rpx;
          height: 8rpx;
          display: inline-block;
          margin-left: 16rpx;
          vertical-align: middle;
        }
        &.active {
          &::after {
            content: "";
            background-image: url(https://cdn-cs.oss-cn-shanghai.aliyuncs.com/wx/triangle_up.png);
          }
        }
      }
    }
    &-body {
      padding: 0 30rpx;
    }
    .empty {
      padding: 30rpx 0;
      .t-image {
        width: 256rpx;
      }
    }
  }
  .fab-btn > .t-button--primary {
    background-color: @mainColor;
    border-radius: 50%;
  }
}

.filter {
  position: relative;
  padding: 30rpx;
  &-close {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
  }
  &-title {
    color: #333333;
    font-weight: 400;
    font-size: 32rpx;
    text-align: center;
    margin-bottom: 45rpx;
  }
  &-keyword {
    height: 70rpx;
    margin-bottom: 10rpx;
    border: @border;
    border-radius: 10rpx;
    background-color: #f9fafb;
    .t-input {
      height: 70rpx;
      line-height: 70rpx;
      border: none;
    }
  }
  .section {
    margin: 20rpx 0;
    color: #666666;
    font-weight: 400;
    font-size: 24rpx;
  }
  &-tab {
    &-item {
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      height: 60rpx;
      padding: 0 20rpx;
      line-height: 60rpx;
      border-radius: 10rpx;
      background-color: #f9fafb;
      color: #9ca3af;
      font-weight: 400;
      font-size: 24rpx;
      &.active {
        color: white;
        background-color: @mainColor;
      }
    }
  }
  .btn {
    .btn-reset,
    .btn-submit {
      flex: 1;
      border-radius: 40rpx;
    }
    .btn-submit {
      background-color: @mainColor;
      margin-left: 16rpx;
    }
    .btn-reset {
      border: 1rpx solid @mainColor;
      margin-right: 16rpx;
      color: @mainColor;
    }
  }
}