index.wxss 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
  1. @charset "UTF-8";
  2. /* 水平间距 */
  3. /* 水平间距 */
  4. .search-page.data-v-482e85b8 {
  5. min-height: 100vh;
  6. background: #f8f8f8;
  7. }
  8. /* 自定义导航栏 */
  9. .custom-navbar.data-v-482e85b8 {
  10. background: #FF6600;
  11. position: -webkit-sticky;
  12. position: sticky;
  13. top: 0;
  14. z-index: 999;
  15. }
  16. .custom-navbar .navbar-content.data-v-482e85b8 {
  17. display: flex;
  18. align-items: center;
  19. padding: 20rpx;
  20. gap: 20rpx;
  21. }
  22. .custom-navbar .navbar-content .back-button.data-v-482e85b8 {
  23. width: 60rpx;
  24. height: 60rpx;
  25. display: flex;
  26. align-items: center;
  27. justify-content: center;
  28. }
  29. .custom-navbar .navbar-content .back-button .back-icon.data-v-482e85b8 {
  30. font-size: 36rpx;
  31. color: #ffffff;
  32. font-weight: bold;
  33. }
  34. .custom-navbar .navbar-content .search-input-container.data-v-482e85b8 {
  35. flex: 1;
  36. position: relative;
  37. background: #ffffff;
  38. border-radius: 50rpx;
  39. display: flex;
  40. align-items: center;
  41. padding: 0 30rpx;
  42. height: 80rpx;
  43. }
  44. .custom-navbar .navbar-content .search-input-container .search-icon.data-v-482e85b8 {
  45. margin-right: 15rpx;
  46. }
  47. .custom-navbar .navbar-content .search-input-container .search-icon .icon.data-v-482e85b8 {
  48. font-size: 28rpx;
  49. color: #999;
  50. }
  51. .custom-navbar .navbar-content .search-input-container .search-input.data-v-482e85b8 {
  52. flex: 1;
  53. height: 80rpx;
  54. font-size: 28rpx;
  55. color: #333;
  56. background: transparent;
  57. }
  58. .custom-navbar .navbar-content .search-button.data-v-482e85b8 {
  59. padding: 0 30rpx;
  60. height: 80rpx;
  61. display: flex;
  62. align-items: center;
  63. justify-content: center;
  64. }
  65. .custom-navbar .navbar-content .search-button .search-text.data-v-482e85b8 {
  66. font-size: 28rpx;
  67. color: #ffffff;
  68. font-weight: bold;
  69. }
  70. /* 搜索历史 */
  71. .search-history.data-v-482e85b8 {
  72. background: #ffffff;
  73. margin: 20rpx 0 0 0;
  74. padding: 30rpx 40rpx;
  75. }
  76. .search-history .history-header.data-v-482e85b8 {
  77. display: flex;
  78. justify-content: space-between;
  79. align-items: center;
  80. margin-bottom: 30rpx;
  81. }
  82. .search-history .history-header .history-title.data-v-482e85b8 {
  83. font-size: 32rpx;
  84. color: #333;
  85. }
  86. .search-history .history-header .clear-history .clear-icon.data-v-482e85b8 {
  87. font-size: 32rpx;
  88. color: #ccc;
  89. }
  90. .search-history .history-tags.data-v-482e85b8 {
  91. display: flex;
  92. flex-wrap: wrap;
  93. gap: 20rpx;
  94. }
  95. .search-history .history-tags .history-tag.data-v-482e85b8 {
  96. background: #f5f5f5;
  97. border-radius: 30rpx;
  98. padding: 15rpx 30rpx;
  99. }
  100. .search-history .history-tags .history-tag .tag-text.data-v-482e85b8 {
  101. font-size: 28rpx;
  102. color: #666;
  103. }
  104. .search-history .history-tags .history-tag.data-v-482e85b8:active {
  105. background: #e0e0e0;
  106. }
  107. /* 热门搜索 */
  108. .hot-search.data-v-482e85b8 {
  109. background: #ffffff;
  110. margin: 20rpx 0 0 0;
  111. padding: 30rpx 40rpx;
  112. }
  113. .hot-search .hot-header.data-v-482e85b8 {
  114. margin-bottom: 30rpx;
  115. }
  116. .hot-search .hot-header .hot-title.data-v-482e85b8 {
  117. font-size: 32rpx;
  118. color: #333;
  119. }
  120. .hot-search .hot-list .hot-item.data-v-482e85b8 {
  121. display: flex;
  122. align-items: center;
  123. padding: 25rpx 0;
  124. border-bottom: 1rpx solid #f5f5f5;
  125. }
  126. .hot-search .hot-list .hot-item .hot-rank.data-v-482e85b8 {
  127. width: 50rpx;
  128. height: 50rpx;
  129. border-radius: 50%;
  130. display: flex;
  131. align-items: center;
  132. justify-content: center;
  133. margin-right: 30rpx;
  134. }
  135. .hot-search .hot-list .hot-item .hot-rank .rank-number.data-v-482e85b8 {
  136. font-size: 26rpx;
  137. font-weight: bold;
  138. }
  139. .hot-search .hot-list .hot-item .hot-rank.rank-first.data-v-482e85b8 {
  140. background: #FF6B6B;
  141. }
  142. .hot-search .hot-list .hot-item .hot-rank.rank-first .rank-number.data-v-482e85b8 {
  143. color: #ffffff;
  144. }
  145. .hot-search .hot-list .hot-item .hot-rank.rank-second.data-v-482e85b8 {
  146. background: #FFA500;
  147. }
  148. .hot-search .hot-list .hot-item .hot-rank.rank-second .rank-number.data-v-482e85b8 {
  149. color: #ffffff;
  150. }
  151. .hot-search .hot-list .hot-item .hot-rank.rank-third.data-v-482e85b8 {
  152. background: #FFD700;
  153. }
  154. .hot-search .hot-list .hot-item .hot-rank.rank-third .rank-number.data-v-482e85b8 {
  155. color: #ffffff;
  156. }
  157. .hot-search .hot-list .hot-item .hot-rank.rank-normal.data-v-482e85b8 {
  158. background: #f5f5f5;
  159. }
  160. .hot-search .hot-list .hot-item .hot-rank.rank-normal .rank-number.data-v-482e85b8 {
  161. color: #999;
  162. }
  163. .hot-search .hot-list .hot-item .hot-text.data-v-482e85b8 {
  164. font-size: 28rpx;
  165. color: #333;
  166. flex: 1;
  167. }
  168. .hot-search .hot-list .hot-item.data-v-482e85b8:last-child {
  169. border-bottom: none;
  170. }
  171. .hot-search .hot-list .hot-item.data-v-482e85b8:active {
  172. background: #f9f9f9;
  173. }
  174. /* 搜索建议 */
  175. .search-suggestions.data-v-482e85b8 {
  176. background: #ffffff;
  177. margin: 0 20rpx;
  178. border-radius: 20rpx;
  179. overflow: hidden;
  180. }
  181. .search-suggestions .suggestion-item.data-v-482e85b8 {
  182. display: flex;
  183. align-items: center;
  184. padding: 25rpx 30rpx;
  185. border-bottom: 1rpx solid #f0f0f0;
  186. }
  187. .search-suggestions .suggestion-item .suggestion-icon.data-v-482e85b8 {
  188. font-size: 24rpx;
  189. color: #999;
  190. margin-right: 20rpx;
  191. }
  192. .search-suggestions .suggestion-item .suggestion-text.data-v-482e85b8 {
  193. font-size: 28rpx;
  194. color: #333;
  195. flex: 1;
  196. }
  197. .search-suggestions .suggestion-item.data-v-482e85b8:last-child {
  198. border-bottom: none;
  199. }
  200. .search-suggestions .suggestion-item.data-v-482e85b8:active {
  201. background: #f5f5f5;
  202. }
  203. /* 搜索结果 */
  204. .search-results.data-v-482e85b8 {
  205. margin: 20rpx;
  206. }
  207. .search-results .result-stats.data-v-482e85b8 {
  208. background: #ffffff;
  209. border-radius: 20rpx;
  210. padding: 25rpx 30rpx;
  211. margin-bottom: 20rpx;
  212. }
  213. .search-results .result-stats .stats-text.data-v-482e85b8 {
  214. font-size: 28rpx;
  215. color: #666;
  216. }
  217. .search-results .result-stats .stats-text .stats-count.data-v-482e85b8 {
  218. color: #FF6600;
  219. font-weight: bold;
  220. }
  221. .search-results .filter-bar.data-v-482e85b8 {
  222. background: #ffffff;
  223. border-radius: 20rpx;
  224. padding: 20rpx 30rpx;
  225. margin-bottom: 20rpx;
  226. display: flex;
  227. gap: 30rpx;
  228. }
  229. .search-results .filter-bar .filter-item.data-v-482e85b8 {
  230. display: flex;
  231. align-items: center;
  232. gap: 8rpx;
  233. }
  234. .search-results .filter-bar .filter-item .filter-text.data-v-482e85b8 {
  235. font-size: 28rpx;
  236. color: #666;
  237. }
  238. .search-results .filter-bar .filter-item .sort-arrow.data-v-482e85b8 {
  239. font-size: 24rpx;
  240. color: #666;
  241. }
  242. .search-results .filter-bar .filter-item.active .filter-text.data-v-482e85b8,
  243. .search-results .filter-bar .filter-item.active .sort-arrow.data-v-482e85b8 {
  244. color: #FF6600;
  245. font-weight: bold;
  246. }
  247. .search-results .product-list .product-item.data-v-482e85b8 {
  248. background: #ffffff;
  249. border-radius: 20rpx;
  250. margin-bottom: 20rpx;
  251. padding: 20rpx;
  252. display: flex;
  253. gap: 20rpx;
  254. }
  255. .search-results .product-list .product-item .product-image.data-v-482e85b8 {
  256. width: 160rpx;
  257. height: 160rpx;
  258. border-radius: 12rpx;
  259. background: #f5f5f5;
  260. }
  261. .search-results .product-list .product-item .product-info.data-v-482e85b8 {
  262. flex: 1;
  263. display: flex;
  264. flex-direction: column;
  265. justify-content: space-between;
  266. }
  267. .search-results .product-list .product-item .product-info .product-name.data-v-482e85b8 {
  268. font-size: 30rpx;
  269. font-weight: bold;
  270. color: #333;
  271. line-height: 1.4;
  272. margin-bottom: 10rpx;
  273. }
  274. .search-results .product-list .product-item .product-info .product-meta.data-v-482e85b8 {
  275. display: flex;
  276. gap: 20rpx;
  277. margin-bottom: 10rpx;
  278. }
  279. .search-results .product-list .product-item .product-info .product-meta .product-category.data-v-482e85b8 {
  280. font-size: 24rpx;
  281. color: #FF6600;
  282. background: rgba(255, 102, 0, 0.1);
  283. padding: 4rpx 12rpx;
  284. border-radius: 12rpx;
  285. }
  286. .search-results .product-list .product-item .product-info .product-meta .product-sales.data-v-482e85b8 {
  287. font-size: 24rpx;
  288. color: #999;
  289. }
  290. .search-results .product-list .product-item .product-info .product-stock .stock-text.data-v-482e85b8 {
  291. font-size: 24rpx;
  292. color: #666;
  293. }
  294. .search-results .product-list .product-item .product-info .product-stock .stock-text.low-stock.data-v-482e85b8 {
  295. color: #ff4757;
  296. }
  297. .search-results .product-list .product-item.data-v-482e85b8:active {
  298. background: #f5f5f5;
  299. }
  300. /* 无搜索结果 */
  301. .no-results.data-v-482e85b8 {
  302. background: #ffffff;
  303. border-radius: 20rpx;
  304. padding: 80rpx 30rpx;
  305. text-align: center;
  306. }
  307. .no-results .no-results-icon.data-v-482e85b8 {
  308. font-size: 80rpx;
  309. margin-bottom: 20rpx;
  310. }
  311. .no-results .no-results-text.data-v-482e85b8 {
  312. font-size: 32rpx;
  313. color: #333;
  314. display: block;
  315. margin-bottom: 10rpx;
  316. }
  317. .no-results .no-results-tip.data-v-482e85b8 {
  318. font-size: 26rpx;
  319. color: #999;
  320. }
  321. /* 加载状态 */
  322. .loading-container.data-v-482e85b8 {
  323. display: flex;
  324. flex-direction: column;
  325. align-items: center;
  326. justify-content: center;
  327. padding: 60rpx;
  328. }
  329. .loading-container .loading-spinner.data-v-482e85b8 {
  330. width: 60rpx;
  331. height: 60rpx;
  332. border: 4rpx solid #f3f3f3;
  333. border-top: 4rpx solid #FF6600;
  334. border-radius: 50%;
  335. -webkit-animation: loading-spin-data-v-482e85b8 1s linear infinite;
  336. animation: loading-spin-data-v-482e85b8 1s linear infinite;
  337. margin-bottom: 20rpx;
  338. }
  339. .loading-container .loading-text.data-v-482e85b8 {
  340. font-size: 28rpx;
  341. color: #666;
  342. }
  343. @-webkit-keyframes loading-spin-data-v-482e85b8 {
  344. 0% {
  345. -webkit-transform: rotate(0deg);
  346. transform: rotate(0deg);
  347. }
  348. 100% {
  349. -webkit-transform: rotate(360deg);
  350. transform: rotate(360deg);
  351. }
  352. }
  353. @keyframes loading-spin-data-v-482e85b8 {
  354. 0% {
  355. -webkit-transform: rotate(0deg);
  356. transform: rotate(0deg);
  357. }
  358. 100% {
  359. -webkit-transform: rotate(360deg);
  360. transform: rotate(360deg);
  361. }
  362. }