电速宝
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

index.wxss 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. .container {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. right: 0;
  6. bottom: 0;
  7. display: flex;
  8. flex-direction: column;
  9. }
  10. .map {
  11. width: 100%;
  12. height: 1100rpx;
  13. }
  14. .bottom-panel {
  15. /* position: absolute;
  16. bottom: 0;
  17. left: 0;
  18. right: 0; */
  19. width: 100%;
  20. padding: 16rpx;
  21. box-sizing: border-box;
  22. }
  23. .trip-card {
  24. background-color: white;
  25. border-radius: 16rpx;
  26. padding: 24rpx;
  27. box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  28. }
  29. .location-item {
  30. display: flex;
  31. align-items: flex-start;
  32. margin-bottom: 24rpx;
  33. }
  34. .location-icon {
  35. margin-right: 16rpx;
  36. margin-top: 8rpx;
  37. }
  38. .start-icon .icon-circle {
  39. width: 24rpx;
  40. height: 24rpx;
  41. border-radius: 50%;
  42. background-color: #666;
  43. }
  44. .end-icon .icon-marker {
  45. width: 24rpx;
  46. height: 24rpx;
  47. background-color: #2C85FF;
  48. clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  49. }
  50. .location-input input {
  51. font-size: 32rpx;
  52. color: #333;
  53. width: 560rpx;
  54. }
  55. .trip-info {
  56. margin-top: 16rpx;
  57. padding-top: 16rpx;
  58. border-top: 1rpx solid #eee;
  59. display: flex;
  60. justify-content: space-between;
  61. font-size: 28rpx;
  62. color: #666;
  63. }
  64. /* */
  65. .call-btn {
  66. position: absolute;
  67. bottom: 0;
  68. left: 0;
  69. right: 0;
  70. margin-bottom: 24rpx;
  71. background-color: #00C775;
  72. color: white;
  73. width: 90%;
  74. height: 96rpx;
  75. line-height: 96rpx;
  76. font-size: 34rpx;
  77. border-radius: 48rpx;
  78. box-sizing: border-box;
  79. display: flex;
  80. justify-content:space-around;
  81. }
  82. .call-btn_left_electricity{
  83. width: 50%;
  84. height: 100%;
  85. }
  86. .call-btn_right_electricity{
  87. width: 50%;
  88. height: 100%;
  89. border-left: 4rpx solid #ffffff;
  90. }
  91. .driver-info {
  92. background-color: white;
  93. border-radius: 16rpx;
  94. padding: 24rpx;
  95. box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  96. display: flex;
  97. align-items: center;
  98. margin-top: 26rpx;
  99. }
  100. .driver-avatar {
  101. width: 100rpx;
  102. height: 100rpx;
  103. border-radius: 50%;
  104. }
  105. .driver-details {
  106. margin-left: 24rpx;
  107. flex: 1;
  108. }
  109. .driver-name {
  110. font-size: 32rpx;
  111. font-weight: bold;
  112. }
  113. .driver-car {
  114. font-size: 28rpx;
  115. color: #666;
  116. margin-top: 8rpx;
  117. }
  118. .driver-arrive {
  119. font-size: 28rpx;
  120. color: #2C85FF;
  121. margin-top: 8rpx;
  122. }
  123. .cancel-btn {
  124. width: 160rpx;
  125. height: 64rpx;
  126. line-height: 64rpx;
  127. font-size: 28rpx;
  128. color: #FF5252;
  129. border: 1rpx solid #FF5252;
  130. background-color: white;
  131. border-radius: 32rpx;
  132. }
  133. .cars-nearby {
  134. position: absolute;
  135. top: 104rpx;
  136. left: 24rpx;
  137. background-color: rgba(255, 255, 255, 0.9);
  138. border-radius: 32rpx;
  139. padding: 12rpx 20rpx;
  140. display: flex;
  141. align-items: center;
  142. box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  143. }
  144. .cars-icon {
  145. color: #2C85FF;
  146. margin-right: 12rpx;
  147. }
  148. .cars-count {
  149. font-size: 28rpx;
  150. color: #333;
  151. }
  152. .icon-car {
  153. font-size: 32rpx;
  154. }
  155. .available{
  156. width: 100%;
  157. height: 380rpx;
  158. display: flex;
  159. align-items: center;
  160. justify-content: center;
  161. }
  162. .positioning{
  163. position: fixed;
  164. right: 40rpx;
  165. bottom: 400rpx;
  166. }