wechatShopUni/pages/search/result.wxss

/* pages/search/result.wxss */
.container {
  min-height: 100vh;
  background: #ffffff;
}

/* 搜索头部 */
.search-header {
  padding: 24rpx 32rpx;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1rpx solid #f5f5f5;
}

.search-box {
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 36rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}

.search-text {
  flex: 1;
  font-size: 28rpx;
  color: #262626;
  margin-left: 16rpx;
}

/* 排序栏 */
.sort-bar {
  display: flex;
  background: #ffffff;
  padding: 0 32rpx;
  height: 88rpx;
  position: fixed;
  top: 120rpx;
  left: 0;
  right: 0;
  z-index: 90;
  border-bottom: 1rpx solid #f5f5f5;
}

.sort-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666666;
  position: relative;
}

.sort-item.active {
  color: #ff4d4f;
  font-weight: 500;
}

.sort-icon {
  display: flex;
  flex-direction: column;
  margin-left: 8rpx;
  height: 24rpx;
}

.sort-icon .iconfont {
  font-size: 20rpx;
  color: #bfbfbf;
  line-height: 1;
}

.sort-icon .iconfont.active {
  color: #ff4d4f;
}

/* 商品列表 */
.goods-list {
  position: fixed;
  top: 208rpx;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f5f5f5;
  padding: 24rpx 32rpx;
}

.goods-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8rpx;
}

.goods-item {
  width: calc(50% - 16rpx);
  margin: 8rpx;
  background: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.goods-item:active {
  transform: scale(0.98);
}

.goods-img {
  width: 100%;
  height: 280rpx;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.goods-img image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.goods-info {
  padding: 16rpx 20rpx 20rpx;
}

.goods-name {
  font-size: 26rpx;
  color: #262626;
  line-height: 1.4;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-group {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 24rpx;
  color: #ff4d4f;
  margin-right: 2rpx;
}

.price {
  font-size: 32rpx;
  color: #ff4d4f;
  font-weight: 500;
  font-family: "DIN Alternate", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
}

.commission-group {
  display: flex;
  align-items: center;
  background: rgba(255, 77, 79, 0.1);
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
}

.commission-group .iconfont {
  font-size: 24rpx;
  color: #ff4d4f;
  margin-right: 4rpx;
}

.commission {
  font-size: 24rpx;
  color: #ff4d4f;
}

/* 加载状态 */
.loading-status {
  text-align: center;
  padding: 32rpx 0;
}

.loading,
.no-more {
  font-size: 24rpx;
  color: #999999;
}

/* 空状态 */
.empty-state {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-state text {
  font-size: 28rpx;
  color: #999999;
  margin-top: 32rpx;
}

/* 图标字体 */
@font-face {
  font-family: "iconfont";
  src: url("data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAO0AAsAAAAACFwAAANlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqDaIM0ATYCJAMUCwwABCAFhGcHWBtmBxHVm8PIfhzGMck6c2bkTSjPG/H0/7+1d+59M6+IZhLNHE00iySxULxEgpBIEI1EIlb6hOTN/D83vU/KgGxhcaACyQpkBbJCuEhW4qrkGtzeUmB5KzwbKEDPXNMr0gE7kBj+26XvApW6BqXlAg/vhD/87Yb/e9sEKg+0QXLNNrQG2hvgaAIFNMbWRS6QBHnD2AUt4n4CrSY1oNvF1T2QV2BOBeKBvA7kTcgVRlihqbRQbVmY+AKVZvoU3QN8Dn4f/1YjT1KVmXM3HxYykP+V+lUhrf/v0k4E+ng2sJvImAcU4qw0fUQRwnlIrRet2QFNTYlfqacKWnH/f0i4NhzNf3iEJDIjFmbPQUchfqXOSiF+dXEhGcLvG5oB/N5YyqAZ3UhwDZKn6Eyh2HZWqVTJtPJ3EleKnW/TvEw3p3hYnKlq5s2FKzfHtUVrh+4PH6Y/eJD24EHqw4fpAJSrd+/WPH2aWz82dvv1G4DU+/ezHz3KefQo9eHD9Pv3M+7fT5uamPTwEaQ/fPQp9f79tHv3M+7ez2AMsG/vhb1XL3p2XfLsvIjsv7C3bwGid+e5PYvP71t0ds/8M7sXnt+98OyeBUAOj0JMnD8MkHn1MgRmXpjXs+js3oVn9iw6t2fRub2LQGEkFp7eu/D0ngVn9iw8u2fhmT0LT+9aSHYDxM8/AXD8e7P/R+/X/5v/F+CQA1656rcvb716+XL2R+ev/27+zwRg9QGu/wHPGQDQPn0p5F+qXQIo/ZKrX6nRAMDvUz+J+qWa/wHd8r/1u4u/Nr59qTHA+E2vbFwZ1UhRaSNRVGvBLyQRgkjUak3zxQS0qsUD3D7I/zqamUvlBk1HkdRoQ9bUg6xY86jCnEelVivUmrNxecsegxAKlWAWbwChw3VI2n2HrMMDsqJ9RqXPX1TqiAatjsLwji1HwWC6ZEwYR7uAvgz0Zc1lhXWFHyhlWoR0P0nlCRoWh8kumNvxIGAsYYpwDudpjEXwPBwOUwRWcI5WselBzKhBPGzWECHGxdAVAxPMIYYRDId2AtTLAH2y0MVqaOsKPyBJSQuhdYVCkZ6gAhYbSdwKuCOdHgiQLYnSWuU4HBfDWAh8vHBwUAoBlsBy0GRhJR+IGaEQPJhVgyAEYTwZpFcY1Vt5vH6L9oQboJX5kihR0ciiETWadtNjzc7QZGRpNgAA")
    format("woff2");
}