index.wxss 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. /* 我的需求搜索框 */
  2. .my-need-search {
  3. display: flex;
  4. width: 702rpx;
  5. height: 60rpx;
  6. border-radius: 6rpx;
  7. margin: 10rpx auto 20rpx;
  8. }
  9. .my-need-search-input {
  10. flex: 1;
  11. height: 100%;
  12. line-height: 100%;
  13. font-size: 26rpx;
  14. text-align: center;
  15. background-color: #FFFFFF;
  16. color: rgba(0, 0, 0, 0.4);
  17. border: 2px solid rgba(0, 0, 0, 0.1);
  18. border-right: 0;
  19. border-radius: 6rpx 0px 0px 6rpx;
  20. padding-left: 20rpx;
  21. margin-left: 10rpx;
  22. box-sizing: border-box;
  23. }
  24. .my-need-search-inputfocus {
  25. border: 2px solid #4DC2D4;
  26. color: rgba(0, 0, 0, 0.7);
  27. }
  28. .my-need-search-but {
  29. display: flex;
  30. justify-content: center;
  31. align-items: center;
  32. width: 128rpx;
  33. height: 100%;
  34. font-size: 34rpx;
  35. color: #FFFFFF;
  36. background: #4DC2D4;
  37. border-radius: 0px 6rpx 6rpx 0px;
  38. }
  39. .tabs_box {
  40. width: 100vw;
  41. }
  42. /* tabs选中项样式 */
  43. .tabs-active-class {
  44. font-size: 32rpx !important;
  45. font-weight: 600 !important;
  46. }
  47. /* 下架按钮插槽样式 */
  48. .soldOutBut {
  49. width: 76rpx !important;
  50. height: 45rpx !important;
  51. background: rgba(77, 194, 212, 0.1) !important;
  52. box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.1) !important;
  53. border-radius: 10rpx !important;
  54. border: 2rpx solid #4DC2D4 !important;
  55. padding: 0 !important;
  56. }
  57. /* 数据,按钮 插槽样式 */
  58. .dataAndBut {
  59. display: flex;
  60. justify-content: space-between !important;
  61. align-items: center;
  62. flex-wrap: nowrap;
  63. margin-top: 14rpx;
  64. }
  65. .dataAndBut_data {
  66. flex: 1;
  67. display: flex;
  68. font-size: 24rpx;
  69. color: #000000;
  70. margin-left: 16rpx;
  71. }
  72. .dataAndBut_data>text {
  73. color: #4DC2D4;
  74. text-decoration: underline;
  75. margin-left: 8rpx;
  76. }
  77. /* 按钮 */
  78. .dataAndBut_but {
  79. display: flex;
  80. align-items: center;
  81. margin-right: 6rpx;
  82. }
  83. .custom-slotBut {
  84. height: 44rpx !important;
  85. background: linear-gradient(180deg, #84E3EC 0%, #4DC2D4 100%) !important;
  86. box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.1) !important;
  87. border-radius: 10rpx !important;
  88. padding: 0 14rpx !important;
  89. border: 0 !important;
  90. }
  91. .custom-NoSlotBut {
  92. height: 44rpx !important;
  93. background: linear-gradient(180deg, #D3D3D3 0%, #A7A8A8 100%) !important;
  94. box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.1) !important;
  95. border-radius: 10rpx !important;
  96. color: #FFFFFF;
  97. padding: 0 14rpx !important;
  98. border: 0 !important;
  99. }
  100. /* 正在对接样式 */
  101. .abutting-joint-box {
  102. width: 702rpx;
  103. background: #FFFFFF;
  104. border-radius: 20rpx;
  105. padding: 0 14rpx;
  106. box-sizing: border-box;
  107. margin: 0 auto;
  108. }
  109. .abutting-joint-titleAndMsg {
  110. height: 105rpx;
  111. padding: 16rpx;
  112. padding-top: 20rpx;
  113. margin-top: 20rpx;
  114. box-sizing: border-box;
  115. border-bottom: 2rpx solid rgba(151, 151, 151, 0.2);
  116. }
  117. .abutting-joint-title {
  118. font-size: 28rpx;
  119. color: #000000;
  120. }
  121. .abutting-joint-msg {
  122. font-size: 24rpx;
  123. color: rgba(0, 0, 0, 0.5);
  124. margin-top: 5rpx;
  125. }
  126. /* 时间和按钮 */
  127. .abutting-joint-timeAndBut {
  128. display: flex;
  129. height: 62rpx;
  130. justify-content: space-between;
  131. align-items: center;
  132. padding-left: 16rpx;
  133. box-sizing: border-box;
  134. }
  135. .abutting-joint-time {
  136. font-size: 24rpx;
  137. color: rgba(0, 0, 0, 0.3);
  138. }
  139. .abutting-joint-but {
  140. width: 108rpx !important;
  141. height: 44rpx !important;
  142. background: linear-gradient(180deg, #84E3EC 0%, #4DC2D4 100%) !important;
  143. box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.1) !important;
  144. border-radius: 10rpx !important;
  145. margin-right: 6rpx;
  146. }
  147. .abutting-joint-but-text {
  148. position: absolute;
  149. display: block;
  150. font-size: 20rpx;
  151. font-weight: 500;
  152. color: #FFFFFF !important;
  153. top: 0;
  154. left: 13rpx;
  155. }
  156. /* 宫格区域盒子 */
  157. .grid_box {
  158. display: flex;
  159. flex-wrap: wrap;
  160. width: 704rpx;
  161. background: #FFFFFF;
  162. border-radius: 20rpx;
  163. margin: 10rpx auto 20rpx;
  164. padding: 30rpx 50rpx 0;
  165. box-sizing: border-box;
  166. }
  167. .grid_item {
  168. display: flex;
  169. align-items: center;
  170. flex-direction: column;
  171. justify-content: space-between;
  172. width: 130rpx;
  173. margin-bottom: 20rpx;
  174. padding: 0 11rpx;
  175. }
  176. .grid_item_image {
  177. width: 80rpx;
  178. height: 80rpx;
  179. border-radius: 50%;
  180. background: #D8D8D8;
  181. margin-bottom: 10rpx;
  182. box-sizing: border-box;
  183. }
  184. .grid_item_pitchOn {
  185. border: 2rpx solid #4CBECF;
  186. }
  187. .grid_item_title {
  188. font-size: 28rpx;
  189. color: #000000;
  190. }
  191. /* 沟通列表 */
  192. .CommunicationOfNumber {
  193. padding-bottom: 30rpx;
  194. }
  195. .CommunicationOfNumber-title {
  196. font-size: 32rpx;
  197. font-weight: 500;
  198. color: #000000;
  199. margin: 40rpx 0 30rpx 54rpx;
  200. }
  201. .CommunicationOfNumber-list>view {
  202. width: 100%;
  203. padding: 0 20rpx;
  204. font-size: 24rpx;
  205. color: #000000;
  206. margin-bottom: 20rpx;
  207. box-sizing: border-box;
  208. }
  209. .CommunicationOfNumber-list text {
  210. color: #4DC2D4;
  211. padding: 0 8rpx;
  212. }
  213. /* 右侧吸附按钮 */
  214. .fixedButton {
  215. position: fixed;
  216. width: 132rpx;
  217. height: 68rpx;
  218. font-size: 32rpx;
  219. color: #FFFFFF;
  220. box-shadow: 0px 6rpx 6rpx 0px rgba(0, 0, 0, 0.1);
  221. border-radius: 34rpx 0 0 34rpx;
  222. top: 68%;
  223. right: 0;
  224. z-index: 999;
  225. overflow: hidden;
  226. }
  227. .custom-fixedButton {
  228. position: absolute !important;
  229. width: 100% !important;
  230. height: 100% !important;
  231. top: 0;
  232. }
  233. .fixedButtonText {
  234. position: absolute;
  235. display: flex;
  236. align-items: center;
  237. width: 100%;
  238. height: 100%;
  239. z-index: 9;
  240. pointer-events: none;
  241. }
  242. .fixedButtonText image {
  243. width: 26rpx;
  244. height: 26rpx;
  245. margin-left: 18rpx;
  246. }
  247. .fixedButtonText view {
  248. margin: -3.5rpx 10rpx 0;
  249. }
  250. /* 我的供需 状态 */
  251. .myState {
  252. height: 40rpx;
  253. }
  254. .myShowState {
  255. display: flex;
  256. align-items: center;
  257. justify-content: center;
  258. position: absolute;
  259. width: 108rpx;
  260. height: 44rpx;
  261. background-color: #A7A8A8;
  262. border-radius: 20rpx 0px 20rpx 0px;
  263. top: 0;
  264. left: 0;
  265. font-size: 20rpx;
  266. color: #FFFFFF;
  267. }
  268. .myNoSoldOut {
  269. background: #4DC2D4;
  270. }