index.acss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. .soldier-component .loading-full-page {
  2. height: 100vh;
  3. display: flex;
  4. align-items: center;
  5. justify-content: center;
  6. }
  7. .soldier-component .user-cert-qrcode-page {
  8. min-height: 100vh;
  9. background: linear-gradient(to bottom, #168BFF, #1664FF);
  10. padding: 24rpx;
  11. }
  12. .soldier-component .user-cert-qrcode-page .user-qrcode-card {
  13. overflow: hidden;
  14. border-radius: 16rpx;
  15. background-color: #fff;
  16. }
  17. .soldier-component .user-cert-qrcode-page .user-qrcode-card-header {
  18. min-height: 168rpx;
  19. padding: 24rpx;
  20. display: flex;
  21. align-items: center;
  22. background-position: center;
  23. background-repeat: no-repeat;
  24. background-size: cover;
  25. }
  26. .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-avatar {
  27. width: 120rpx;
  28. height: 120rpx;
  29. border-radius: 50%;
  30. overflow: hidden;
  31. background-color: #fff;
  32. }
  33. .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-avatar image {
  34. width: 100%;
  35. height: 100%;
  36. }
  37. .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-info {
  38. flex: 1;
  39. padding-left: 24rpx;
  40. }
  41. .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-name {
  42. color: #333;
  43. font-size: 36rpx;
  44. font-weight: 800;
  45. margin-bottom: 8rpx;
  46. }
  47. .soldier-component .user-cert-qrcode-page .user-qrcode-card-header .user-desc {
  48. color: #999;
  49. font-size: 26rpx;
  50. }
  51. .soldier-component .user-cert-qrcode-page .user-qrcode-card-content {
  52. height: 632rpx;
  53. display: flex;
  54. align-items: center;
  55. justify-content: center;
  56. flex-direction: column;
  57. }
  58. .soldier-component .user-cert-qrcode-page .qrcode-image {
  59. width: 400rpx;
  60. height: 400rpx;
  61. background-color: #f2f2f2;
  62. position: relative;
  63. }
  64. .soldier-component .user-cert-qrcode-page .qrcode-image > image {
  65. width: 100%;
  66. height: 100%;
  67. position: relative;
  68. z-index: 1;
  69. }
  70. .soldier-component .user-cert-qrcode-page .qrcode-image .refresh-mask {
  71. left: 0;
  72. right: 0;
  73. top: 0;
  74. bottom: 0;
  75. z-index: 2;
  76. position: absolute;
  77. display: flex;
  78. align-items: center;
  79. justify-content: center;
  80. background-color: rgba(255, 255, 255, 0.8);
  81. }
  82. .soldier-component .user-cert-qrcode-page .qrcode-image .refresh-mask > view {
  83. width: 76rpx;
  84. height: 76rpx;
  85. border-radius: 8rpx;
  86. background-color: #fff;
  87. display: flex;
  88. align-items: center;
  89. justify-content: center;
  90. }
  91. .soldier-component .user-cert-qrcode-page .qrcode-image .refresh-mask image {
  92. width: 36rpx;
  93. height: 36rpx;
  94. }
  95. .soldier-component .user-cert-qrcode-page .qr-tip {
  96. color: #ccc;
  97. font-size: 28rpx;
  98. display: flex;
  99. margin-top: 40rpx;
  100. align-items: center;
  101. justify-content: center;
  102. }
  103. .soldier-component .user-cert-qrcode-page .ref-icon {
  104. width: 36rpx;
  105. height: 36rpx;
  106. margin-right: 10rpx;
  107. }
  108. .soldier-component .user-cert-qrcode-page .footer-items {
  109. border-radius: 16rpx;
  110. margin-top: 24rpx;
  111. background-color: rgba(255, 255, 255, 0.2);
  112. }
  113. .soldier-component .user-cert-qrcode-page .footer-item {
  114. color: #fff;
  115. display: flex;
  116. padding: 24rpx;
  117. font-weight: 800;
  118. font-size: 34rpx;
  119. align-items: center;
  120. justify-content: space-between;
  121. }