daily_riding.wxss 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. page{
  2. width: 100%;
  3. height: 100%;
  4. }
  5. map{
  6. width: 100%;
  7. position: relative;
  8. }
  9. cover{
  10. line-height: normal !important;
  11. overflow: visible !important;
  12. }
  13. .index {
  14. -webkit-box-orient: vertical;
  15. -webkit-box-direction: normal;
  16. -webkit-flex-direction: column;
  17. -ms-flex-direction: column;
  18. flex-direction: column;
  19. width: 100%;
  20. height: 100%;
  21. display: flex;
  22. justify-content: space-between;
  23. }
  24. /* 四个图标 begin */
  25. .circle{
  26. height: 85rpx;
  27. width: 85rpx;
  28. border-radius: 50%;
  29. display: flex;
  30. justify-content: center;
  31. align-items: center;
  32. /* margin-bottom: 30rpx; */
  33. position: absolute;
  34. z-index: 10;
  35. }
  36. .circlee1{
  37. bottom: 220rpx;
  38. left: 50rpx;
  39. }
  40. .circlee2{
  41. bottom: 220rpx;
  42. right: 50rpx;
  43. }
  44. .circlee3{
  45. bottom: 100rpx;
  46. left: 50rpx;
  47. }
  48. .circlee4{
  49. bottom: 100rpx;
  50. right: 50rpx;
  51. }
  52. .circle1{
  53. left: 50rpx;
  54. top: 336rpx;
  55. }
  56. .circle2{
  57. right: 50rpx;
  58. top: 336rpx;
  59. }
  60. .circle3{
  61. left: 50rpx;
  62. top: 430rpx;
  63. }
  64. .circle4{
  65. right: 50rpx;
  66. top: 430rpx;
  67. }
  68. .circle5{
  69. right: 0rpx;
  70. top: 120rpx;
  71. width: 100rpx;
  72. height: 70rpx;
  73. display: flex;
  74. align-items: center;
  75. justify-content: center;
  76. background: #fff;
  77. border-radius: 40rpx 0rpx 0rpx 40rpx;
  78. }
  79. /* 四个图标 end */
  80. .content{
  81. width: 100%;
  82. display: flex;
  83. flex-direction: column;
  84. justify-content: space-around;
  85. }
  86. .content .timeout{
  87. font-size:30rpx;
  88. font-family:PingFang SC;
  89. font-weight:bold;
  90. color:rgba(42,42,42,1);
  91. padding-left: 33rpx;
  92. display: flex;
  93. align-items: center;
  94. }
  95. .content .timeout image{
  96. margin: 0 !important;
  97. }
  98. .content .text{
  99. font-size:32rpx;
  100. font-family:PingFang-SC-Regular;
  101. font-weight:400;
  102. color:rgba(42,42,42,1);
  103. /* padding-top: 37rpx; */
  104. padding-left: 28rpx;
  105. }
  106. .content .text{
  107. font-size:32rpx;
  108. font-family:PingFang-SC-Regular;
  109. font-weight:400;
  110. color:rgba(42,42,42,1);
  111. /* padding-top: 37rpx; */
  112. padding-left: 28rpx;
  113. }
  114. .content image{
  115. margin: 0 auto;
  116. }
  117. .content .code{
  118. width: 500rpx;
  119. margin: 0 auto;
  120. display: flex;
  121. align-items: center;
  122. justify-content: space-between;
  123. border-bottom: 2rpx solid #DEDEDE;
  124. }
  125. .content .posi{
  126. position: absolute;
  127. right: 0rpx;
  128. }
  129. .content .code text:nth-of-type(1){
  130. font-size:32rpx;
  131. font-family:PingFang-SC-Regular;
  132. font-weight:800;
  133. color:rgba(42,42,42,1);
  134. }
  135. .content .message{
  136. width: 500rpx;
  137. display: flex;
  138. margin: 0 auto;
  139. align-items: center;
  140. justify-content: space-between;
  141. }
  142. .content .message view{
  143. display: flex;
  144. flex-direction: column;
  145. align-items: center;
  146. }
  147. .content .message view text:nth-of-type(1){
  148. font-size:36rpx;
  149. font-family:PingFang-SC-Bold;
  150. font-weight:bold;
  151. color:rgba(42,42,42,1);
  152. }
  153. .content .message view text:nth-of-type(2){
  154. font-size:24rpx;
  155. font-family:PingFang-SC-Regular;
  156. font-weight:400;
  157. color:rgba(153,153,153,1);
  158. }
  159. .btn{
  160. display: flex;
  161. justify-content: space-around;
  162. margin: 0 auto;
  163. width: 75%;
  164. }
  165. .btn .btn-left{
  166. display: flex;
  167. align-items: center;
  168. justify-content: center;
  169. box-sizing: border-box;
  170. width:296rpx;
  171. height:76rpx;
  172. border:2rpx solid #2FB9FD;
  173. border-radius:10rpx;
  174. font-family:PingFang-SC-Regular;
  175. }
  176. .btn .btn-left view{
  177. width: 50%;
  178. display: flex;
  179. align-items: center;
  180. justify-content: center;
  181. height: 100%;
  182. }
  183. .btn .btn-left view:nth-of-type(1){
  184. background: #42C6FD;
  185. color: white;
  186. font-size: 32rpx;
  187. }
  188. .btn .btn-left view:nth-of-type(2){
  189. color: #36BBFD;
  190. font-size: 32rpx;
  191. }
  192. .btn .btn-right{
  193. width:204rpx;
  194. height:76rpx;
  195. background: #10D6BB;
  196. color:white;
  197. border-radius:10rpx;
  198. font-size:32rpx;
  199. font-family:PingFang-SC-Regular;
  200. font-weight:400;
  201. display: flex;
  202. align-items: center;
  203. justify-content: center;
  204. }
  205. .container1{
  206. z-index: 9999;
  207. position: absolute;
  208. width: 100%;
  209. height: 100%;
  210. }
  211. .content1{
  212. width: 100%;
  213. height: 100%;
  214. position: absolute;
  215. }
  216. .content1 .txt .top{
  217. height: 180rpx;
  218. display: flex;
  219. flex-direction: column;
  220. align-items: center;
  221. justify-content: center;
  222. font-size:28rpx;
  223. font-family:PingFang SC;
  224. font-weight:400;
  225. color:rgba(42,42,42,1);
  226. }
  227. .content1 .txt .bottom{
  228. display: flex;
  229. align-items: center;
  230. height: 60rpx;
  231. font-size: 17px;
  232. width: 100%;
  233. border-top: 1rpx solid #D5D5D6;
  234. justify-content: space-between;
  235. }
  236. .content1 .txt .bottom .bottom_a{
  237. width: 49%;
  238. display: flex;
  239. flex-direction: column;
  240. align-items: center;
  241. }