addmeet.wxss 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
  1. /* pages/my/meet/detail.wxss */
  2. @import "../../pages/common.wxss";
  3. @font-face {
  4. font-family: "iconfont";
  5. src: url("iconfont.eot?t=1559096289773");
  6. /* IE9 */
  7. src: url("iconfont.eot?t=1559096289773#iefix") format("embedded-opentype"),
  8. /* IE6-IE8 */
  9. url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKcAAsAAAAABkwAAAJQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApUYwE2AiQDCAsGAAQgBYRtBzEbigXInpo8KUIbQwhFQm+LQTgb4uG/Nfb3zQ4mEomiWb3hpxOpJIiNkol80RL2/9baLKaROpjtabqEWcLryp8Vnx3UElXMuocCHQ+FR+RdAozrFwWRT9w7/RPog8wHlONeNNakSV1AXRxIAe6FUWSFEnjD2AUv8DGBWoOqcJtNHd0oTWavCsSTpggorRCRZZavFiobDmbxrkJ1ek0vkLfo+/FfOKpJKgp2085No4xqfnWKipdy2kVAiBLQ8QoUmIdk4qAxsyVRMC5RbSbJKHSs+uDXsgzc4qgOwf46u7Ye9EPlM6k89aPmEzzWRO2Q3kk/jGj318vkpaOTi43NPIVc7D4vlsN5fCp9vL///i3eOzl5F4lGIlzjKI/7+wtRDYSydNGDOASnrb9D17mL/9V1GXyq/4pCZdkwH1K9F2/wN1QD+7KhsV0pa6rG4aT9LC21alHCgVY/U60dpy6Eah0TfFUGMhSqjZOZnUeFOguoVG0FteY0H6/ThkoUuQazFgBCs1skjT5QaPZKZvYbFTr9oVJzFKh1FG0X1pmM+4wNCgIDGYsjWJMcm7gelhHXd4IyYAo0r4n4XqC+FschPljON4MNdIkt/qASZoxgQh0LN4HnwDQd7FJHB4nxKmNuLBAgTW/iJcdCGTZQQMAAGSYagWkkDhsJRjMZlc93AooBJgHt6Kkr9gKUT5seC+EFB5DNRntQz6O84hukCGMYAiMohwVrAvOAyeTA3OZ5OiBheOqElCsm4AwiQ4389mbr745BLduWwplZqHrWhBFNHEAIAAA=")
  10. format("woff2"),
  11. url("iconfont.woff?t=1559096289773") format("woff"),
  12. url("iconfont.ttf?t=1559096289773") format("truetype"),
  13. /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  14. url("iconfont.svg?t=1559096289773#iconfont") format("svg");
  15. /* iOS 4.1- */
  16. }
  17. .iconfont {
  18. font-family: "iconfont" !important;
  19. font-style: normal;
  20. -webkit-font-smoothing: antialiased;
  21. -moz-osx-font-smoothing: grayscale;
  22. }
  23. .icon-xiayibu:before {
  24. content: "\e644";
  25. }
  26. .more-right-arrow {
  27. color: #999999;
  28. font-size: 24rpx;
  29. }
  30. page {
  31. width: 100%;
  32. height: 100%;
  33. background-color: #fff;
  34. /* background-color: #f5f5f5; */
  35. }
  36. .service-detail-container {
  37. padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
  38. /*兼容 IOS<11.2*/
  39. padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
  40. /*兼容 IOS>11.2*/
  41. }
  42. .meet-people {
  43. padding: 30rpx;
  44. background-image: linear-gradient(#fff, #fdfdfd);
  45. }
  46. .meet-people .people-info {
  47. display: flex;
  48. align-items: center;
  49. margin-bottom: 30rpx;
  50. font-family: "PingFang SC, PingFang SC-Regular";
  51. font-weight: 400;
  52. }
  53. .meet-people .people-info .people-avatar {
  54. width: 150rpx;
  55. height: 150rpx;
  56. border-radius: 50%;
  57. margin-right: 20rpx;
  58. flex-shrink: 0;
  59. }
  60. .meet-people .people-info .people-name {
  61. font-size: 34rpx;
  62. color: #1a1a1a;
  63. }
  64. .meet-people .people-info .more-box {
  65. display: flex;
  66. align-items: center;
  67. margin-left: auto;
  68. font-size: 24rpx;
  69. color: #999999;
  70. width: 325rpx;
  71. flex-shrink: 0;
  72. }
  73. .meet-people .people-info .more-box .status-btn {
  74. width: 181rpx;
  75. height: 60rpx;
  76. background: #ffdc2f;
  77. border-radius: 30rpx;
  78. font-size: 28rpx;
  79. line-height: 60rpx;
  80. text-align: center;
  81. color: #1a1a1a;
  82. margin-right: 7rpx;
  83. }
  84. .canceled {
  85. width: 181rpx;
  86. height: 60rpx;
  87. background-color: #999999;
  88. border-radius: 30rpx;
  89. font-size: 28rpx;
  90. line-height: 60rpx;
  91. text-align: center;
  92. color: #ffffff;
  93. margin-right: 7rpx;
  94. }
  95. .meet-people .people-info .more-box .group-status {
  96. background: #3be5b2;
  97. }
  98. .meet-people .people-info .more-box .dispose-status {
  99. background: #ffb08d;
  100. }
  101. .meet-people .people-info .more-box .finish-status {
  102. color: #ffa836;
  103. background: #fffae1;
  104. border: 2rpx solid #ffa836;
  105. }
  106. .meet-people .box {
  107. margin-bottom: 10rpx;
  108. font-size: 24rpx;
  109. color: #666666;
  110. }
  111. .meet-people .consult {
  112. color: #ff9209;
  113. }
  114. .meet-people .tag {
  115. display: flex;
  116. flex-wrap: wrap;
  117. }
  118. .meet-people .label-tag {
  119. padding: 4rpx 16rpx;
  120. margin-right: 15rpx;
  121. margin-bottom: 15rpx;
  122. background: #f2f2f2;
  123. border-radius: 10rpx 0px 10rpx 0px;
  124. }
  125. .header {
  126. padding: 30rpx 0;
  127. background-color: #fff;
  128. font-size: 24rpx;
  129. font-weight: 400;
  130. font-family: "PingFang SC, PingFang SC-Regular";
  131. border-radius: 40rpx 40rpx 0 0;
  132. /* border-radius:40rpx; */
  133. margin-top: 20rpx;
  134. box-shadow: 0 0 40rpx #f2f2f2;
  135. }
  136. .bg-line {
  137. width: 750rpx;
  138. height:30rpx;
  139. background-color: #f5f5f5;
  140. }
  141. .header .title {
  142. margin-bottom: 35rpx;
  143. text-align: center;
  144. font-size: 28rpx;
  145. color: #1a1a1a;
  146. }
  147. .header .title .label {
  148. margin-right: 40rpx;
  149. }
  150. .header .title .label:last-child {
  151. margin-right: 0;
  152. }
  153. .header .title .text {
  154. color: #808080;
  155. }
  156. .header .invite-person {
  157. margin-bottom: 13rpx;
  158. font-size: 36rpx;
  159. text-align: center;
  160. font-weight: 500;
  161. color: #1a1a1a;
  162. }
  163. .header .invite-person .person-num {
  164. color: #ff0000;
  165. }
  166. .header .count-down {
  167. display: flex;
  168. justify-content: center;
  169. align-items: center;
  170. margin-bottom: 30rpx;
  171. color: #808080;
  172. border-bottom: 1px dashed #f5f5f5;
  173. width: 690rpx;
  174. margin-left: 30rpx;
  175. padding-bottom: 30rpx;
  176. }
  177. .header .count-down .down-box {
  178. display: flex;
  179. justify-content: center;
  180. align-items: center;
  181. }
  182. .header .count-down .down-box .num {
  183. width: 46rpx;
  184. height: 46rpx;
  185. background-color: #ec2e26;
  186. text-align: center;
  187. line-height: 46rpx;
  188. color: #ffffff;
  189. border-radius: 10rpx;
  190. }
  191. .header .count-down .down-box .colon {
  192. margin: 0 8rpx;
  193. }
  194. .header .dashed {
  195. margin: 0 30rpx 35rpx;
  196. border-bottom: 1rpx dashed #d9d9d9;
  197. }
  198. .header .result {
  199. margin-bottom: 21rpx;
  200. text-align: center;
  201. color: #808080;
  202. }
  203. .header .result .result-status {
  204. margin-right: 8rpx;
  205. font-size: 28rpx;
  206. color: #1a1a1a;
  207. }
  208. .header .succeed {
  209. margin-bottom: 34rpx;
  210. font-size: 36rpx;
  211. text-align: center;
  212. color: #1a1a1a;
  213. }
  214. .header .photo {
  215. display: flex;
  216. justify-content: center;
  217. margin-bottom: 17rpx;
  218. }
  219. .header .photo .img-box {
  220. position: relative;
  221. border-radius: 50%;
  222. }
  223. .header .photo .img-box:first-child:before {
  224. position: absolute;
  225. top: -20rpx;
  226. left: -30rpx;
  227. display: block;
  228. content: "拼主";
  229. width: 61rpx;
  230. height: 39rpx;
  231. background: #ffdc2f;
  232. border: 4rpx solid #ffffff;
  233. border-radius: 24rpx;
  234. font-size: 24rpx;
  235. text-align: center;
  236. line-height: 39rpx;
  237. z-index: 3;
  238. }
  239. .header .photo .img {
  240. width: 89rpx;
  241. height: 89rpx;
  242. margin-right: 30rpx;
  243. border-radius: 50%;
  244. }
  245. .header .photo .first-img {
  246. position: relative;
  247. width: 95rpx;
  248. height: 95rpx;
  249. margin-top: -10rpx;
  250. }
  251. .header .photo .empty-img {
  252. width: 91rpx;
  253. height: 91rpx;
  254. background: #ffffff;
  255. border: 2rpx dashed #999999;
  256. border-radius: 50%;
  257. text-align: center;
  258. line-height: 91rpx;
  259. color: #999999;
  260. font-size: 40rpx;
  261. }
  262. .header .share-text {
  263. font-size: 24rpx;
  264. font-family: "PingFang SC, PingFang SC-Regular";
  265. font-weight: 400;
  266. text-align: center;
  267. color: #808080;
  268. }
  269. .gary {
  270. height: 10rpx;
  271. background: #f5f5f5;
  272. }
  273. .detail {
  274. padding: 30rpx 30rpx 30rpx;
  275. font-size: 28rpx;
  276. font-family: "PingFang SC, PingFang SC-Regular";
  277. font-weight: 400;
  278. color: #808080;
  279. background-color: #ffffff;
  280. }
  281. .detail .title {
  282. margin-bottom: 20rpx;
  283. font-family: "PingFang SC, PingFang SC-Bold";
  284. font-weight: 700;
  285. color: #060606;
  286. }
  287. .detail .flow {
  288. display: flex;
  289. justify-content: space-between;
  290. align-items: center;
  291. margin-bottom: 30rpx;
  292. }
  293. .detail .flow .flow-introduce {
  294. display: flex;
  295. flex-direction: column;
  296. align-items: center;
  297. }
  298. .detail .flow .flow-img {
  299. width: 40rpx;
  300. height: 40rpx;
  301. margin-bottom: 10rpx;
  302. }
  303. .detail .flow .flow-introduce:nth-child(1) .flow-img {
  304. width: 39rpx;
  305. height: 32rpx;
  306. }
  307. .detail .flow .flow-introduce:nth-child(2) .flow-img {
  308. width: 31rpx;
  309. height: 28rpx;
  310. }
  311. .detail .flow .flow-introduce:nth-child(3) .flow-img {
  312. width: 38rpx;
  313. height: 32rpx;
  314. }
  315. .detail .flow .flow-introduce:nth-child(4) .flow-img {
  316. width: 27rpx;
  317. height: 31rpx;
  318. }
  319. .detail .flow .flow-introduce:nth-child(5) .flow-img {
  320. width: 32rpx;
  321. height: 32rpx;
  322. }
  323. .detail .flow .right-arrow {
  324. width: 35rpx;
  325. height: 21rpx;
  326. margin-bottom: 40rpx;
  327. }
  328. .detail .tip {
  329. margin-bottom: 20rpx;
  330. }
  331. .detail .label {
  332. display: flex;
  333. justify-content: space-between;
  334. align-items: center;
  335. margin-bottom: 15rpx;
  336. }
  337. .label .price {
  338. font-size: 20rpx;
  339. font-family: "PingFang SC, PingFang SC-Medium";
  340. font-weight: 700;
  341. color: #ec2e26;
  342. }
  343. .label .price .num {
  344. font-size: 32rpx;
  345. }
  346. .detail .label .label-text {
  347. flex-shrink: 0;
  348. color: #060606;
  349. }
  350. .share {
  351. padding: 30rpx;
  352. background-color: #fff;
  353. font-family: "PingFang SC, PingFang SC-Regular";
  354. font-weight: 400;
  355. font-size: 24rpx;
  356. color: #1a1a1a;
  357. }
  358. .share .title {
  359. margin-bottom: 15rpx;
  360. font-size: 28rpx;
  361. font-family: "PingFang SC, PingFang SC-Bold";
  362. font-weight: 700;
  363. }
  364. .share .share-people {
  365. display: flex;
  366. align-items: center;
  367. margin-bottom: 20rpx;
  368. font-size: 30rpx;
  369. }
  370. .share .share-people .avater {
  371. width: 83rpx;
  372. height: 83rpx;
  373. border-radius: 50%;
  374. margin-right: 18rpx;
  375. }
  376. .share .share-people .time {
  377. margin-left: auto;
  378. color: #999999;
  379. }
  380. .share .share-text {
  381. color: #666666;
  382. }
  383. .footer {
  384. position: fixed;
  385. bottom: 0;
  386. width: 100%;
  387. padding-bottom: constant(safe-area-inset-bottom);
  388. padding-bottom: env(safe-area-inset-bottom);
  389. background-color: #fff;
  390. }
  391. .footer .btn-box {
  392. display: flex;
  393. padding: 30rpx 30rpx 0;
  394. justify-content: center;
  395. align-items: center;
  396. }
  397. .footer .btn {
  398. /* width: 220rpx; */
  399. flex: 1;
  400. height: 85rpx;
  401. background: #fffae1;
  402. border: 1rpx solid #ffa836;
  403. border-radius: 44rpx;
  404. text-align: center;
  405. line-height: 85rpx;
  406. font-size: 30rpx;
  407. font-family: "PingFang SC, PingFang SC-Regular";
  408. font-weight: 400;
  409. color: #ffa836;
  410. box-sizing: border-box;
  411. margin-right: 20rpx;
  412. }
  413. .footer .btn:last-child {
  414. margin-right: 0;
  415. }
  416. .footer .orange-btn {
  417. background: #ffa022;
  418. color: #1a1a1a;
  419. border: none;
  420. }
  421. .footer .yellow-btn {
  422. background: #ffdc2f;
  423. color: #1a1a1a;
  424. border: none;
  425. }
  426. .footer .text {
  427. height: 90rpx;
  428. text-align: center;
  429. line-height: 90rpx;
  430. font-size: 28rpx;
  431. font-family: "PingFang SC, PingFang SC-Bold";
  432. font-weight: 700;
  433. color: #ffa836;
  434. background: #fffae1;
  435. }
  436. .footer .refuse-text {
  437. color: #ff1010;
  438. background: #fff2f2;
  439. }
  440. .contactBox {
  441. position: fixed;
  442. top: 0;
  443. left: 0;
  444. width: 100%;
  445. height: 100%;
  446. background-color: rgba(0, 0, 0, 0.5);
  447. z-index: 9;
  448. box-sizing: border-box;
  449. }
  450. .contactBox .box {
  451. position: absolute;
  452. bottom: 0;
  453. width: 100%;
  454. padding: 30rpx;
  455. border-radius: 20rpx 20rpx 0 0;
  456. background-color: #fff;
  457. box-sizing: border-box;
  458. }
  459. .contactItem {
  460. display: flex;
  461. justify-content: space-around;
  462. align-items: center;
  463. font-size: 30rpx;
  464. color: #1a1a1a;
  465. padding: 30rpx 0;
  466. }
  467. .contactBox .cancel {
  468. padding: 30rpx 0;
  469. text-align: center;
  470. }
  471. .contactBox .gary {
  472. height: 10rpx;
  473. background-color: #f3f3f3;
  474. }