sunshine-meet-wx/miniprogram/pages/resource/index.scss

.resource-dropdown-item {
  .van-cell {
    position: auto !important;
    padding: 0 !important;
  }

  .van-dropdown-item__option {
    width: 32% !important;
    display: inline-block !important;
    border: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;

    &:nth-child(3n+1) {
      margin: 0 0 10px 2% !important;
    }

    &:nth-child(3n+2) {
      margin: 0 0 10px 0 !important;
    }

    &:nth-child(3n+3) {
      margin: 0 2% 10px 0 !important;
    }

    .van-dropdown-item__title {
      border: 1px solid #eee;
      height: 38px;
      line-height: 36px;
      box-sizing: border-box;
      border-radius: 22px;
    }

    .van-cell__value,
    .van-dropdown-item__icon {
      display: none;
      width: 0;
      height: 0;
      opacity: 0;
    }
  }
}

.container {
  width: 100%;
  background-color: #F2f2f2;

  .resource-list {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px 100px 10px;

    .resource-item {
      background: #fff;
      margin: 0 0 10px 0;
      border-radius: 10px;
      overflow: hidden;
      height: 140px;

      &::after,
      &::before {
        content: "";
        display: block;
        clear: both;
      }

      .resource-item-left {
        float: left;
        width: 150px;

        .goods-img {
          // display: inline-block;
          height: 100px;
          margin: 20px 10px;
          width: 130px;
        }
      }

      .resource-item-right {
        float: left;
        width: calc(100% - 150px);

        .resource-item-right-title {
          padding: 0 10px 0 0;
          line-height: 35px;
          margin: 14px 0 0 0;
          font-size: 18px;
          font-weight: bold;
        }

        .resource-item-right-area {
          line-height: 30px;
          font-size: 13px;

          .dian {
            padding: 0 5px;
          }
        }

        .resource-item-right-count {
          width: 100%;
          padding: 0 10px 0 0;

          &::after,
          &::before {
            content: "";
            display: block;
            clear: both;
          }

          .resource-item-right-count-item {
            float: left;
            width: 50%;
            font-size: 13px;
            line-height: 22px;
          }
        }

      }

    }

  }
}

page {
  height: 101vh;
}

.resource-search {
  &.van-search {
    box-sizing: border-box !important;
    padding: 10px 12px !important;
  }

  &.van-search--withaction {
    padding-right: 12px !important;
  }

  .van-icon-play {
    transform: rotate(90deg);
  }

  .left-icon-view {
    color: var(--search-label-color, #323233);
    font-size: var(--search-label-font-size, 14px);
    line-height: var(--search-input-height, 34px);
    padding: var(--search-label-padding, 0 5px);
    height: 24px;
    line-height: 24px;
    text-align: center;
  }

  input {
    padding: 0 0 0 10px;
  }
}