猫妈狗爸伴宠师小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

250 lines
3.7 KiB

  1. .box {
  2. width: 100vw;
  3. height: 100vh;
  4. background-color: #F5F5F5;
  5. padding: 2% 3% 0 3%;
  6. }
  7. .box-size {
  8. box-sizing: border-box;
  9. }
  10. .level {
  11. display: flex;
  12. }
  13. /* 垂直、水平居中 */
  14. .vertically_center {
  15. display: grid;
  16. place-items: center;
  17. }
  18. .top {
  19. width: 710rpx;
  20. height: 176rpx;
  21. background-color: #FFFFFF;
  22. padding: 1% 2%;
  23. font-size: 22rpx;
  24. display: grid;
  25. justify-content: space-between;
  26. }
  27. .top_left {
  28. width: 520rpx;
  29. height: auto;
  30. display: flex;
  31. justify-content: space-between;
  32. padding-top: 20rpx;
  33. }
  34. .text1 {
  35. color: #FF2A2A;
  36. font-size: 25rpx;
  37. }
  38. .top_bottom {
  39. /* background-color: aqua; */
  40. margin-left: 10rpx;
  41. color: #999999;
  42. }
  43. .top-button {
  44. width: 132rpx;
  45. height: 54rpx;
  46. border: 1rpx solid #FFBF60;
  47. color: #FFBF60;
  48. display: grid;
  49. justify-content: center;
  50. line-height: 54rpx;
  51. position: absolute;
  52. top: 30rpx;
  53. right: 30rpx;
  54. }
  55. .information {
  56. width: 710rpx;
  57. background-color: #FFFFFF;
  58. /* background-color: pink; */
  59. margin-top: 10rpx;
  60. padding: 10rpx 10rpx;
  61. }
  62. .time {
  63. width: 660rpx;
  64. /* background-color: gray; */
  65. padding: 0 2%;
  66. margin-top: 50rpx;
  67. display: flex;
  68. justify-content: space-between;
  69. align-items: center;
  70. .time-content{
  71. width: 500rpx;
  72. }
  73. }
  74. .service {
  75. width: 710rpx;
  76. height: auto;
  77. background-color: #FFFFFF;
  78. margin-top: 2%;
  79. padding: 0 3% 3% 3%;
  80. }
  81. .horizontal_distribution {
  82. display: flex;
  83. justify-content: space-between;
  84. }
  85. .flex {
  86. display: flex;
  87. }
  88. .service_top {
  89. width: 670rpx;
  90. }
  91. .text2 {
  92. width: auto;
  93. height: 20rpx;
  94. margin-top: 45rpx;
  95. font-size: 22rpx;
  96. color: #999999;
  97. }
  98. .pet_information {
  99. width: 670rpx;
  100. height: auto;
  101. /* background-color: pink; */
  102. padding: 5% 0 0 3%;
  103. }
  104. .pet_item {
  105. color: #999999;
  106. font-size: 28rpx;
  107. }
  108. .img image {
  109. width: 140rpx;
  110. height: 140rpx;
  111. border-radius: 100rpx;
  112. margin-right: 20rpx;
  113. }
  114. .name {
  115. margin-bottom: 15rpx;
  116. }
  117. .name image {
  118. width: 35rpx;
  119. height: 35rpx;
  120. border-radius: 35rpx;
  121. background-color: red;
  122. margin-left: 15rpx;
  123. }
  124. .name_text {
  125. color: #000 !important;
  126. font-size: 30rpx !important;
  127. }
  128. .pet- {
  129. height: 40rpx;
  130. line-height: 40rpx;
  131. color: #999999;
  132. font-size: 28rpx;
  133. margin: 20rpx 0 20rpx 0;
  134. }
  135. .pet- text {
  136. margin: 0 8rpx 0 30rpx;
  137. color: #000;
  138. }
  139. .money_total {
  140. width: 670rpx;
  141. height: 45rpx;
  142. /* background-color: pink; */
  143. margin: 60rpx 0 20rpx 0;
  144. justify-content: space-between;
  145. font-size: 30rpx;
  146. }
  147. .money_text {
  148. color: red !important;
  149. font-size: 34rpx !important;
  150. }
  151. .other_information {
  152. width: 710rpx;
  153. height: 350rpx;
  154. background-color: #FFFFFF;
  155. /* background-color: pink; */
  156. margin-top: 20rpx;
  157. padding: 0 1% 0 3%;
  158. }
  159. .text3 {
  160. margin: 40rpx 15rpx 0 15rpx;
  161. }
  162. .bottom {
  163. width: 100vw;
  164. height: 163rpx;
  165. background-color: #FFFFFF;
  166. margin-top: 20rpx;
  167. position: relative;
  168. }
  169. .bottom_button {
  170. width: 594rpx;
  171. height: 94rpx;
  172. background-color: #FFBF60;
  173. color: #FFFFFF;
  174. font-size: 30rpx;
  175. line-height: 94rpx;
  176. justify-content: center;
  177. position: absolute;
  178. top: 19%;
  179. left: 11%;
  180. }
  181. .success {
  182. width: 310rpx;
  183. height: 370rpx;
  184. background-color: #FFFFFF;
  185. }
  186. .pop_top {
  187. width: 310rpx;
  188. height: 100rpx;
  189. background-image: linear-gradient(to bottom, #FFBF60, #FFD494)
  190. }
  191. .code {
  192. width: 250rpx;
  193. height: 50rpx;
  194. background-color: #F3F3F3;
  195. margin: 30rpx 0 0 30rpx;
  196. }
  197. .pop_image {
  198. display: grid;
  199. place-items: center;
  200. margin-top: 20rpx;
  201. }
  202. .copy {
  203. width: 260rpx;
  204. height: 50rpx;
  205. background-color: #FFBF60;
  206. margin: 30rpx 0 0 25rpx;
  207. }
  208. .cancel {
  209. width: 40rpx;
  210. height: 40rpx;
  211. background-color: #FFFFFF;
  212. position: absolute;
  213. top: -20rpx;
  214. right: -17rpx;
  215. }