// home页面内容区域 适用于home commodity tag 页面
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;

  .spanStyle {
    font-size: 20px;
    color: rgba(0, 0, 0, 1);
    line-height: 1;
    cursor: pointer;
    transition: all .3s;
  }

  .main {
    display: flex;
    flex-direction: column;

    &.article {
      // max-width: 787px;
      // flex: 0 0 787px;
    }

    &.commodity {
      // max-width: 890px;
      // flex: 0 0 890px;
      // .commodity-card-content {
      //   display: flex;
      //   flex-wrap: wrap;
      // }
    }
  }

  .tags {
    &.article {
      // max-width: 374px;
      // flex: 0 0 374px;
    }

    &.commodity {
      // max-width: 270px;
      // flex: 0 0 270px;
    }

    &-container {
      margin-top: 20px;
      background: #fff;
      border-radius: @br10;
      padding: 10px;
    }

    span {
      .spanStyle();
      font-weight: bold;
    }
  }

  .main-nav {
    // margin: 0 0 20px;
    // span {
    //   .spanStyle();
    //   font-weight:400;
    //   margin-right: 30px;
    //   &.active {
    //   font-weight: bold;
    //   }
    //   em {
    //     font-size: 20px;
    //     font-style: normal;
    //     color: @purpleDark;
    //   }
    // }

    .filter {
      float: right;
      margin-right: 0px;

      &-button {
        padding: 0;
        color: #606266;
      }

      &-header {
        display: flex;
        align-items: center;
      }

      &-icon {
        width: 22px;
        height: 22px;
        margin-right: 4px;
      }
    }
  }

  .recommend-author {
    padding-bottom: 20px;

    .ra-head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .change {
        width: 20px;
        height: 20px;
        //background: @purpleDark;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 6px;

        &-icon {
          width: 72%;
        }
      }

      .ra-head-title {
        .spanStyle();
        font-weight: bold;
      }

      .ra-head-random {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: bold;
        color: @purpleDark;
        ;
        cursor: pointer;
      }
    }

    .ra-content {
      background: rgba(255, 255, 255, 1);
      border-radius: @br10;
      padding: 10px 20px;
      margin-top: 34px;
    }
  }
}

.load-more-button {
  display: flex;
  justify-content: center;
  min-height: 300px;
}

.fan-entrance {
  width: 60px;
  height: 71px;
}
