index.wxss 6.6 KB

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