riding.wxss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  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. text-align: center;
  84. /* flex-direction: column;
  85. justify-content: space-around; */
  86. }
  87. .content .timeout{
  88. font-size:30rpx;
  89. font-family:PingFang SC;
  90. font-weight:bold;
  91. color:rgba(42,42,42,1);
  92. padding-left: 33rpx;
  93. display: flex;
  94. align-items: center;
  95. padding-top: 30rpx;
  96. margin-bottom: 30rpx;
  97. /* padding-top: ; */
  98. }
  99. .content .timeout image{
  100. margin: 0 !important;
  101. }
  102. .content .text{
  103. font-size:32rpx;
  104. font-family:PingFang-SC-Regular;
  105. font-weight:400;
  106. color:rgba(42,42,42,1);
  107. /* padding-top: 37rpx; */
  108. padding-left: 28rpx;
  109. }
  110. .content image{
  111. margin: 0 auto;
  112. }
  113. .content .code{
  114. width: 500rpx;
  115. margin: 0 auto;
  116. display: flex;
  117. align-items: center;
  118. justify-content: space-between;
  119. border-bottom: 2rpx solid #DEDEDE;
  120. margin-top: 20rpx;
  121. margin-bottom: 30rpx;
  122. }
  123. .content .posi{
  124. position: absolute;
  125. right: 0rpx;
  126. /* margin-top: 10rpx; */
  127. }
  128. .content .code text{
  129. font-size:32rpx;
  130. font-family:PingFang-SC-Regular;
  131. font-weight:800;
  132. color:rgba(42,42,42,1);
  133. }
  134. .content .message{
  135. width: 500rpx;
  136. display: flex;
  137. margin: 0 auto;
  138. align-items: center;
  139. justify-content: space-between;
  140. }
  141. .content .message view{
  142. display: flex;
  143. flex-direction: column;
  144. align-items: center;
  145. }
  146. .content .message view text:nth-of-type(1){
  147. font-size:36rpx;
  148. font-family:PingFang-SC-Bold;
  149. font-weight:bold;
  150. color:rgba(42,42,42,1);
  151. }
  152. .content .message view text:nth-of-type(2){
  153. font-size:24rpx;
  154. font-family:PingFang-SC-Regular;
  155. font-weight:400;
  156. color:rgba(153,153,153,1);
  157. }
  158. .btn{
  159. display: flex;
  160. padding: 0rpx 50rpx;
  161. margin-top:40rpx;
  162. justify-content: space-between;
  163. }
  164. .btn .btn-left{
  165. display: flex;
  166. align-items: center;
  167. justify-content: center;
  168. width:310rpx;
  169. height:76rpx;
  170. border:2rpx solid rgba(24,213,185,1);
  171. border-radius:10rpx;
  172. font-size:32rpx;
  173. font-family:PingFang-SC-Regular;
  174. font-weight:400;
  175. color:rgba(255,254,254,1);
  176. background:rgba(24,213,185,1);
  177. }
  178. .btn .btn-right{
  179. width:310rpx;
  180. height:76rpx;
  181. border:2rpx solid rgba(24,213,185,1);
  182. color:rgba(24,213,185,1);
  183. border-radius:10rpx;
  184. font-size:32rpx;
  185. font-family:PingFang-SC-Regular;
  186. font-weight:400;
  187. display: flex;
  188. align-items: center;
  189. justify-content: center;
  190. }
  191. .container1{
  192. z-index: 9999;
  193. position: absolute;
  194. width: 100%;
  195. height: 100%;
  196. }
  197. .content1{
  198. width: 100%;
  199. height: 100%;
  200. position: absolute;
  201. }
  202. /* .content1 .background{
  203. width: 100%;
  204. height: 100%;
  205. position: absolute;
  206. top: 0;
  207. left: 0;
  208. right: 0;
  209. bottom: 0;
  210. z-index: 8888;
  211. background: rgba(0, 0, 0, 0.3);
  212. }
  213. .content1 .txt{
  214. position: absolute;
  215. z-index: 9999;
  216. top: 50%;
  217. left: 50%;
  218. -webkit-transform: translate(-50%, -50%);
  219. transform: translate(-50%, -50%);
  220. background-color: #FFFFFF;
  221. text-align: center;
  222. overflow: hidden;
  223. width:500rpx;
  224. height:250rpx;
  225. background:rgba(255,255,255,1);
  226. border-radius:20rpx;
  227. display: flex;
  228. flex-direction: column;
  229. align-items: center;
  230. justify-content: space-between;
  231. } */
  232. .content1 .txt .top{
  233. height: 180rpx;
  234. display: flex;
  235. flex-direction: column;
  236. align-items: center;
  237. justify-content: center;
  238. font-size:28rpx;
  239. font-family:PingFang SC;
  240. font-weight:400;
  241. color:rgba(42,42,42,1);
  242. }
  243. .content1 .txt .bottom{
  244. display: flex;
  245. align-items: center;
  246. height: 60rpx;
  247. font-size: 17px;
  248. width: 100%;
  249. border-top: 1rpx solid #D5D5D6;
  250. justify-content: space-between;
  251. }
  252. .content1 .txt .bottom .bottom_a{
  253. width: 49%;
  254. display: flex;
  255. flex-direction: column;
  256. align-items: center;
  257. }
  258. @keyframes remindMessage {
  259. 0% {
  260. -webkit-transform: translateX(90%);
  261. }
  262. 100% {
  263. -webkit-transform: translateX(-90%);
  264. }
  265. }
  266. .tongzhitext {
  267. margin-right:80rpx;
  268. margin-left: 10rpx;
  269. overflow: hidden;
  270. height: 60rpx;
  271. white-space: nowrap;
  272. text-overflow: ellipsis;
  273. }
  274. .tongzhi-text {
  275. position: fixed;
  276. top: 0;
  277. font-size: 28rpx;
  278. animation: remindMessage 10s linear infinite;
  279. width: 100%;
  280. color: #fc5039ec;
  281. display: block;
  282. }
  283. .notice-wrap {
  284. position: fixed;
  285. top: 2rpx;
  286. margin-top: 60upx;
  287. background: #fff;
  288. width: 100%;
  289. height: 60rpx;
  290. line-height: 60rpx;
  291. color: #d09868;
  292. font-size: 28rpx;
  293. }
  294. .min{
  295. font-size:22rpx!important;
  296. color: #999999!important;
  297. margin-left:3px!important;
  298. font-size: 400!important;
  299. }