kboss/f/web-kboss/src/views/H5/less/cloud/cloud.less

.top-tit {
  display: flex;
  justify-content: center;
  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: .39rem;
  /* 增大30%: .3rem * 1.3 = .39rem */
  font-weight: bold;
  margin: .3rem 0;
}

.supplier-container {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  padding: .2rem .22rem;
  gap: .15rem;
  /* 使用gap控制间距 */
}

.supplier {
  flex-shrink: 0;
  /* 防止收缩 */

  .supplier-title {
    font-size: .28rem;
    /* 修改为下方代码的字体大小 */
    color: #000;
    padding: .12rem .2rem;
    background-color: #f5f5f5;
    border-radius: 0.12rem;
    cursor: pointer;
    transition: all 0.3s ease;

    white-space: nowrap;
    /* 防止文字换行 */

    &:hover {
      background-color: #e0e0e0;
      transform: translateY(-0.02rem);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    &.active {
      background: linear-gradient(90deg, #275aff, #2ebdfa);
      color: #fff;
      box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
      transform: translateY(-0.02rem);
    }
  }
}

.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 .3rem;

  .box-item {
    display: flex;
    width: 48%;
    flex-direction: column;
    align-items: self-start;
    border: .02rem solid #f0f0f0;
    border-radius: .2rem;
    padding: .15rem .2rem;
    margin: .34rem 0;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-0.05rem);
      box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
      border-color: #1f70ff;
    }

    .item-tit {
      font-size: .26rem;
      /* 修改为下方代码的字体大小 */
      color: #000;
      font-weight: bold;
      margin-bottom: .1rem;
    }

    .item-detail {
      color: #666;
      font-size: .22rem;
      /* 修改为下方代码的字体大小 */
      margin: .15rem 0;
      line-height: 1.4;
      min-height: .4rem;
      // 确保有最小高度
    }

    .item-desc {
      color: #666;
      background-color: #f8f9fa;
      font-size: .2rem;
      /* 修改为下方代码的字体大小 */
      padding: .08rem .12rem;
      border-radius: .1rem;
      margin-bottom: .15rem;
      border: .01rem solid #e9ecef;
      min-height: .32rem;
      // 确保有最小高度
      display: flex;
      align-items: center;
    }

    .item-btn {
      width: 100%;
      display: flex;
      justify-content: flex-end;

      .btn {
        background: linear-gradient(90deg, #1f70ff, #3a8cff);
        color: #fff;
        padding: .08rem .2rem;
        border-radius: .15rem;
        font-size: 0.24rem;
        /* 修改为下方代码的字体大小 */
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;

        &:hover {
          background: linear-gradient(90deg, #0d5aff, #2a7aff);
          transform: translateY(-0.02rem);
          box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
        }
      }
    }
  }
}
.search {
  width: 100%;
  margin: .2rem 0;
  padding: .2rem;

  .search-box {
    display: flex;
    justify-content: space-between;
    background-color: #f3f3f3;
    border-radius: .24rem;
  }

  .search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .2rem;
    width: 18%;
    color: #fff;
    padding: .2rem 0;
    background: linear-gradient(90deg, #1f70ff, #3a8cff);
    border-bottom-right-radius: .24rem;
    border-top-right-radius: .24rem;
    font-size: .24rem;
  }

  .input {
    width: 80%;
    padding: .2rem 0;
    padding-left: .2rem;
    input {
      border: none;
      /* 去除边框 */
      outline: none;
      /* 去除焦点时的外框 */
      background: none;
      /* 去除背景色 */
      padding: 0;
      /* 去除内边距 */
      margin: 0;
      /* 去除外边距，根据需要设置 */
      width: 100%;
    }
  }
}