index.wxss 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399
  1. /* pages/index/index.wxss */
  2. .index-container {
  3. width: 100%;
  4. min-height: 100%;
  5. background-color: #F7F7F7;
  6. position: relative;
  7. padding-top: 1rpx;
  8. }
  9. .header {
  10. width: 100%;
  11. height: 98rpx;
  12. background-color: #fff;
  13. }
  14. .main-header {
  15. width: 690rpx;
  16. height: 100%;
  17. margin: 0 auto;
  18. }
  19. .location {
  20. width: 100%;
  21. height: 100%;
  22. display: flex;
  23. justify-content: space-between;
  24. align-items: center;
  25. }
  26. .location-info {
  27. width: 80%;
  28. height: 100%;
  29. font-size: 26rpx;
  30. }
  31. .scan {
  32. width: 100rpx;
  33. height: 100%;
  34. display: flex;
  35. justify-content: flex-end;
  36. align-items: center;
  37. font-size: 26rpx;
  38. color: #9A1D16;
  39. }
  40. .l-text {
  41. font-size: 26rpx;
  42. font-weight: 400;
  43. color: #333333;
  44. margin-left: 14rpx;
  45. }
  46. .buy-conten {
  47. width: 690rpx;
  48. height: 152rpx;
  49. background: #FFFFFF;
  50. border-radius: 20rpx;
  51. margin: 22rpx auto 0;
  52. display: flex;
  53. justify-content: flex-start;
  54. align-items: center;
  55. }
  56. .blance {
  57. width: 374rpx;
  58. height: 112rpx;
  59. padding-left: 20rpx;
  60. }
  61. .count {
  62. height: 56rpx;
  63. align-items: stretch;
  64. }
  65. .default-tag {
  66. width: 112rpx;
  67. height: 112rpx;
  68. background-color: rgba(69, 166, 181, .1);
  69. border-radius: 20rpx;
  70. margin-left: 20rpx;
  71. }
  72. .quanyi-img {
  73. width: 112rpx;
  74. height: 112rpx;
  75. }
  76. .desc-text {
  77. font-size: 26rpx;
  78. height: 56rpx;
  79. font-weight: 400;
  80. color: #333333;
  81. }
  82. .bolder-text {
  83. font-size: 48rpx;
  84. font-weight: bold;
  85. color: #333333;
  86. }
  87. .buy-btn {
  88. width: 144rpx;
  89. height: 60rpx;
  90. background: #45A6B5;
  91. border-radius: 10rpx;
  92. color: #fff;
  93. text-align: center;
  94. line-height: 60rpx;
  95. font-size: 26rpx;
  96. font-weight: 400;
  97. }
  98. .file-info {
  99. width: 690rpx;
  100. min-height: 254rpx;
  101. height: auto;
  102. margin: 20rpx auto 0;
  103. background: #FFFFFF;
  104. border-radius: 20rpx;
  105. position: relative;
  106. }
  107. .file-title {
  108. width: 100%;
  109. height: 66rpx;
  110. display: flex;
  111. justify-content: space-between;
  112. align-items: center;
  113. }
  114. .title {
  115. font-size: 30rpx;
  116. font-weight: bold;
  117. color: #333333;
  118. margin-left: 20rpx;
  119. }
  120. .nav-tap {
  121. display: flex;
  122. align-items: center;
  123. height: 100%;
  124. margin-right: 28rpx;
  125. }
  126. .nav-title {
  127. font-size: 26rpx;
  128. font-weight: 400;
  129. color: #999999;
  130. margin-right: 10rpx;
  131. }
  132. .file-content {
  133. width: 100%;
  134. min-height: 160rpx;
  135. /* max-height: 480rpx;
  136. overflow-y: scroll; */
  137. }
  138. .file-left {
  139. width: max-content;
  140. height: 100%;
  141. display: flex;
  142. justify-content: flex-start;
  143. align-items: center;
  144. }
  145. .header-img {
  146. width: 80rpx;
  147. height: 80rpx;
  148. border-radius: 50%;
  149. }
  150. .headImg {
  151. width: 80rpx;
  152. height: 80rpx;
  153. border-radius: 50%;
  154. }
  155. .person {
  156. margin: 0 30rpx 0 14rpx;
  157. }
  158. .person .p-info .sex-tag{
  159. width: 30rpx;
  160. height: 30rpx;
  161. margin-left: 12rpx;
  162. }
  163. .sex-img {
  164. width: 30rpx;
  165. height: 30rpx;
  166. }
  167. .name-text{
  168. font-size: 30rpx;
  169. font-weight: bold;
  170. color: #333333;
  171. }
  172. .p-date{
  173. font-size: 26rpx;
  174. font-weight: 400;
  175. color: #999999;
  176. }
  177. .qrcode {
  178. width: 60rpx;
  179. height: 60rpx;
  180. }
  181. .qrcode-item {
  182. width: 60rpx;
  183. height: 60rpx;
  184. }
  185. .no-data {
  186. width: 100%;
  187. height: 100%;
  188. }
  189. .nodata-img {
  190. height: 156rpx;
  191. width: 184rpx;
  192. }
  193. .none-data-text {
  194. font-size: 26rpx;
  195. font-weight: 400;
  196. color: #999999;
  197. margin-left: 10rpx;
  198. }
  199. .file-item {
  200. width: 100%;
  201. height: 160rpx;
  202. }
  203. .main-con {
  204. width: 648rpx;
  205. height: 100%;
  206. margin: 0 auto;
  207. border-bottom: 1rpx solid #DDD;
  208. display: flex;
  209. justify-content: space-between;
  210. align-items: center;
  211. }
  212. .no-border {
  213. border: 0;
  214. }
  215. .absolute-btn {
  216. position: absolute;
  217. bottom: -28rpx;
  218. left: calc(50% - 95rpx);
  219. width: 190rpx;
  220. height: 60rpx;
  221. background: linear-gradient(180deg, #7BD2DB 0%, #45A6B5 100%);
  222. box-shadow: 0 4rpx 8rpx 0 rgba(69,166,181,0.3);
  223. border-radius: 30rpx;
  224. font-size: 26rpx;
  225. font-weight: 400;
  226. color: #FFFFFF;
  227. }
  228. .check-report {
  229. font-size: 26rpx;
  230. font-weight: 400;
  231. color: #45A6B5;
  232. padding: 10px 0;
  233. }
  234. .index-banner {
  235. width: 690rpx;
  236. height: 690rpx;
  237. margin: 40rpx auto 0;
  238. }
  239. .index-img {
  240. width: 100%;
  241. height: 100%;
  242. }
  243. .wrapper {
  244. height: 100%;
  245. align-items: flex-start;
  246. }
  247. .modal {
  248. width: 558rpx;
  249. min-height: 522rpx;
  250. background-color: #fff;
  251. border-radius: 20rpx;
  252. margin-top: 300rpx;
  253. padding-bottom: 20rpx;
  254. }
  255. .status-icon {
  256. width: 100%;
  257. height: auto;
  258. display: flex;
  259. justify-content: center;
  260. align-items: center;
  261. margin-top: 90rpx;
  262. }
  263. .status-img {
  264. width: 144rpx;
  265. height: 144rpx;
  266. }
  267. .status-text {
  268. font-size: 26rpx;
  269. font-weight: 400;
  270. color: #333333;
  271. text-align: center;
  272. margin-top: 40rpx;
  273. }
  274. .scan-msg {
  275. display: inline-block;
  276. width: 518rpx;
  277. margin: 0 auto;
  278. }
  279. .actions {
  280. width: 100%;
  281. margin-top: 80rpx;
  282. }
  283. .status-btn {
  284. width: 210rpx;
  285. height: 68rpx;
  286. border-radius: 10px;
  287. font-size: 26rpx;
  288. font-weight: 400;
  289. color: #FFFFFF;
  290. }
  291. .my-dialog {
  292. width: 100%;
  293. height: 100%;
  294. position: absolute;
  295. top: 0;
  296. background-color: rgba(0,0,0,0.7);
  297. display: flex;
  298. justify-content: center;
  299. align-items: flex-start;
  300. }
  301. .qr-content {
  302. width: 520rpx;
  303. height: 490rpx;
  304. background: #FFFFFF;
  305. border-radius: 20rpx;
  306. margin-top: 320rpx;
  307. position: relative;
  308. }
  309. .qr-title {
  310. padding: 30rpx 0;
  311. text-align: center;
  312. font-size: 30rpx;
  313. font-weight: bold;
  314. color: #333333;
  315. }
  316. .qr-content-img {
  317. width: 360rpx;
  318. height: 360rpx;
  319. margin-left: calc(50% - 180rpx);
  320. }
  321. .qr-close {
  322. width: 70rpx;
  323. height: 126rpx;
  324. position: absolute;
  325. left: calc(50% - 35rpx);
  326. bottom: -125rpx;
  327. display: flex;
  328. flex-direction: column;
  329. justify-content: center;
  330. align-items: center;
  331. }
  332. .ver-line {
  333. width: 4rpx;
  334. height: 56rpx;
  335. background-color: #fff;
  336. }
  337. .qe-close-icon {
  338. width: 70rpx;
  339. height: 70rpx;
  340. border-radius: 50%;
  341. border: 2px solid #fff;
  342. box-sizing: border-box;
  343. }
  344. .wrapper {
  345. height: 100%;
  346. align-items: center;
  347. }
  348. .action-modal {
  349. width: 540rpx;
  350. min-height: 280rpx;
  351. background: #FFFFFF;
  352. border-radius: 24rpx;
  353. margin-top: 300rpx;
  354. }
  355. .userinfo-auth-modal {
  356. width: 498rpx;
  357. height: 496rpx;
  358. background: #FFFFFF;
  359. border-radius: 5px;
  360. }
  361. .modal-title {
  362. height: 82rpx;
  363. text-align: center;
  364. line-height: 82rpx;
  365. font-size: 30rpx;
  366. font-weight: bold;
  367. color: #333333;
  368. }
  369. .px-border {
  370. height: 1rpx;
  371. transform: scaleY(0.5);
  372. transform-origin: 50% 100%;
  373. background-color: #dddddd;
  374. }
  375. .app-logo {
  376. height: 80rpx;
  377. text-align: center;
  378. margin: 30rpx 0;
  379. }
  380. .auth-text {
  381. width: 418rpx;
  382. margin: 0 auto;
  383. font-size: 26rpx;
  384. font-weight: 400;
  385. color: #333333;
  386. }
  387. .logopng {
  388. width: 80rpx;
  389. height: 80rpx;
  390. border-radius: 50%;
  391. }
  392. .auth-btn {
  393. width: 418rpx;
  394. border-radius: 10rpx;
  395. margin-top: 80rpx;
  396. background-color: var(--maincolor);
  397. color: #fff;
  398. font-size: 26rpx;
  399. }