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

.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: 0.39rem;
  /* 增大30%: .3rem * 1.3 = .39rem */
  font-weight: bold;
  margin: 0.3rem 0;
}
.supplier-container {
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  padding: 0.2rem 0.22rem;
  gap: 0.15rem;
  /* 使用gap控制间距 */
}
.supplier {
  flex-shrink: 0;
  /* 防止收缩 */
}
.supplier .supplier-title {
  font-size: 0.28rem;
  /* 修改为下方代码的字体大小 */
  color: #000;
  padding: 0.12rem 0.2rem;
  background-color: #f5f5f5;
  border-radius: 0.12rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* 防止文字换行 */
}
.supplier .supplier-title:hover {
  background-color: #e0e0e0;
  transform: translateY(-0.02rem);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.supplier .supplier-title.active {
  background: linear-gradient(90deg, #275aff, #2ebdfa);
  color: #fff;
  box-shadow: 0 0.04rem 0.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 0.3rem;
}
.box .box-item {
  position: relative;
  display: flex;
  width: 48%;
  flex-direction: column;
  align-items: self-start;
  border: 0.02rem solid #f0f0f0;
  border-radius: 0.2rem;
  padding: 0.15rem 0.2rem;
  margin: 0.34rem 0;
  transition: all 0.3s ease;
  padding-bottom: 0.6rem;
}
.box .box-item:hover {
  transform: translateY(-0.05rem);
  box-shadow: 0 0.08rem 0.2rem rgba(0, 0, 0, 0.1);
  border-color: #1f70ff;
}
.box .box-item .item-tit {
  font-size: 0.26rem;
  /* 修改为下方代码的字体大小 */
  color: #000;
  font-weight: bold;
  margin-bottom: 0.1rem;
}
.box .box-item .item-detail {
  color: #666;
  font-size: 0.22rem;
  /* 修改为下方代码的字体大小 */
  margin: 0.15rem 0;
  line-height: 1.4;
  min-height: 0.4rem;
}
.box .box-item .item-desc {
  color: #666;
  background-color: #f8f9fa;
  font-size: 0.2rem;
  /* 修改为下方代码的字体大小 */
  padding: 0.08rem 0.12rem;
  border-radius: 0.1rem;
  margin-bottom: 0.15rem;
  border: 0.01rem solid #e9ecef;
  min-height: 0.32rem;
  display: flex;
  align-items: center;
}
.box .box-item .item-btn {
  width: 100%;
  display: flex;
  padding-top: 0.2rem;
}
.box .box-item .item-btn .btn {
  background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
  border-radius: 0.04rem;
  padding: 0.08rem 0;
  width: calc(100% - 0.4rem);
  text-align: center;
  color: #fff;
  font-size: 0.182rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  position: absolute;
  bottom: 0.2rem;
}
.box .box-item .item-btn .btn:hover {
  background: linear-gradient(90deg, #0d5aff, #2a7aff);
  transform: translateY(-0.02rem);
  box-shadow: 0 0.04rem 0.1rem rgba(31, 112, 255, 0.3);
}
.search {
  width: 100%;
  margin: 0.3rem 0;
  padding: 0 0.3rem;
}
.search .search-box {
  display: flex;
  justify-content: space-between;
  background-color: #f8f9fa;
  border-radius: 0.3rem;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 0.02rem solid #e9ecef;
  box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.04);
}
.search .search-box:focus-within {
  transform: translateY(-0.01rem);
}
.search .search-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18%;
  color: #fff;
  padding: 0.18rem 0;
  background: linear-gradient(90deg, #1f70ff, #3a8cff);
  border-bottom-right-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  font-size: 0.28rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.search .search-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  transition: left 0.5s ease;
}
.search .search-btn:hover {
  background: linear-gradient(90deg, #0d5aff, #2a7aff);
  width: 20%;
}
.search .search-btn:hover::after {
  left: 100%;
}
.search .search-btn:active {
  background: linear-gradient(90deg, #0a50e6, #2575e6);
  transform: scale(0.98);
}
.search .input {
  flex: 1;
  padding: 0.16rem 0;
  padding-left: 0.25rem;
  display: flex;
  align-items: center;
}
.search .input input {
  border: none;
  outline: none;
  background: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 0.26rem;
  color: #333;
  line-height: 1.4;
}
.search .input input::placeholder {
  color: #adb5bd;
  font-size: 0.24rem;
  transition: color 0.3s ease;
}
.search .input input:focus::placeholder {
  color: #868e96;
}
/* 为供应商容器和产品列表添加搜索状态样式 */
.supplier-container {
  transition: opacity 0.3s ease;
}
.box {
  transition: transform 0.3s ease;
}
/* 当有搜索关键词时，调整一些元素的样式 */
:global body.search-active .supplier-container {
  opacity: 0.8;
}
:global body.search-active .box {
  animation: searchResultAppear 0.4s ease;
}
@keyframes searchResultAppear {
  0% {
    opacity: 0;
    transform: translateY(0.1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 响应式调整 */
@media (max-width: 480px) {
  .search {
    padding: 0 0.2rem;
    margin: 0.25rem 0;
  }
  .search .search-box {
    border-radius: 0.25rem;
  }
  .search .search-btn {
    font-size: 0.26rem;
    padding: 0.16rem 0;
  }
  .search .input {
    padding: 0.14rem 0;
    padding-left: 0.2rem;
  }
  .search .input input {
    font-size: 0.24rem;
  }
}