searchcategory.wxss 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768
  1. /* pages/pinduoduo/category.wxss */
  2. #index-content-v2 {
  3. padding: 0 0 98rpx;
  4. background-color: #f2f2f2;
  5. min-height: 100%;
  6. }
  7. .nav-bar-container {
  8. max-width: 640px;
  9. position: fixed;
  10. height: 82rpx;
  11. top: 0;
  12. width: 100%;
  13. z-index: 10001;
  14. background: #fff;
  15. overflow: hidden;
  16. }
  17. .nav-bar-container .nav-bar-edge {
  18. position: absolute;
  19. display: block;
  20. top: 0;
  21. left: 0;
  22. z-index: 10008;
  23. width: 100%;
  24. background-color: #fff;
  25. height: 82rpx;
  26. border-bottom: 1px solid #e5e5e5;
  27. }
  28. .nav-bar-container .nav-bar-content {
  29. position: relative;
  30. height: 102rpx;
  31. font-size: 28rpx;
  32. color: #333;
  33. text-align: center;
  34. top: 0;
  35. white-space: nowrap;
  36. overflow-x: auto;
  37. overflow-y: hidden;
  38. padding: 0 32rpx;
  39. z-index: 10010;
  40. -webkit-overflow-scrolling: touch;
  41. }
  42. .nav-bar-container .nav-bar-item {
  43. height: 82rpx;
  44. display: inline-block;
  45. margin-left: 40rpx;
  46. line-height: 82rpx;
  47. text-align: center;
  48. }
  49. .nav-bar-container .nav-bar-item:first-child {
  50. margin-left: 0;
  51. }
  52. .span{
  53. display:inline;
  54. }
  55. .nav-bar-container .nbi-selected {
  56. border-bottom: 2px solid #e02e24;
  57. color: #e02e24;
  58. height: 82rpx;
  59. display: inline-block;
  60. position: relative;
  61. }
  62. .nav-bar-container:after {
  63. content: "";
  64. position: absolute;
  65. right: 0;
  66. top: 0;
  67. width: 32rpx;
  68. height: 880rpx;
  69. background-image: -webkit-linear-gradient(right,#fff,hsla(0,0%,100%,.4));
  70. background-image: linear-gradient(270deg,#fff 0,hsla(0,0%,100%,.4));
  71. z-index: 10011;
  72. }
  73. #index-main-content {
  74. }
  75. .hide{
  76. display:none;
  77. }
  78. .category-board-module-v2-s0, .category-board-module-v2-s1, .category-board-module-v2-s2 {
  79. width: 100%;
  80. padding: 10rpx 12rpx;
  81. position: relative;
  82. background-color: #fff;
  83. }
  84. .category-board-module-v2-s0 .cbmv2-wrapper, .category-board-module-v2-s1 .cbmv2-wrapper, .category-board-module-v2-s2 .cbmv2-wrapper {
  85. width: 100%;
  86. height: 100%;
  87. position: relative;
  88. font-size: 0;
  89. }
  90. .category-board-module-v2-s0 .cbmv2-wrapper .li, .category-board-module-v2-s1 .cbmv2-wrapper .li, .category-board-module-v2-s2 .cbmv2-wrapper .li {
  91. display: inline-block;
  92. vertical-align: top;
  93. width: 25%;
  94. height: 140rpx;
  95. }
  96. .category-board-module-v2-s1 .cbmv2-wrapper .li, .category-board-module-v2-s2 .cbmv2-wrapper .li {
  97. width: 20%;
  98. }
  99. .category-board-module-v2-s0 .cbmv2-wrapper .li .cbmv2-item-box, .category-board-module-v2-s0 .cbmv2-wrapper .li .cbmv2-item-box .cbmv2-item-img, .category-board-module-v2-s1 .cbmv2-wrapper .li .cbmv2-item-box, .category-board-module-v2-s1 .cbmv2-wrapper .li .cbmv2-item-box .cbmv2-item-img, .category-board-module-v2-s2 .cbmv2-wrapper .li .cbmv2-item-box, .category-board-module-v2-s2 .cbmv2-wrapper .li .cbmv2-item-box .cbmv2-item-img {
  100. width: 100%;
  101. height: 106rpx;
  102. }
  103. .category-board-module-v2-s0 .cbmv2-wrapper .li .cbmv2-item-box .cbmv2-item-img image, .category-board-module-v2-s1 .cbmv2-wrapper .li .cbmv2-item-box .cbmv2-item-img image, .category-board-module-v2-s2 .cbmv2-wrapper .li .cbmv2-item-box .cbmv2-item-img image {
  104. width: 108rpx;
  105. height: 108rpx;
  106. display: block;
  107. margin: 0 auto;
  108. }
  109. .category-board-module-v2-s0 .cbmv2-wrapper .li .cbmv2-item-box .cbmv2-item-name, .category-board-module-v2-s1 .cbmv2-wrapper .li .cbmv2-item-box .cbmv2-item-name, .category-board-module-v2-s2 .cbmv2-wrapper .li .cbmv2-item-box .cbmv2-item-name {
  110. width: 100%;
  111. text-align: center;
  112. height: 34rpx;
  113. line-height: 36rpx;
  114. font-size: 24rpx;
  115. color: #666;
  116. }
  117. .react-base-list-wrapper {
  118. position: relative;
  119. width: 100%;
  120. line-height: 1;
  121. overflow: hidden;
  122. }
  123. .pcl-list-wrapper {
  124. margin-top: 2rpx;
  125. }
  126. .double-grid-one {
  127. width: 50%;
  128. position: relative;
  129. display: inline-block;
  130. margin-bottom: 6rpx;
  131. }
  132. .double-grid-item {
  133. position: relative;
  134. overflow: hidden;
  135. background-color: #fff;
  136. }
  137. .gap-right {
  138. margin-right: 3rpx;
  139. }
  140. .double-grid-item .goods-image, .double-grid-item img {
  141. width: 372rpx;
  142. height: 372rpx;
  143. overflow: hidden;
  144. }
  145. .double-grid-item .goods-image image, .double-grid-item img image {
  146. position: relative;
  147. width: 100%;
  148. height: auto;
  149. max-height: 372rpx;
  150. overflow: hidden;
  151. }
  152. .double-grid-item .goods-name, .portal-list-item .goods-name, .recommend-grid-name {
  153. -webkit-line-clamp: 2;
  154. word-break: break-all;
  155. }
  156. .double-grid-item .goods-name {
  157. position: relative;
  158. padding: 16rpx 16rpx 0;
  159. width: 100%;
  160. overflow: hidden;
  161. word-wrap: break-word;
  162. -webkit-box-orient: vertical;
  163. text-align: justify;
  164. font-size: 26rpx;
  165. color: #333;
  166. height: 88rpx;
  167. line-height: 1.5;
  168. }
  169. .double-grid-item .detail {
  170. width: 100%;
  171. padding: 4rpx 14rpx 0;
  172. position: relative;
  173. height: 62rpx;
  174. font-size: 0;
  175. line-height: 1.5;
  176. }
  177. .double-grid-item .detail {
  178. width: 100%;
  179. padding: 4rpx 14rpx 0;
  180. position: relative;
  181. height: 62rpx;
  182. font-size: 0;
  183. line-height: 1.5;
  184. }
  185. .double-grid-item .detail .b {
  186. color:#ff6699;
  187. display:inline;
  188. font-weight: 700;
  189. }
  190. .double-grid-item .detail .price-icon {
  191. font-size: 20rpx;
  192. }
  193. .double-grid-item .detail .price {
  194. font-size: 32rpx;
  195. }
  196. .double-grid-item .detail .info {
  197. position: absolute;
  198. right: 14rpx;
  199. bottom: 16rpx;
  200. top: 10rpx;
  201. font-size: 26rpx;
  202. color: #9c9c9c;
  203. }
  204. #search-bar {
  205. width: 100%;
  206. position: relative;
  207. }
  208. #search-bar:before {
  209. position: absolute;
  210. width: 200%;
  211. height: 200%;
  212. transform-origin: 0 0;
  213. transform: scale(.5);
  214. box-sizing: border-box;
  215. -webkit-transform-origin: 0 0;
  216. -webkit-transform: scale(.5);
  217. -webkit-box-sizing: border-box;
  218. content: "";
  219. border-bottom: 2rpx solid #d2d2d2;
  220. }
  221. .search-title-container-result {
  222. position: relative;
  223. width: 100%;
  224. max-width: 640px;
  225. background-color: #fff;
  226. padding: 14rpx 0 14rpx 32rpx;
  227. height: 100rpx;
  228. }
  229. .search-title-container-result .view-top-container {
  230. width: 590rpx;
  231. height: 72rpx;
  232. float: left;
  233. border-radius: 16rpx;
  234. background-color: rgb(247, 247, 247);
  235. }
  236. .search-title-container-result .search-box-view-main {
  237. width: 460rpx!important;
  238. margin-left: 76rpx;
  239. font-size: 30rpx;
  240. color: #151516;
  241. height: 72rpx;
  242. float: left;
  243. border-radius: 16rpx;
  244. -webkit-border-radius: 16rpx;
  245. background-color: #fff;
  246. font-family: PingFangSC-Regular,Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Arial;
  247. }
  248. .search-title-container-result #result-input {
  249. background-color: rgb(247, 247, 247);
  250. -webkit-appearance: none;
  251. }
  252. .search-title-container-result .search-view-icon {
  253. width: 24rpx;
  254. height: 24rpx;
  255. position: relative;
  256. top: 24rpx;
  257. left: 29rpx;
  258. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAACenp6dnZ2lpaWdnZ2dnZ2enp6dnZ2dnZ2enp6fn5+cnJydnZ2enp6dnZ2dnZ2cnJwuBT3hAAAAEHRSTlMAL/AR2OVFlopkVcR7Hqa0bCS5IQAAANNJREFUKM91kdm6xRAMRiUSQ4v+7/+0Z2s5bHbXjWHJ8IXpOC8MlhKtWYmKDodvnU8AEuIRU92pmxwpcFE7WA/gGHEKPpa3/7EnmMyMFXBuvfQsA2KUZ6e4zEoC7mSurhuKUBcPWc24FYRFtHx1FIz4Q9JTrPa6Yz/yNTI/UpDeaxacP2SCtgHZXQr8XZrhN3f00Yd9RFZ6LavQJfE13jtAaI77uDBX4DROAsw/7BhQ78hml6oKPNtcMDjJULMNCnIb8fWy24ElorvtYTeGVfNutfwBiJYKBbU3umQAAAAASUVORK5CYII=);
  259. background-size: contain;
  260. background-repeat: no-repeat;
  261. }
  262. .search-title-container-result .search-content-clear {
  263. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiBAMAAADIaRbxAAAAJFBMVEWxsbGdnZ2dnZ2cnJyenp6dnZ2cnJycnJyfn5+dnZ2cnJycnJwQ7JGfAAAAC3RSTlMBsKP0IHS92VJJMYswFMoAAADTSURBVCjPZVIrDgJBDO2wQAKKBNwagiIZAwFDMBAkBs8BEHgMDosh4QJ7hV2+SS9HZ9pJ2fSJZub1daY/YFwOs9MYFN0+BkyLRDQ9MqqVMHdMWDDRQsUuMntUvALRwX/ciNnUmDkxvsZUlEuIXsfbILxYgCP7hDy6t2R7kJEtoUF2GPkJXDE6PEkcEr50ZJFIyHFEFo1Ygm84I4tAfB9YoojafHgo4xKjUblE2Zfld6e/S4a5ZpiJRKvQSkuu1HbDdsx21XbeTsdO0E7ZboLdFrtRPzHeFgrIg1bIAAAAAElFTkSuQmCC);
  264. background-repeat: no-repeat;
  265. background-size: contain;
  266. position: absolute;
  267. height: 36rpx;
  268. width: 36rpx;
  269. top: 30rpx;
  270. right: 142rpx;
  271. }
  272. .search-title-container-result .search-content-clear-result {
  273. top: 30rpx;
  274. }
  275. .search-title-container-result .cancel-container-view {
  276. float: right;
  277. margin-right: 0;
  278. width: 94rpx;
  279. height: 72rpx;
  280. font-size: 32rpx;
  281. color: #9c9c9c;
  282. }
  283. .search-title-container-result .cancel-button-view {
  284. line-height: 72rpx;
  285. }
  286. .search-view-container {
  287. position: fixed;
  288. top: 0;
  289. width: 100%;
  290. max-width: 640px;
  291. height: 100%;
  292. background-color: #fff;
  293. overflow: auto;
  294. z-index: 999999998;
  295. font-family: PingFangSC-Regular;
  296. }
  297. .search-view-container .search-view-box {
  298. overflow-y: auto;
  299. }
  300. .search-view-container .search-view-top {
  301. width: 100%;
  302. max-width: 640px;
  303. padding: 14rpx 0 14rpx 32rpx;
  304. height: 100rpx;
  305. border-bottom: 1px solid #ededed;
  306. }
  307. .search-view-container .view-top-container {
  308. width: 590rpx;
  309. height: 72rpx;
  310. float: left;
  311. border-radius: 16rpx;
  312. background-color: #ededed;
  313. }
  314. .search-view-container .search-box-view-main {
  315. width: 460rpx!important;
  316. margin-left: 71rpx;
  317. font-size: 30rpx;
  318. color: #151516;
  319. height: 72rpx;
  320. float: left;
  321. border-radius: 16rpx;
  322. -webkit-border-radius: 16rpx;
  323. background-color: #ededed;
  324. font-family: PingFangSC-Regular,Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Arial;
  325. }
  326. .search-view-container #view-input {
  327. background-color: #ededed;
  328. -webkit-appearance: none;
  329. }
  330. .search-view-container .search-view-icon {
  331. width: 24rpx;
  332. height: 24rpx;
  333. position: relative;
  334. top: 24rpx;
  335. left: 29rpx;
  336. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAACenp6dnZ2lpaWdnZ2dnZ2enp6dnZ2dnZ2enp6fn5+cnJydnZ2enp6dnZ2dnZ2cnJwuBT3hAAAAEHRSTlMAL/AR2OVFlopkVcR7Hqa0bCS5IQAAANNJREFUKM91kdm6xRAMRiUSQ4v+7/+0Z2s5bHbXjWHJ8IXpOC8MlhKtWYmKDodvnU8AEuIRU92pmxwpcFE7WA/gGHEKPpa3/7EnmMyMFXBuvfQsA2KUZ6e4zEoC7mSurhuKUBcPWc24FYRFtHx1FIz4Q9JTrPa6Yz/yNTI/UpDeaxacP2SCtgHZXQr8XZrhN3f00Yd9RFZ6LavQJfE13jtAaI77uDBX4DROAsw/7BhQ78hml6oKPNtcMDjJULMNCnIb8fWy24ElorvtYTeGVfNutfwBiJYKBbU3umQAAAAASUVORK5CYII=);
  337. background-size: contain;
  338. background-repeat: no-repeat;
  339. }
  340. .search-view-container .cancel-container-view {
  341. float: right;
  342. margin-right: 0;
  343. width: 94rpx;
  344. height: 72rpx;
  345. font-size: 32rpx;
  346. color: #9c9c9c;
  347. }
  348. .search-view-container .cancel-button-view {
  349. line-height: 72rpx;
  350. }
  351. .search-view-container .search-main-view {
  352. padding-left: 30rpx;
  353. padding-right: 32rpx;
  354. height: auto;
  355. width: 100%;
  356. }
  357. .search-view-container .search-main-view-recent {
  358. padding-top: 37rpx;
  359. }
  360. .search-view-container .search-recent-title-view {
  361. height: 42rpx;
  362. line-height: 42rpx;
  363. font-size: 30rpx;
  364. color: #9c9c9c;
  365. display: inline-block;
  366. }
  367. .search-view-container .search-recent-delete-view {
  368. float: right;
  369. }
  370. .search-view-container .search-recent-list-view {
  371. margin: 8rpx 24rpx 0 2rpx;
  372. }
  373. .search-view-container .search-recent-list-view .recent-history-list {
  374. display: inline-block;
  375. padding: 0 30rpx;
  376. margin: 16rpx 16rpx 0 0;
  377. border-radius: 32rpx;
  378. background-color: #f9f9f9;
  379. color: #58595b;
  380. cursor: pointer;
  381. min-width: 102rpx;
  382. max-width: 600rpx;
  383. overflow: hidden;
  384. white-space: nowrap;
  385. text-overflow: ellipsis;
  386. height: 64rpx;
  387. line-height: 64rpx;
  388. font-size: 28rpx;
  389. text-align: center;
  390. vertical-align: top;
  391. font-family: PingFangSC-Regular,Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Arial;
  392. }
  393. .search-view-container .search-recent-list-view .recent-history-list {
  394. max-width: 300rpx;
  395. }
  396. .search-view-container .search-main-view {
  397. padding-left: 30rpx;
  398. padding-right: 32rpx;
  399. height: auto;
  400. width: 100%;
  401. }
  402. .search-view-container .search-main-view-hot {
  403. padding-top: 44rpx;
  404. }
  405. .search-view-container .search-hot-title-view {
  406. height: 42rpx;
  407. line-height: 42rpx;
  408. font-size: 30rpx;
  409. color: #9c9c9c;
  410. display: inline-block;
  411. }
  412. .search-hotquery-list-view {
  413. height: 160rpx;
  414. overflow: hidden;
  415. }
  416. .search-view-container .search-recent-list-view {
  417. margin: 8rpx 24rpx 0 2rpx;
  418. }
  419. .search-view-container .search-recent-list-view .recent-history-list {
  420. display: inline-block;
  421. padding: 0 30rpx;
  422. margin: 16rpx 16rpx 0 0;
  423. border-radius: 32rpx;
  424. background-color: #f9f9f9;
  425. color: #58595b;
  426. cursor: pointer;
  427. min-width: 102rpx;
  428. max-width: 600rpx;
  429. overflow: hidden;
  430. white-space: nowrap;
  431. text-overflow: ellipsis;
  432. height: 64rpx;
  433. line-height: 64rpx;
  434. font-size: 28rpx;
  435. text-align: center;
  436. vertical-align: top;
  437. font-family: PingFangSC-Regular,Helvetica,STHeiti STXihei,Microsoft JhengHei,Microsoft YaHei,Arial;
  438. }
  439. .search-view-container .search-recent-list-view .recent-history-list {
  440. max-width: 300rpx;
  441. }
  442. .search-view-container .search-recent-title-view:before {
  443. content: "\e605";
  444. font-family: iconfont;
  445. font-size: 28rpx;
  446. color: #d2d2d2;
  447. margin-right: 12rpx;
  448. }
  449. .search-view-container .search-hot-title-view:before {
  450. content: "\e601";
  451. font-family: iconfont;
  452. font-size: 32rpx;
  453. color: #d2d2d2;
  454. margin-right: 12rpx;
  455. }
  456. .search-sort-tab-seat {
  457. height: 80rpx;
  458. width: 100%;
  459. }
  460. .search-sort-with-filter {
  461. position: relative;
  462. width: 100%;
  463. font-size: 28rpx;
  464. color: #58595b;
  465. }
  466. .search-sort-tab-seat {
  467. height: 80rpx;
  468. width: 100%;
  469. }
  470. .search-sort-with-filter {
  471. position: relative;
  472. width: 100%;
  473. font-size: 28rpx;
  474. color: #58595b;
  475. }
  476. .search-sort-with-filter {
  477. position: relative;
  478. width: 100%;
  479. font-size: 28rpx;
  480. color: #58595b;
  481. }
  482. .search-result-sort-sticky {
  483. position: absolute;
  484. top: 0;
  485. z-index: 1000;
  486. }
  487. #searchSortTabWrap {
  488. height: 80rpx;
  489. width: 100%;
  490. max-width: 640px;
  491. background: #fff;
  492. }
  493. .search-sort-tab {
  494. width: 100%;
  495. height: 80rpx;
  496. overflow-x: hidden;
  497. line-height: 80rpx;
  498. border-bottom: 1px solid #f2f2f2;
  499. }
  500. .search-sort-with-filter .search-sort-tab {
  501. line-height: 76rpx;
  502. height: 80rpx;
  503. z-index: 3;
  504. background: #fff;
  505. border-bottom: 1px solid #f2f2f2;
  506. }
  507. .search-result-sort-sticky .search-sort-tab {
  508. margin-top: 0;
  509. }
  510. .search-sort-with-filter .search-sort-tab .sort-droplist-trigger {
  511. display: inline-block;
  512. float: none;
  513. width: 33%;
  514. padding-top: 2rpx;
  515. text-align: center;
  516. color: #58595b;
  517. }
  518. .search-sort-with-filter .search-sort-tab .android-sort-droplist-trigger-down:before, .search-sort-with-filter .search-sort-tab .sort-droplist-trigger-down:before {
  519. content: "\e65a";
  520. position: absolute;
  521. font-family: iconfont;
  522. font-size: 20rpx;
  523. color: #ccc;
  524. margin-left: 10rpx;
  525. }
  526. .search-sort-with-filter .add-filter, .search-sort-with-filter .recent-hot-sort, .search-sort-with-filter .sort-by-price {
  527. display: inline-block;
  528. width: 33%;
  529. text-align: center;
  530. }
  531. .search-sort-with-filter .add-filter, .search-sort-with-filter .recent-hot-sort, .search-sort-with-filter .sort-by-price {
  532. display: inline-block;
  533. width: 33%;
  534. text-align: center;
  535. }
  536. .search-sort-with-filter .sort-by-price {
  537. height: 100%;
  538. line-height: 82rpx;
  539. }
  540. .search-sort-with-filter .search-sort-tab .sort-tab-highlight, .search-sort-with-filter .search-sort-tab .sort-tab-highlight .android-sort-droplist-trigger-down:before, .search-sort-with-filter .search-sort-tab .sort-tab-highlight .android-sort-droplist-trigger-menu:before, .search-sort-with-filter .search-sort-tab .sort-tab-highlight .android-sort-droplist-trigger-up:before, .search-sort-with-filter .search-sort-tab .sort-tab-highlight .sort-droplist-trigger-down:before, .search-sort-with-filter .search-sort-tab .sort-tab-highlight .sort-droplist-trigger-menu:before, .search-sort-with-filter .search-sort-tab .sort-tab-highlight .sort-droplist-trigger-up:before {
  541. color: #ff6699;
  542. }
  543. .search-sort-with-filter .price-icon-wrapper {
  544. display: inline-block;
  545. position: absolute;
  546. height: 80rpx;
  547. margin-left: 4rpx;
  548. }
  549. .search-sort-with-filter .search-sort-tab .price-icon-up {
  550. position: relative;
  551. top: 6.4rpx;
  552. }
  553. .search-sort-with-filter .search-sort-tab .price-up-hightlight {
  554. border-top-color: #e02e24;
  555. }
  556. .search-sort-with-filter .search-sort-tab .price-icon-up:before {
  557. content: "\e65a";
  558. position: absolute;
  559. font-family: iconfont;
  560. font-size: 20rpx;
  561. color: #d2d2d2;
  562. margin-left: 6rpx;
  563. }
  564. .search-sort-with-filter .search-sort-tab .price-up-hightlight:before {
  565. color: #ff6699;
  566. }
  567. .search-sort-with-filter .search-sort-tab .price-icon-down {
  568. position: relative;
  569. bottom: 6.4rpx;
  570. }
  571. .search-sort-with-filter .search-sort-tab .price-icon-down:before {
  572. content: "\e612";
  573. position: absolute;
  574. font-family: iconfont;
  575. font-size: 20rpx;
  576. color: #d2d2d2;
  577. margin-left: 6rpx;
  578. }
  579. .search-sort-with-filter .search-sort-tab .price-down-hightlight:before {
  580. color: #ff6699;
  581. }
  582. .search-sort-with-filter .search-sort-tab .search-sort-cut-off {
  583. width: 2rpx;
  584. height: 28rpx;
  585. background-color: #eee;
  586. display: inline-block;
  587. position: relative;
  588. left: 16rpx;
  589. top: 4rpx;
  590. }
  591. .search-sort-with-filter .add-filter, .search-sort-with-filter .recent-hot-sort, .search-sort-with-filter .sort-by-price {
  592. display: inline-block;
  593. width: 33%;
  594. text-align: center;
  595. }
  596. .search-sort-with-filter .search-sort-tab .android-sort-droplist-trigger-menu:before, .search-sort-with-filter .search-sort-tab .sort-droplist-trigger-menu:before {
  597. content: "\e61b";
  598. position: absolute;
  599. font-family: iconfont;
  600. font-size: 22rpx;
  601. margin-left: 10rpx;
  602. color: #ccc;
  603. }
  604. .search-sort-with-filter .search-sort-tab .search-sort-cut-off {
  605. width: 2rpx;
  606. height: 28rpx;
  607. background-color: #eee;
  608. display: inline-block;
  609. position: relative;
  610. left: 16rpx;
  611. top: 4rpx;
  612. }
  613. .search-sort-with-filter .add-filter, .search-sort-with-filter .recent-hot-sort, .search-sort-with-filter .sort-by-price {
  614. display: inline-block;
  615. width: 33%;
  616. text-align: center;
  617. }
  618. .search-goods-list{
  619. position: relative;
  620. }
  621. .test-wrap{
  622. position: relative;
  623. }
  624. .search-sort-with-filter .search-sort-tab .android-sort-droplist-trigger-menu:before, .search-sort-with-filter .search-sort-tab .sort-droplist-trigger-menu:before {
  625. content: "\e61b";
  626. position: absolute;
  627. font-family: iconfont;
  628. font-size: 30rpx;
  629. margin-left: 10rpx;
  630. color: #ccc;
  631. }
  632. .filter-panel {
  633. font-size: 28rpx;
  634. color: #58595b;
  635. position: absolute;
  636. width: 100%;
  637. z-index: 1000;
  638. height: 2000rpx;
  639. }
  640. .filter-panel .filter-panel-mask {
  641. position: absolute;
  642. width: 100%;
  643. height: 100%;
  644. background: rgba(0,0,0,.6);
  645. z-index: 1000;
  646. }
  647. .filter-panel .filter-content {
  648. position: relative;
  649. z-index: 1001;
  650. background: #fff;
  651. }
  652. .search-tab-filter-opt .filter-content-conditions {
  653. max-height: 620rpx;
  654. overflow-y: scroll;
  655. -webkit-overflow-scrolling: touch;
  656. }
  657. .search-tab-filter-opt .price-filter-opt {
  658. padding: 0 0 0 28rpx;
  659. overflow-x: scroll;
  660. }
  661. .search-tab-filter-opt .price-padding-bottom {
  662. padding-bottom: 34rpx;
  663. }
  664. .filter-title {
  665. line-height: 28rpx;
  666. padding: 30rpx 0 22rpx;
  667. }
  668. .search-tab-filter-opt .filter-title {
  669. color: #9c9c9c;
  670. padding: 30rpx 0 26rpx;
  671. }
  672. .search-tab-filter-opt .price-filter-opt .price-items-wrap {
  673. padding-bottom: 1px;
  674. overflow-x: hidden;
  675. overflow-y: hidden;
  676. }
  677. .search-tab-filter-opt .price-filter-opt .price-items {
  678. vertical-align: middle;
  679. width: auto;
  680. white-space: nowrap;
  681. min-width: 750rpx;
  682. }
  683. .search-tab-filter-opt .price-filter-opt .price-item {
  684. display: -webkit-inline-box;
  685. display: -webkit-inline-flex;
  686. display: inline-flex;
  687. -webkit-box-pack: center;
  688. -webkit-justify-content: center;
  689. justify-content: center;
  690. -webkit-box-align: center;
  691. -webkit-align-items: center;
  692. align-items: center;
  693. min-width: 163rpx;
  694. height: 72rpx;
  695. border-radius: 8rpx;
  696. background: #f8f8f8;
  697. color: #58595b;
  698. font-size: 28rpx;
  699. margin-left: 14rpx;
  700. overflow: hidden;
  701. vertical-align: middle;
  702. }
  703. .search-tab-filter-opt .price-filter-opt .no-margin-left {
  704. margin-left: 0;
  705. width: 160rpx;
  706. }
  707. .search-tab-filter-opt .price-filter-opt .custom-price {
  708. height: 72rpxm;
  709. line-height: 72rpx;
  710. margin-top: 18rpx;
  711. font-size: 28rpx;
  712. }
  713. .search-tab-filter-opt .price-filter-opt .custom-price .custom-price-item {
  714. width: 326rpx;
  715. height: 72rpx;
  716. border-radius: 8rpx;
  717. color: #58595b;
  718. text-align: center;
  719. background: #f4f4f4;
  720. float:left;
  721. }
  722. .search-tab-filter-opt .price-filter-opt .custom-price .custom-price-line {
  723. display: inline-block;
  724. width: 42rpx;
  725. color: #ccc;
  726. text-align: center;
  727. float:left;
  728. }
  729. .search-tab-filter-opt .filter-ok-btn {
  730. height: 92rpx;
  731. font-size: 34rpx;
  732. line-height: 92rpx;
  733. color: #e02e24;
  734. background: #fff;
  735. text-align: center;
  736. border-top: 1px solid #ededed;
  737. }
  738. .search-tab-filter-opt .price-filter-opt .filter-selected {
  739. color: #e02e24;
  740. background: #fdf4f4;
  741. border: none;
  742. position: relative;
  743. }
  744. .filter-selected:before {
  745. content: "\E6D6";
  746. font-family: icomoon;
  747. line-height: 62rpx;
  748. width: 200rpx;
  749. font-size: 10px;
  750. font-weight: 200;
  751. margin-right: 8rpx;
  752. }
  753. .search-tab-filter-opt .price-filter-opt .filter-selected:before {
  754. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAwUExURUdwTOAqFd8oEeErFuEqFeErFtQqAOErFuErFcYcAOIsF/////Wvqu55ce+DfPzh4HBfpFAAAAAKdFJOUwCPK/yW1gb0vAmmDls8AAAAh0lEQVR42k3MsQ2DQBBE0QksCiB0huiAkIjUsTMiB7RAE3SBEMJa2W4AKsASBYCoxIn3RtyxG92bLx2A5C7HAVUuAVEjJy5ikFpcLUr/2hX+r9e4Cnz4Ej5M4vBeGWZim45A6Mgg4MpA6PzTQLjkAsHEMBCfhaFXhGstMovC4Pk40d0QUMfAH1MjuEZfNmmEAAAAAElFTkSuQmCC);
  755. background-repeat: no-repeat;
  756. background-size: 24rpx 24rpx;
  757. position: absolute;
  758. content: "";
  759. top: 0;
  760. left: 0;
  761. width: 24rpx;
  762. height: 24rpx;
  763. }