appointOrder.wxss 23 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328
  1. .container {
  2. padding: 30rpx 24rpx 180rpx;
  3. }
  4. view,
  5. text {
  6. font-size: 30rpx;
  7. color: #333;
  8. box-sizing: border-box;
  9. }
  10. .address-block {
  11. background: #FFFFFF;
  12. border-radius: 10rpx;
  13. padding: 30rpx 20rpx 24rpx;
  14. display: flex;
  15. align-items: center;
  16. justify-content: space-between;
  17. }
  18. .address-wrapper {
  19. width: 610rpx;
  20. height: 90rpx;
  21. }
  22. .address-block .tips {
  23. display: flex;
  24. align-items: center;
  25. height: 30rpx;
  26. }
  27. .tips image {
  28. width: 30rpx;
  29. height: 30rpx;
  30. margin-right: 10rpx;
  31. }
  32. .tips view {
  33. line-height: 30rpx;
  34. font-size: 30rpx;
  35. }
  36. .address-block .detail {
  37. padding-left: 38rpx;
  38. margin-top: 18rpx;
  39. line-height: 40rpx;
  40. font-size: 26rpx;
  41. overflow: hidden;
  42. height: 40rpx;
  43. text-overflow: ellipsis;
  44. white-space: nowrap;
  45. }
  46. .arrow-img {
  47. width: 14rpx;
  48. height: 24rpx;
  49. }
  50. .product-block {
  51. background: #FFFFFF;
  52. border-radius: 24rpx;
  53. padding: 24rpx;
  54. margin: 24rpx 0;
  55. }
  56. .product-block .title {
  57. height: 88rpx;
  58. line-height: 78rpx;
  59. }
  60. .profuct-info {
  61. height: 190rpx;
  62. display: flex;
  63. align-items: flex-start;
  64. }
  65. .product-img {
  66. width: 190rpx;
  67. height: 190rpx;
  68. border-radius: 10rpx;
  69. margin-right: 20rpx;
  70. }
  71. .info-right {
  72. /* padding-top: 10rpx; */
  73. flex: 1;
  74. }
  75. .info-main {
  76. display: flex;
  77. height: 40rpx;
  78. align-items: center;
  79. justify-content: space-between;
  80. /* margin-bottom: 58rpx; */
  81. }
  82. .info-right .sku-name {
  83. color: #666666;
  84. font-size: 24rpx;
  85. margin: 10rpx 0;
  86. height: 34rpx;
  87. line-height: 34rpx;
  88. display: flex;
  89. justify-content: space-between;
  90. }
  91. .product-name {
  92. line-height: 40rpx;
  93. font-size: 28rpx;
  94. /* padding-left: 20rpx;
  95. text-indent: -16rpx; */
  96. overflow: hidden;
  97. text-overflow: ellipsis;
  98. white-space: nowrap;
  99. width: 328rpx;
  100. font-weight: bold;
  101. color: rgba(0, 0, 0, 0.9);
  102. }
  103. .info-main .price {
  104. color: rgba(0, 0, 0, 0.9);
  105. font-size: 18rpx;
  106. font-weight: bold;
  107. }
  108. .info-right .other-info {
  109. font-size: 24rpx;
  110. color: rgba(0, 0, 0, 0.9);
  111. line-height: 34rpx;
  112. }
  113. .appoint-main-module {
  114. margin-top: 24rpx;
  115. background: #FFFFFF;
  116. border-radius: 24rpx;
  117. padding: 8rpx 24rpx 44rpx;
  118. }
  119. .appoint-block {
  120. height: 72rpx;
  121. display: flex;
  122. align-items: center;
  123. border-bottom: 2rpx solid #E0E0E0;
  124. }
  125. .appoint-block .title {
  126. width: 136rpx;
  127. border-bottom: 2rpx solid #fff;
  128. font-size: 26rpx;
  129. font-weight: bold;
  130. z-index: 9;
  131. height: 72rpx;
  132. line-height: 72rpx;
  133. }
  134. .appoint-block .title text {
  135. color: #f00;
  136. }
  137. .appoint-time {
  138. flex: 1;
  139. color: #ACADB1;
  140. padding-left: 4rpx;
  141. font-size: 24rpx;
  142. }
  143. .appoint-timed {
  144. flex: 1;
  145. padding-left: 4rpx;
  146. color: #333;
  147. font-size: 26rpx;
  148. }
  149. .appoint-block .arrow-img {
  150. width: 24rpx;
  151. height: 24rpx;
  152. margin-left: 8rpx;
  153. }
  154. .appoint-btn {
  155. position: fixed;
  156. bottom: 56rpx;
  157. left: 50rpx;
  158. right: 50rpx;
  159. height: 90rpx;
  160. width: 690rpx;
  161. border-radius: 90rpx;
  162. line-height: 90rpx;
  163. text-align: center;
  164. color: #fff;
  165. background: linear-gradient(90deg, #00BAFF 0%, #008DFF 100%);
  166. font-size: 36rpx;
  167. }
  168. .appoint-overlay-wrapper {
  169. position: fixed;
  170. top: 0;
  171. left: 0;
  172. width: 100%;
  173. height: 100%;
  174. background-color: rgba(0, 0, 0, .7);
  175. z-index: 999;
  176. }
  177. .remark-text {
  178. font-size: 26rpx;
  179. white-space: nowrap;
  180. overflow: hidden;
  181. text-overflow: ellipsis;
  182. width: 486rpx;
  183. padding-left: 40rpx;
  184. margin: 0 10rpx 0 20rpx;
  185. text-align: right;
  186. }
  187. .remark-popup {
  188. position: fixed;
  189. left: 0;
  190. right: 0;
  191. bottom: 0;
  192. height: 860rpx;
  193. background: #fff;
  194. border-radius: 20rpx 20rpx 0px 0px;
  195. padding: 40rpx 30rpx 50rpx;
  196. z-index: 9999;
  197. }
  198. .remark-popup .title {
  199. height: 30rpx;
  200. line-height: 30rpx;
  201. font-size: 30rpx;
  202. color: #333333;
  203. }
  204. .remark-textarea {
  205. width: 690rpx;
  206. height: 240rpx;
  207. background: #F8F8F8;
  208. border-radius: 10rpx;
  209. padding: 20rpx 36rpx 36rpx 20rpx;
  210. font-size: 26rpx;
  211. line-height: 40rpx;
  212. margin: 30rpx 0 330rpx;
  213. box-sizing: border-box;
  214. }
  215. .remark-popup .btn {
  216. width: 690rpx;
  217. height: 100rpx;
  218. background: #00B9FF;
  219. border-radius: 50rpx;
  220. line-height: 100rpx;
  221. font-size: 30rpx;
  222. text-align: center;
  223. color: #fff;
  224. }
  225. .address-item {
  226. display: flex;
  227. min-height: 136rpx;
  228. background: #fff;
  229. padding: 30rpx 20rpx;
  230. border-radius: 10rpx;
  231. }
  232. .address-item.address-empty {
  233. line-height: 75rpx;
  234. text-align: center;
  235. }
  236. .address-item .map-icon {
  237. width: 28rpx;
  238. height: 30rpx;
  239. margin: 6rpx 10rpx 0 0;
  240. }
  241. .address-box .l {
  242. width: 125rpx;
  243. height: 100%;
  244. }
  245. .address-box .l .name {
  246. margin-left: 6.25rpx;
  247. margin-top: -7.25rpx;
  248. display: block;
  249. width: 125rpx;
  250. height: 43rpx;
  251. line-height: 43rpx;
  252. font-size: 30rpx;
  253. color: #333;
  254. margin-bottom: 5rpx;
  255. }
  256. .address-box .l .default {
  257. margin-left: 6.25rpx;
  258. display: block;
  259. width: 62rpx;
  260. height: 33rpx;
  261. border-radius: 5rpx;
  262. border: 1px solid #b4282d;
  263. font-size: 20.5rpx;
  264. text-align: center;
  265. line-height: 29rpx;
  266. color: #b4282d;
  267. }
  268. .address-box .m {
  269. flex: 1;
  270. }
  271. .address-box .mobile {
  272. display: block;
  273. height: 29rpx;
  274. line-height: 29rpx;
  275. margin-bottom: 6.25rpx;
  276. font-size: 26rpx;
  277. }
  278. .address-box .address {
  279. display: block;
  280. /* height: 30rpx; */
  281. line-height: 32rpx;
  282. font-size: 30rpx;
  283. margin: 0 0 16rpx 0;
  284. }
  285. .address-bottom {
  286. color: #999;
  287. line-height: 28rpx;
  288. height: 28rpx;
  289. font-size: 26rpx;
  290. }
  291. .address-bottom .user-name {
  292. margin: 0 32rpx 0 0;
  293. }
  294. .address-box .r {
  295. width: 30rpx;
  296. height: 90rpx;
  297. display: flex;
  298. justify-content: flex-end;
  299. align-items: center;
  300. }
  301. .address-box .r image {
  302. width: 14rpx;
  303. height: 24rpx;
  304. }
  305. .popup-wrapper view {
  306. color: #888;
  307. font-size: 30rpx;
  308. }
  309. .popup-content {
  310. flex: 1;
  311. }
  312. /* .popup-title {
  313. height: 96rpx;
  314. line-height: 96rpx;
  315. text-align: center;
  316. border-bottom: 1rpx solid #ddd;
  317. font-size: 15px !important;
  318. } */
  319. /* .popup-content {
  320. display: flex;
  321. }
  322. .time-select-left {
  323. border-right: 1rpx solid #ddd;
  324. padding: 0 8rpx 0 20rpx;
  325. width:370rpx;
  326. }
  327. .time-select-right {
  328. flex: 1;
  329. height: 900rpx;
  330. overflow-y: hidden;
  331. }
  332. .time-select-left-item{
  333. height: 108rpx;
  334. display: flex;
  335. flex-direction: column;
  336. padding:4rpx 0;
  337. }
  338. .date-line-wrapper{
  339. flex:1;
  340. display: flex;
  341. align-items:center;
  342. }
  343. .time-select-left-item .date-msg{
  344. height:36rpx;
  345. line-height: 36rpx;
  346. color: #888;
  347. font-size: 24rpx;
  348. }
  349. .time-select-left-item .date-msg.avail-date{
  350. color:#3FA10D;
  351. font-weight: bold;
  352. }
  353. .popup-wrapper .popup-content .current-date {
  354. color: #09afff;
  355. font-weight: bold;
  356. }
  357. view.popup-wrapper .time-select-right-item {
  358. line-height: 104rpx;
  359. height: 104rpx;
  360. border-bottom: 1rpx solid #ddd;
  361. display: flex;
  362. align-items: flex-start;
  363. flex-direction: column;
  364. padding: 0 24rpx;
  365. justify-content: center;
  366. }
  367. .time-select-right-item view {
  368. color: #6D7278;
  369. } */
  370. view.popup-btn-wrapper {
  371. margin: 20rpx 0 0;
  372. padding: 0 24rpx 20rpx;
  373. }
  374. view.popup-btn-wrapper button>view {
  375. color: #fff;
  376. }
  377. /* view.popup-wrapper .date-tag {
  378. color: #09afff;
  379. height: 44rpx;
  380. line-height: 42rpx;
  381. width: 76rpx;
  382. border: 2rpx solid #09afff;
  383. border-radius: 44rpx;
  384. text-align: center;
  385. font-weight: normal;
  386. font-size: 22rpx;
  387. display: inline-block;
  388. margin-left:8rpx;
  389. }
  390. view.popup-wrapper .full-time {
  391. color: #09AFFF;
  392. font-size: 24rpx;
  393. margin: 0 0 0 20rpx;
  394. height: 44rpx;
  395. line-height: 44rpx;
  396. float: right;
  397. padding-right: 40rpx;
  398. }
  399. .first-appoint-date-item {
  400. height: 108rpx;
  401. display: flex;
  402. align-items: center;
  403. padding: 0 0 0 240rpx;
  404. }
  405. .first-time-selected {
  406. margin: 0 0 0 60rpx;
  407. } */
  408. .select-week-times {
  409. border-top: 1rpx solid #ddd;
  410. }
  411. /* .week-select-left {
  412. flex: 1.2;
  413. }
  414. .week-select-left>view.time-select-left-item {
  415. padding: 0 0 0 60rpx;
  416. display: flex;
  417. align-items: flex-start;
  418. justify-content: flex-start;
  419. flex-direction: row;
  420. padding: 10rpx 0 0 60rpx;
  421. }
  422. .week-select-left>view.time-select-left-item .week-str {
  423. padding: 12rpx 0 0 0;
  424. }
  425. */
  426. /* view.popup-wrapper view.select-num-tag {
  427. width: 32rpx;
  428. height: 32rpx;
  429. line-height: 32rpx;
  430. background: #09AFFF;
  431. border-radius: 34rpx;
  432. font-size: 20rpx;
  433. color: #fff;
  434. text-align: center;
  435. margin: 0 0 0 6rpx;
  436. } */
  437. /* .popup-content-special {
  438. position: relative;
  439. } */
  440. /*
  441. .popup-title-special {
  442. position: absolute;
  443. } */
  444. /* .popup-content-special {
  445. height: 900rpx;
  446. margin-top: 116rpx;
  447. }
  448. .popup-content-special .time-select-left {
  449. height: 900rpx;
  450. overflow-y: scroll;
  451. }
  452. */
  453. .stock-text {
  454. font-size: 20rpx;
  455. font-weight: normal;
  456. color: #888
  457. }
  458. .zero-stock {
  459. color: #ccc;
  460. }
  461. .appoint-overlay-wrapper {
  462. position: fixed;
  463. top: 0;
  464. left: 0;
  465. width: 100%;
  466. height: 100%;
  467. background-color: rgba(0, 0, 0, .7);
  468. z-index: 999;
  469. }
  470. /* 选择时间 */
  471. view.popup-wrapper {
  472. /* padding: 0 0 20rpx; */
  473. color: #333;
  474. display: flex;
  475. flex-direction: column;
  476. justify-content: space-between;
  477. /* height: 80%; */
  478. position: fixed;
  479. left: 0;
  480. right: 0;
  481. bottom: 0;
  482. background: #fff;
  483. padding-bottom: constant(safe-area-inset-bottom);
  484. padding-bottom: env(safe-area-inset-bottom);
  485. z-index: 9999;
  486. border-radius: 36rpx 36rpx 0rpx 0rpx;
  487. overflow: hidden;
  488. }
  489. view.popup-wrapper view.confirm-btn {
  490. background: #09AFFF;
  491. height: 88rpx;
  492. line-height: 88rpx;
  493. border-radius: 88rpx;
  494. text-align: center;
  495. color: #fff;
  496. }
  497. .go-pay-wrapper {
  498. padding-bottom: constant(safe-area-inset-bottom);
  499. padding-bottom: env(safe-area-inset-bottom);
  500. }
  501. .go-pay-wrapper view {
  502. background: #09AFFF;
  503. height: 88rpx;
  504. line-height: 88rpx;
  505. border-radius: 88rpx;
  506. text-align: center;
  507. color: #fff;
  508. }
  509. .appoint-tabs-wrapper {
  510. height: 88rpx;
  511. display: flex;
  512. align-items: center;
  513. line-height: 88rpx;
  514. justify-content: space-around;
  515. background: #fff;
  516. }
  517. .appoint-tab-item.active {
  518. color: #09AFFF;
  519. border-bottom: 4rpx solid #09afff;
  520. }
  521. .order-info {
  522. background: #FFFFFF;
  523. border-radius: 24rpx;
  524. padding: 20rpx 24rpx;
  525. }
  526. .order-info .order-top {
  527. display: flex;
  528. align-items: center;
  529. height: 36rpx;
  530. margin-bottom: 6rpx;
  531. }
  532. .order-top view {
  533. font-size: 26rpx;
  534. color: #333;
  535. }
  536. .order-top view.topic {
  537. color: #666;
  538. margin-right: 16rpx;
  539. }
  540. .order-top .copy-img {
  541. width: 24rpx;
  542. height: 24rpx;
  543. margin-left: 20rpx;
  544. }
  545. .order-bottom {
  546. border-top: 2rpx solid #E0E0E0;
  547. margin-top: 14rpx;
  548. padding-top: 16rpx;
  549. }
  550. .order-price,
  551. .coupon-price {
  552. display: flex;
  553. align-items: center;
  554. height: 36rpx;
  555. margin-bottom: 6rpx;
  556. justify-content: space-between;
  557. }
  558. .order-price view,
  559. .coupon-price view {
  560. font-size: 26rpx;
  561. color: rgba(0, 0, 0, 0.9);
  562. font-weight: bold;
  563. }
  564. .order-price view.topic,
  565. .coupon-price view.topic {
  566. color: #666;
  567. margin-right: 16rpx;
  568. font-weight: normal;
  569. }
  570. .order-bottom .real-price {
  571. display: flex;
  572. align-items: center;
  573. height: 36rpx;
  574. justify-content: flex-end;
  575. font-size: 26rpx;
  576. font-weight: bold;
  577. }
  578. .order-bottom .real-price text {
  579. color: #FF004E;
  580. font-size: 26rpx;
  581. }
  582. /* 顶部地址 */
  583. .address-select {
  584. padding: 22rpx 24rpx 22rpx 30rpx;
  585. background: #FFFFFF;
  586. border-radius: 24rpx;
  587. display: flex;
  588. align-items: center;
  589. min-height: 132rpx;
  590. }
  591. .address-select .map-img {
  592. width: 48rpx;
  593. height: 48rpx;
  594. margin-right: 24rpx;
  595. }
  596. .address-main {
  597. display: flex;
  598. flex-direction: column;
  599. flex: 1;
  600. }
  601. .address-main .main-line {
  602. display: flex;
  603. height: 44rpx;
  604. margin-bottom: 4rpx;
  605. align-items: center;
  606. }
  607. .main-line view {
  608. color: #333333;
  609. font-size: 32rpx;
  610. }
  611. .main-line view.phone {
  612. color: #999999;
  613. font-size: 24rpx;
  614. margin-left: 14rpx;
  615. }
  616. .customer-info .customer-address {
  617. color: #666666;
  618. line-height: 40rpx;
  619. }
  620. .address-select .arrow-img {
  621. width: 28rpx;
  622. height: 28rpx;
  623. margin-left: 20rpx;
  624. }
  625. /* 地址选择 */
  626. .appoint-overlay-wrapper.address-overlay {
  627. display: flex;
  628. align-items: flex-end;
  629. }
  630. .address-popup {
  631. width: 750rpx;
  632. padding: 0 24rpx 0rpx;
  633. background: #FFFFFF;
  634. border-radius: 56rpx 56rpx 0 0;
  635. }
  636. .address-popup .title {
  637. font-weight: 600;
  638. color: #191919;
  639. font-size: 28rpx;
  640. height: 122rpx;
  641. line-height: 122rpx;
  642. text-align: center;
  643. }
  644. .address-list {
  645. height: 720rpx;
  646. overflow-y: scroll;
  647. padding-bottom: 20rpx;
  648. }
  649. .address-popup .add-address-btn {
  650. width: 654rpx;
  651. margin: 40rpx 24rpx 40rpx;
  652. height: 90rpx;
  653. background: linear-gradient(90deg, #00BAFF 0%, #008DFF 100%);
  654. border-radius: 45rpx;
  655. font-size: 36rpx;
  656. text-align: center;
  657. color: rgba(255, 255, 255, 0.9);
  658. line-height: 90rpx;
  659. }
  660. .address-item {
  661. width: 702rpx;
  662. display: flex;
  663. align-items: center;
  664. min-height: 132rpx;
  665. border-radius: 24rpx;
  666. border: 2rpx solid #E3E3E3;
  667. margin-bottom: 30rpx;
  668. }
  669. .address-item .arrow-img {
  670. width: 28rpx;
  671. height: 28rpx;
  672. margin-left: 20rpx;
  673. }
  674. .address-item .map-img {
  675. width: 48rpx;
  676. height: 48rpx;
  677. margin-right: 24rpx;
  678. }
  679. /* 选择备注 */
  680. .appoint-overlay-wrapper.remark-overlay {
  681. display: flex;
  682. align-items: flex-end;
  683. justify-content: center;
  684. }
  685. .remark-select {
  686. width: 750rpx;
  687. padding: 0 24rpx 56rpx;
  688. background: #FFFFFF;
  689. border-radius: 24rpx 24rpx 0 0;
  690. }
  691. .remark-select .title {
  692. font-weight: 600;
  693. color: #191919;
  694. font-size: 30rpx;
  695. height: 90rpx;
  696. line-height: 90rpx;
  697. text-align: center;
  698. border-bottom: 2rpx solid #E0E0E0;
  699. }
  700. .remark-item .remark-value {
  701. color: #191919;
  702. font-size: 26rpx;
  703. font-weight: bold;
  704. flex: 1;
  705. text-align: left;
  706. }
  707. .remark-list .remark-item {
  708. height: 84rpx;
  709. display: flex;
  710. border-bottom: 2rpx solid #E0E0E0;
  711. align-items: center;
  712. }
  713. .remark-item .radio-img {
  714. width: 26rpx;
  715. height: 26rpx;
  716. }
  717. .remark-conf-btn {
  718. width: 652rpx;
  719. height: 90rpx;
  720. line-height: 90rpx;
  721. border-radius: 90rpx;
  722. border: 4rpx solid #FF8219;
  723. text-align: center;
  724. font-size: 36rpx;
  725. color: #FF8219;
  726. margin: 0 auto;
  727. margin-top: 54rpx;
  728. }
  729. /* 地址输入 */
  730. .add-address .add-form {
  731. background: #fff;
  732. width: 702rpx;
  733. border-radius: 25rpx;
  734. padding: 4rpx 24rpx 24rpx;
  735. }
  736. .add-address .form-item {
  737. height: 78rpx;
  738. display: flex;
  739. align-items: center;
  740. }
  741. .add-address .input {
  742. flex: 1;
  743. /* height: 78rpx; */
  744. /* line-height: 44rpx; */
  745. /* overflow: hidden; */
  746. font-size: 26rpx;
  747. color: #333;
  748. padding-top: 24rpx;
  749. }
  750. .add-address .label {
  751. font-size: 26rpx;
  752. font-weight: bold;
  753. width: 160rpx;
  754. text-align: left;
  755. color: rgba(0, 0, 0, 0.9);
  756. }
  757. .add-address .label text {
  758. color: #FF0000;
  759. }
  760. .add-address .content {
  761. border-bottom: 2rpx solid #E0E0E0;
  762. /* height: 88rpx; */
  763. /* line-height: 88rpx; */
  764. align-content: center;
  765. flex: 1;
  766. display: flex;
  767. align-items: center;
  768. padding-bottom: 8rpx;
  769. height: 78rpx;
  770. }
  771. .gender-wrapper image {
  772. width: 26rpx;
  773. height: 26rpx;
  774. margin-right: 10rpx;
  775. }
  776. .gender-wrapper {
  777. display: flex;
  778. /* align-items: center;
  779. */
  780. height: 78rpx;
  781. justify-content: space-between;
  782. width: 220rpx;
  783. }
  784. .male,
  785. .female {
  786. display: flex;
  787. align-items: center;
  788. height: 78rpx;
  789. padding-top: 24rpx;
  790. }
  791. .male text,
  792. .female text {
  793. color: #ACADB1;
  794. font-size: 24rpx;
  795. }
  796. /* .noon-select{
  797. height:64rpx;
  798. display: flex;
  799. border-bottom:1rpx solid #ddd;
  800. } */
  801. /* .time-select-right .noon-item{
  802. flex:1;
  803. text-align: center;
  804. line-height: 64rpx;
  805. color: #979797;
  806. font-size: 26rpx;
  807. } */
  808. /* .time-select-right view.noon-item.active-noon{
  809. color: #fff;
  810. background: #09afff;
  811. } */
  812. view.popup-wrapper .time-select-right-item .date-tag{
  813. width: 80rpx;
  814. height: 40rpx;
  815. line-height: 38rpx;
  816. margin-left:0;
  817. /* margin-left:120rpx; */
  818. }
  819. .popup-title-new.popup-title{
  820. display: flex;
  821. flex-direction: column;
  822. font-weight: bold;
  823. padding: 30rpx;
  824. font-size: 40rpx;
  825. /* justify-content: center;
  826. align-items: center;
  827. height:116rpx;
  828. line-height: normal; */
  829. }
  830. .popup-title-new view{
  831. color:#333;
  832. font-size: 32rpx;
  833. }
  834. .popup-title-new view.fee-tips{
  835. color: #FF5735;
  836. font-size: 22rpx;
  837. }
  838. .time-select-right-item text{
  839. color:#888;
  840. }
  841. .time-select-right .time-item-wrapper{
  842. height: 836rpx;
  843. overflow-y: scroll;
  844. }
  845. .time-line{
  846. display: flex;
  847. align-items: center;
  848. justify-content: space-between;
  849. width:100%;
  850. }
  851. /* view.popup-wrapper .time-select-right-item.invalid-time text{
  852. color: #999;
  853. }
  854. view.popup-wrapper .time-select-right-item.invalid-time{
  855. background: #eee;
  856. } */
  857. /* .time-select-right-item view.time-msg{
  858. height: 40rpx;
  859. line-height: 38rpx;
  860. border-radius: 40rpx;
  861. padding:0 8rpx;
  862. font-size: 22rpx;
  863. border: 2rpx solid #999;
  864. color: #999;
  865. font-weight: normal;
  866. white-space: nowrap;
  867. } */
  868. .time-select-right-item text.extra-tips{
  869. color: #FF5735;
  870. font-size: 22rpx;
  871. }
  872. .notice-block{
  873. background: #fff;
  874. border-radius:24rpx;
  875. padding:20rpx 24rpx;
  876. margin-bottom:24rpx;
  877. }
  878. .notice-title{
  879. font-weight: bold;
  880. font-size: 26rpx;
  881. line-height: 60rpx;
  882. }
  883. .notice-item{
  884. display: flex;
  885. align-items: flex-start;
  886. }
  887. .notice-index{
  888. width:36rpx;
  889. }
  890. .notice-item view {
  891. font-size: 26rpx;
  892. line-height: 40rpx;
  893. color:#666;
  894. }
  895. .notice-item view:last-child{
  896. flex:1;
  897. text-align: justify;
  898. }
  899. /* 时间弹框相关 */
  900. .week-select-left {
  901. display: flex;
  902. justify-content: space-around;
  903. text-align: center;
  904. }
  905. .popup-wrapper view {
  906. color: #888;
  907. font-size: 30rpx;
  908. }
  909. .popup-content {
  910. flex: 1;
  911. }
  912. .appointment-tips {
  913. display: flex;
  914. justify-content: space-between;
  915. width: 178px;
  916. position: absolute;
  917. bottom: 60rpx;
  918. left: calc(50% - 89px);
  919. }
  920. .appointment-tips1 {
  921. position: absolute;
  922. bottom: 120rpx;
  923. }
  924. .appointment-tips view span {
  925. width: 20rpx;
  926. height: 20rpx;
  927. border-radius: 20rpx;
  928. background-color: #EDF8FD;
  929. display: inline-block;
  930. margin-right: 10rpx;
  931. }
  932. .appointment-tips view .selected {
  933. background-color: #09AFFF;
  934. }
  935. .appointment-tips view .no-appointment {
  936. background-color: #ccc;
  937. }
  938. .appointment-tips view text {
  939. color: #09AFFF;
  940. font-size: 24rpx;
  941. }
  942. .time-select-left {
  943. padding: 0 8rpx 0 20rpx;
  944. width: 370rpx;
  945. }
  946. .time-select-right {
  947. flex: 1;
  948. display: flex;
  949. justify-content: space-between;
  950. }
  951. .scroll-view_H {
  952. white-space: nowrap;
  953. /* 确保子元素在同一行内显示 */
  954. overflow-x: scroll;
  955. /* 允许横向滚动 */
  956. }
  957. .time-select-left-item {
  958. height: 84rpx;
  959. display: flex;
  960. flex-direction: column;
  961. padding: 4rpx 0;
  962. width: 20vw;
  963. justify-content: center;
  964. align-items: center;
  965. }
  966. .date-line-wrapper {
  967. display: flex;
  968. flex-direction: column;
  969. align-items: center;
  970. }
  971. .time-select-left-item .date-msg {
  972. height: 36rpx;
  973. line-height: 36rpx;
  974. color: #292929;
  975. font-size: 36rpx;
  976. font-weight: bold;
  977. }
  978. .time-select-left-item .date-msg1 {
  979. color: #292929;
  980. font-size: 22rpx;
  981. margin-top: 10rpx;
  982. margin-bottom: 6rpx;
  983. }
  984. .time-select-left-item .date-msg.avail-date {
  985. color: #999 !important;
  986. font-weight: bold;
  987. }
  988. .time-select-left-item .date-msg1.avail-date {
  989. color: #999 !important;
  990. font-weight: bold;
  991. }
  992. .popup-wrapper .popup-content .current-date {
  993. color: #09AFFF !important;
  994. }
  995. view.popup-btn-wrapper view {
  996. color: #fff;
  997. }
  998. .time-select-middle {
  999. background-color: #FCFCFC;
  1000. padding: 10rpx 0rpx;
  1001. height: 800rpx;
  1002. position: relative;
  1003. }
  1004. .noon-select {
  1005. width: 100%;
  1006. display: flex;
  1007. justify-content: center;
  1008. margin: 30rpx auto;
  1009. }
  1010. .noon-select .divider {
  1011. height: 40rpx;
  1012. width: 2rpx;
  1013. background-color: #e5e5e5;
  1014. }
  1015. .noon-select .noon-item {
  1016. text-align: center;
  1017. color: #979797;
  1018. font-size: 36rpx;
  1019. width: 49%;
  1020. }
  1021. .active-noon {
  1022. text-align: center;
  1023. color: #09AFFF !important;
  1024. font-size: 36rpx !important;
  1025. width: 49%;
  1026. }
  1027. .popup-title-new.popup-title {
  1028. display: flex;
  1029. flex-direction: column;
  1030. font-size: 20px;
  1031. font-weight: bold;
  1032. text-align: left;
  1033. padding: 30rpx;
  1034. }
  1035. .popup-title-new view {
  1036. color: #000;
  1037. font-size: 40rpx;
  1038. font-weight: bold;
  1039. }
  1040. .popup-title-new view.fee-tips {
  1041. color: #09AFFF;
  1042. font-size: 22rpx;
  1043. }
  1044. .current-line {
  1045. width: 38rpx;
  1046. height: 6rpx;
  1047. background: #09AFFF;
  1048. border-radius: 6rpx;
  1049. margin: auto;
  1050. opacity: 1;
  1051. }
  1052. .current-line0 {
  1053. width: 38rpx;
  1054. height: 6rpx;
  1055. background: #09AFFF;
  1056. border-radius: 6rpx;
  1057. margin: auto;
  1058. opacity: 0!important;
  1059. }
  1060. .current-time {
  1061. color: #fff !important;
  1062. font-family: AlibabaPuHuiTi_2_65_Medium;
  1063. line-height: 70rpx;
  1064. height: 70rpx;
  1065. background-color: #09AFFF;
  1066. border-radius: 8px;
  1067. font-size: 36rpx;
  1068. }
  1069. .time-item-wrapper {
  1070. display: flex;
  1071. width: 90vw;
  1072. justify-content: flex-start;
  1073. flex-wrap: wrap;
  1074. text-align: center;
  1075. gap: 20px;
  1076. margin: 10px auto;
  1077. }
  1078. .time-item-wrapper .time-msg {
  1079. width: 20%;
  1080. line-height: 70rpx;
  1081. height: 70rpx;
  1082. background-color: #EDF8FD;
  1083. border-radius: 8px;
  1084. font-size: 36rpx;
  1085. font-weight: bold;
  1086. }
  1087. .time-item-wrapper .avail-time {
  1088. width: 20%;
  1089. line-height: 70rpx;
  1090. height: 70rpx;
  1091. background-color: #CCCCCC;
  1092. border-radius: 8px;
  1093. font-size: 36rpx;
  1094. font-weight: bold;
  1095. }
  1096. .first-appoint-date-item {
  1097. height: 108rpx;
  1098. display: flex;
  1099. align-items: center;
  1100. padding: 0 0 0 240rpx;
  1101. font-family: AlibabaPuHuiTi_2_85_Bold;
  1102. }
  1103. .first-appoint-date-item view{
  1104. font-family: AlibabaPuHuiTi_2_85_Bold;
  1105. }
  1106. .first-time-selected {
  1107. margin: 0 0 0 60rpx;
  1108. }
  1109. .week-str {
  1110. font-family: AlibabaPuHuiTi_2_85_Bold;
  1111. font-size: 36rpx !important;
  1112. color: #C2C2C2 !important;
  1113. }
  1114. .time-select-right-item {
  1115. width: 45vw;
  1116. background-color: #feebd7;
  1117. text-align: center;
  1118. margin-bottom: 28rpx;
  1119. font-family: AlibabaPuHuiTi_2_65_Medium;
  1120. line-height: 70rpx;
  1121. height: 70rpx;
  1122. border-radius: 8px;
  1123. }
  1124. .time-select-right-a {
  1125. padding: 10rpx 24rpx;
  1126. display: flex;
  1127. flex-wrap: wrap;
  1128. justify-content: space-between;
  1129. align-content: flex-start;
  1130. }
  1131. .first-appoint-date-list{
  1132. background-color: #fafafa;
  1133. }
  1134. .time-select-bottom {
  1135. width: 100vw;
  1136. background-color: #EDF8FD;
  1137. height: 54rpx;
  1138. font-size: 22rpx !important;
  1139. color: #00b4fe !important;
  1140. line-height: 54rpx;
  1141. padding-left: 30rpx;
  1142. position: absolute;
  1143. bottom: 0;
  1144. }