shopSearchResult.wxss 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. /* pages/search-prod-show/search-prod-show.wxss */
  2. page {
  3. background: #f4f4f4;
  4. }
  5. /* 搜索栏 */
  6. .fixed-box {
  7. position: fixed;
  8. width: 100%;
  9. top: 0;
  10. z-index: 999;
  11. background: #fff;
  12. }
  13. .hotsale-item-cont {
  14. background-color: #f8f8f8;
  15. }
  16. .search-bar {
  17. display: flex;
  18. align-items: center;
  19. justify-content: space-between;
  20. width: 100%;
  21. color: #777;
  22. background: #fff;
  23. z-index: 3;
  24. padding: 20rpx 30rpx;
  25. box-sizing: border-box;
  26. }
  27. .search-bar .search-box {
  28. position: relative;
  29. height: 60rpx;
  30. background: #f7f7f7;
  31. z-index: 999;
  32. width: 80%;
  33. border-radius: 50rpx;
  34. margin-right: 30rpx;
  35. flex: 1;
  36. }
  37. .sear-input {
  38. height: 60rpx;
  39. border-radius: 50rpx;
  40. border: 0;
  41. margin: 0 30rpx 0 64rpx;
  42. line-height: 48rpx;
  43. vertical-align: top;
  44. background: #f7f7f7;
  45. font-size: 28rpx;
  46. }
  47. .search-bar .search-hint {
  48. font-size: 28rpx;
  49. position: absolute;
  50. right: 30rpx;
  51. top: 31rpx;
  52. color: #e43130;
  53. }
  54. .search-bar .search-box .search-img {
  55. width: 32rpx;
  56. height: 32rpx;
  57. position: absolute;
  58. left: 20rpx;
  59. top: 14rpx;
  60. display: block;
  61. }
  62. .search-bar .search-list-img {
  63. width: 40rpx;
  64. height: 40rpx;
  65. font-size: 0;
  66. }
  67. .search-bar .search-list-img image {
  68. width: 100%;
  69. height: 100%;
  70. }
  71. .fixed-box .tabs {
  72. width: 100%;
  73. height: 80rpx;
  74. line-height: 80rpx;
  75. padding: 10rpx 0;
  76. z-index: 999;
  77. background: #fff;
  78. }
  79. .fixed-box .tabs::after {
  80. content: '';
  81. background-color: #e1e1e1;
  82. left: 0;
  83. height: 1px;
  84. transform-origin: 50% 100% 0;
  85. bottom: 0;
  86. position: absolute;
  87. display: block;
  88. width: 100%;
  89. }
  90. .fixed-box .tabs .tab-item {
  91. display: inline-block;
  92. width: 33.33%;
  93. text-align: center;
  94. font-size: 28rpx;
  95. }
  96. .fixed-box .tabs .tab-item.on {
  97. color: #e43130;
  98. }
  99. /* 横向列表 */
  100. .prod-show {
  101. display: block;
  102. background: #fff;
  103. margin-top: 210rpx;
  104. }
  105. .prod-show .prod-items {
  106. width: 375rpx;
  107. float: left;
  108. background: #fff;
  109. padding-bottom: 20rpx;
  110. box-sizing: border-box;
  111. }
  112. /* 纵向列表 */
  113. .prod-list .cont-item {
  114. padding: 0 20rpx 20rpx 20rpx;
  115. margin-top: 220rpx;
  116. }
  117. .prod-list .cont-item .show-item .more-prod-pic {
  118. text-align: center;
  119. width: 170rpx;
  120. height: 170rpx;
  121. font-size: 0;
  122. }
  123. .prod-list .cont-item .show-item .more-prod-pic .more-pic {
  124. width: 100%;
  125. height: 100%;
  126. vertical-align: middle;
  127. }
  128. .prod-list .cont-item .show-item {
  129. position: relative;
  130. display: flex;
  131. justify-content: start;
  132. padding: 20rpx;
  133. border-radius: 20rpx;
  134. background: #fff;
  135. margin-bottom: 20rpx;
  136. box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
  137. }
  138. .prod-list .cont-item .show-item .prod-text-right {
  139. margin-left: 20rpx;
  140. width: 75%;
  141. }
  142. .prod-list .cont-item .show-item .prod-text-right .cate-prod-info {
  143. font-size: 22rpx;
  144. color: #999;
  145. margin: 10rpx 0 20rpx 0;
  146. padding: 0 15rpx;
  147. }
  148. .prod-info {
  149. font-size: 25rpx;
  150. padding: 0 15rpx;
  151. color: #888888;
  152. }
  153. .prod-list .cont-item .show-item .prod-text-right .go-to-buy {
  154. font-size: 26rpx;
  155. background: #e43130;
  156. color: #fff;
  157. border-radius: 50rpx;
  158. width: 150rpx;
  159. text-align: center;
  160. padding: 8rpx 3rpx;
  161. position: absolute;
  162. right: 20rpx;
  163. bottom: 20rpx;
  164. }
  165. .prod-list .cont-item .show-item .prod-text-right .prod-text.more {
  166. margin: 0;
  167. height: 78rpx;
  168. font-size: 28rpx;
  169. display: -webkit-box;
  170. word-break: break-all;
  171. overflow: hidden;
  172. text-overflow: ellipsis;
  173. display: -webkit-box;
  174. -webkit-line-clamp: 2;
  175. -webkit-box-orient: vertical;
  176. color: #000;
  177. }
  178. .prod-list .cont-item .show-item .prod-text-right .prod-price.more {
  179. font-size: 28rpx;
  180. color: #e43130;
  181. font-family: arial;
  182. }
  183. .empty-tips{
  184. color: #777;
  185. text-align: center;
  186. font-size: 26rpx;
  187. margin-top: 40rpx;
  188. }
  189. /* 列表为空 */
  190. .empty {
  191. margin-top: 100rpx;
  192. text-align: cneter;
  193. }
  194. .empty-icon {
  195. display: block;
  196. width: 80rpx;
  197. height: 80rpx;
  198. margin: 0 auto;
  199. margin-bottom: 20rpx;
  200. }
  201. .empty-icon > image {
  202. width: 100%;
  203. height: 100%;
  204. }
  205. .empty-text {
  206. font-size: 28rpx;
  207. text-align: center;
  208. color: #999;
  209. line-height: 2em;
  210. }