猫妈狗爸伴宠师小程序前端代码
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.

251 lines
3.7 KiB

  1. .box {
  2. width: 100vw;
  3. min-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. font-size: 26rpx;
  71. .time-content{
  72. width: 500rpx;
  73. text-align: right;
  74. }
  75. }
  76. .service {
  77. width: 710rpx;
  78. height: auto;
  79. background-color: #FFFFFF;
  80. margin-top: 2%;
  81. padding: 0 3% 3% 3%;
  82. }
  83. .horizontal_distribution {
  84. display: flex;
  85. justify-content: space-between;
  86. }
  87. .flex {
  88. display: flex;
  89. }
  90. .service_top {
  91. width: 670rpx;
  92. }
  93. .text2 {
  94. width: auto;
  95. height: 20rpx;
  96. margin-top: 45rpx;
  97. font-size: 22rpx;
  98. color: #999999;
  99. }
  100. .pet_information {
  101. width: 670rpx;
  102. height: auto;
  103. /* background-color: pink; */
  104. padding: 5% 0 0 3%;
  105. }
  106. .pet_item {
  107. color: #999999;
  108. font-size: 28rpx;
  109. }
  110. .img image {
  111. width: 140rpx;
  112. height: 140rpx;
  113. border-radius: 100rpx;
  114. margin-right: 20rpx;
  115. }
  116. .name {
  117. margin-bottom: 15rpx;
  118. }
  119. .name image {
  120. width: 35rpx;
  121. height: 35rpx;
  122. border-radius: 35rpx;
  123. margin-left: 15rpx;
  124. }
  125. .name_text {
  126. color: #000 !important;
  127. font-size: 30rpx !important;
  128. }
  129. .pet- {
  130. height: 40rpx;
  131. line-height: 40rpx;
  132. color: #999999;
  133. font-size: 28rpx;
  134. margin: 20rpx 0 20rpx 0;
  135. }
  136. .pet- text {
  137. margin: 0 8rpx 0 30rpx;
  138. color: #000;
  139. }
  140. .money_total {
  141. width: 670rpx;
  142. height: 45rpx;
  143. /* background-color: pink; */
  144. margin: 60rpx 0 20rpx 0;
  145. justify-content: space-between;
  146. font-size: 30rpx;
  147. }
  148. .money_text {
  149. color: red !important;
  150. font-size: 34rpx !important;
  151. }
  152. .other_information {
  153. width: 710rpx;
  154. height: 350rpx;
  155. background-color: #FFFFFF;
  156. /* background-color: pink; */
  157. margin-top: 20rpx;
  158. padding: 0 1% 0 3%;
  159. }
  160. .text3 {
  161. margin: 40rpx 15rpx 0 15rpx;
  162. }
  163. .bottom {
  164. width: 100vw;
  165. height: 163rpx;
  166. background-color: #FFFFFF;
  167. margin-top: 20rpx;
  168. position: relative;
  169. }
  170. .bottom_button {
  171. width: 594rpx;
  172. height: 94rpx;
  173. background-color: #FFBF60;
  174. color: #FFFFFF;
  175. font-size: 30rpx;
  176. line-height: 94rpx;
  177. justify-content: center;
  178. position: absolute;
  179. top: 19%;
  180. left: 11%;
  181. }
  182. .success {
  183. width: 310rpx;
  184. height: 370rpx;
  185. background-color: #FFFFFF;
  186. }
  187. .pop_top {
  188. width: 310rpx;
  189. height: 100rpx;
  190. background-image: linear-gradient(to bottom, #FFBF60, #FFD494)
  191. }
  192. .code {
  193. width: 250rpx;
  194. height: 50rpx;
  195. background-color: #F3F3F3;
  196. margin: 30rpx 0 0 30rpx;
  197. }
  198. .pop_image {
  199. display: grid;
  200. place-items: center;
  201. margin-top: 20rpx;
  202. }
  203. .copy {
  204. width: 260rpx;
  205. height: 50rpx;
  206. background-color: #FFBF60;
  207. margin: 30rpx 0 0 25rpx;
  208. }
  209. .cancel {
  210. width: 40rpx;
  211. height: 40rpx;
  212. background-color: #FFFFFF;
  213. position: absolute;
  214. top: -20rpx;
  215. right: -17rpx;
  216. }