index.wxss 5.1 KB

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