rlxf_pass.wxss 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. /* pages/wx_airport/rlxf_pass/rlxf_pass.wxss */
  2. .content {
  3. padding: 15px;
  4. height: 100vh;
  5. flex-direction: column;
  6. display: flex;
  7. }
  8. .top {
  9. background-color: white;
  10. border-radius: 6px;
  11. padding: 16px 12px;
  12. display: flex;
  13. justify-content: space-between;
  14. align-items: flex-start;
  15. flex-direction: column;
  16. position: relative;
  17. }
  18. .btn button {
  19. width: 84px;
  20. height: 27px;
  21. font-size: 13px;
  22. background-color: transparent !important;
  23. border: 1rpx solid #B4C4E2 !important;
  24. border-radius: 63px;
  25. color: #B4C4E2;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. }
  30. .basic {
  31. position: relative;
  32. display: flex;
  33. justify-content: space-between;
  34. align-items: center;
  35. width: 100%;
  36. height: 200rpx;
  37. /* border-bottom: 1rpx dashed #DDDDDD; */
  38. }
  39. .info {
  40. display: flex;
  41. justify-content: center;
  42. align-items: flex-start;
  43. flex-direction: column;
  44. line-height: 25px;
  45. }
  46. .info>text:nth-child(1) {
  47. font-size: 16px;
  48. font-weight: 700;
  49. }
  50. .info>text:nth-child(2),
  51. .info>text:nth-child(3),
  52. .info>text:nth-child(4) {
  53. font-size: 14px;
  54. font-weight: 400;
  55. color: #606266;
  56. }
  57. .avatar {
  58. width: 90px;
  59. height: 90px;
  60. border-radius: 30px;
  61. overflow: hidden;
  62. box-shadow: 0 0 10px 8px rgba(0, 0, 0, 0.1);
  63. }
  64. .avatar image {
  65. width: 90px;
  66. height: 90px;
  67. border-radius: 30px;
  68. overflow: hidden;
  69. }
  70. .other-msg{
  71. background-color: #f8f9ff;
  72. position: absolute;
  73. left: 0;
  74. bottom: 0;
  75. width: 100%;
  76. padding: 20rpx 32rpx;
  77. box-sizing: border-box;
  78. }
  79. .other-msg-item {
  80. width: 100%;
  81. margin-top: 10rpx;
  82. /* display: flex;
  83. justify-content: space-between;
  84. align-items: center; */
  85. font-size: 14px;
  86. font-weight: 400;
  87. color: #888D98;
  88. }
  89. .basic::before {
  90. content: '';
  91. width: 16px;
  92. height: 16px;
  93. border-radius: 50%;
  94. background-color: #F3F4F6;
  95. position: absolute;
  96. bottom: -8px;
  97. left: -20px;
  98. }
  99. .basic::after {
  100. content: '';
  101. width: 16px;
  102. height: 16px;
  103. border-radius: 50%;
  104. background-color: #F3F4F6;
  105. position: absolute;
  106. bottom: -8px;
  107. right: -20px;
  108. }
  109. /* 点击申报 */
  110. .center {
  111. margin-top: 24rpx;
  112. display: flex;
  113. justify-content: center;
  114. align-items: center;
  115. flex-direction: column;
  116. flex-grow: 1;
  117. height: 462px;
  118. background-color: white;
  119. border-radius: 6px;
  120. }
  121. .click {
  122. position: relative;
  123. width: 150px;
  124. height: 150px;
  125. border-radius: 50%;
  126. background: radial-gradient(77.4% 91.33% at 68% 85%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 68.02%, rgba(255, 255, 255, 0.3) 78.61%, rgba(255, 255, 255, 0.222) 88.14%) , radial-gradient(63.67% 63.67% at 43% 38.67%, rgba(157, 58, 255, 0) 26.24%, rgba(153, 71, 253, 0.0746365) 33.85%, rgba(159, 185, 251, 0.59) 86.46%, rgba(133, 163, 239, 0.55) 100%) , linear-gradient(0deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), linear-gradient(170.11deg, #FFA9E2 16.49%, #7886FF 60.12%, #0066FF 98.29%), linear-gradient(180deg, #72F4ED 0%, #2288FF 100%);
  127. display: flex;
  128. justify-content: center;
  129. align-items: center;
  130. font-size: 20px;
  131. font-weight: 700;
  132. color: white;
  133. }
  134. .click-stop {
  135. background: #a39e9e !important;
  136. }
  137. .click image {
  138. width: 72px;
  139. height: 55px;
  140. position: absolute;
  141. right: 0;
  142. top: 0;
  143. }
  144. .tip {
  145. color: #BBBBBB;
  146. font-size: 14px;
  147. font-weight: 700;
  148. margin-top: 30px;
  149. text-align: center;
  150. line-height: 20px;
  151. }
  152. .letter-sapce {
  153. letter-spacing: 2px;
  154. }
  155. .function-bar {
  156. display: flex;
  157. justify-content: space-evenly;
  158. align-items: center;
  159. background: #FFFFFF;
  160. border-radius: 6px;
  161. margin: 24rpx 0 0;
  162. padding: 36rpx 0 20rpx 0;
  163. }
  164. .flex {
  165. display: flex;
  166. flex-direction: column;
  167. justify-content: space-evenly;
  168. align-items: center;
  169. }
  170. .flex>image {
  171. width: 60rpx;
  172. height: 60rpx;
  173. }
  174. .flex>.tit{
  175. color: #9CABC8;
  176. margin-top: 20rpx;
  177. }
  178. .qr-code{
  179. width: 520rpx;
  180. height: 520rpx;
  181. }