wechatShopUni/pages/search/index.wxss

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

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

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

.search-input {
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  margin: 0 16rpx;
}

.cancel-btn {
  font-size: 28rpx;
  color: #666666;
  padding: 16rpx 0;
}

/* 搜索内容区域 */
.search-content {
  margin-top: 120rpx;
  padding: 0 32rpx;
  height: calc(100vh - 120rpx);
}

/* 搜索区块通用样式 */
.search-section {
  margin-bottom: 48rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #262626;
}

.clear-history {
  font-size: 24rpx;
  color: #999999;
  display: flex;
  align-items: center;
}

.clear-history .iconfont {
  font-size: 28rpx;
  margin-right: 8rpx;
}

/* 热门搜索 */
.hot-search {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8rpx;
}

.hot-item {
  margin: 8rpx;
  padding: 12rpx 24rpx;
  background: #f5f5f5;
  border-radius: 28rpx;
  font-size: 26rpx;
  color: #666666;
}

.hot-item.hot {
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

/* 搜索历史 */
.history-list {
  display: flex;
  flex-direction: column;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #333333;
  border-bottom: 1rpx solid #f5f5f5;
}

.history-item .iconfont {
  font-size: 32rpx;
  color: #999999;
  margin-right: 16rpx;
}

.history-text {
  flex: 1;
}

/* 搜索建议 */
.search-suggestions {
  background: #ffffff;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #333333;
  border-bottom: 1rpx solid #f5f5f5;
}

.suggestion-item .iconfont {
  font-size: 32rpx;
  color: #999999;
  margin-right: 16rpx;
}

/* 图标字体 */
@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");
}