my.wxss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. page {
  2. background-color: #EDF1F4;
  3. }
  4. .user-info {
  5. display: flex;
  6. align-items: center;
  7. margin: 12rpx 0 0 32rpx;
  8. }
  9. .head-img {
  10. width: 118rpx;
  11. height: 118rpx;
  12. border-radius: 50%;
  13. }
  14. .name {
  15. font-size: 40rpx;
  16. font-weight: 800;
  17. color: #1C274C;
  18. }
  19. .jz-type {
  20. font-size: 22rpx;
  21. font-weight: 500;
  22. background-color: #DEEAF9;
  23. color: #1677FF;
  24. display: inline-block;
  25. padding: 6rpx 12rpx;
  26. position: relative;
  27. top: -6rpx;
  28. }
  29. .job-text {
  30. font-size: 22rpx;
  31. font-weight: 500;
  32. color: #A4A9B7;
  33. margin-top: 10rpx;
  34. }
  35. .money-box {
  36. width: 686rpx;
  37. height: 334rpx;
  38. border-radius: 20rpx 20rpx 20rpx 20rpx;
  39. opacity: 1;
  40. margin: auto;
  41. position: relative;
  42. }
  43. .money-text {
  44. font-size: 24rpx;
  45. font-weight: 500;
  46. color: #FFFFFF;
  47. }
  48. .money {
  49. font-size: 58rpx;
  50. font-weight: 500;
  51. color: #FFFFFF;
  52. }
  53. .detail {
  54. position: absolute;
  55. bottom: 0;
  56. width: 100%;
  57. height: 126rpx;
  58. background: #7230FF;
  59. border-radius: 0rpx 0rpx 20rpx 20rpx;
  60. opacity: 1;
  61. }
  62. .num-box {
  63. box-sizing: border-box;
  64. width: 228rpx;
  65. }
  66. .detail-text {
  67. font-size: 24rpx;
  68. font-weight: 500;
  69. color: rgba(255, 255, 255, 0.5);
  70. }
  71. .detail-num {
  72. font-size: 32rpx;
  73. font-weight: 500;
  74. color: #FFFFFF;
  75. margin-top: 6rpx;
  76. }
  77. /* 更多功能 */
  78. .more-box {
  79. width: 686rpx;
  80. /* height: 390rpx; */
  81. background: #FFFFFF;
  82. border-radius: 20rpx 20rpx 20rpx 20rpx;
  83. opacity: 1;
  84. margin: auto;
  85. }
  86. .more-title {
  87. padding: 32rpx 0 0 32rpx;
  88. }
  89. .more-each-box {
  90. flex-wrap: wrap;
  91. }
  92. .more-each {
  93. width: 170rpx;
  94. position: relative;
  95. }
  96. .contact{
  97. position: absolute;
  98. opacity: 0;
  99. width: 100%;
  100. height: 100%;
  101. left: 0;
  102. top: 0;
  103. }
  104. .more-img {
  105. width: 48rpx;
  106. height: 48rpx;
  107. display: block;
  108. margin: auto;
  109. }
  110. .more-text {
  111. margin-top: 12rpx;
  112. }
  113. .popup-box {
  114. width: 560rpx;
  115. background: #FFFFFF;
  116. border-radius: 30rpx 30rpx 30rpx 30rpx;
  117. opacity: 1;
  118. }
  119. .close-img {
  120. width: 32rpx;
  121. height: 32rpx;
  122. position: absolute;
  123. top: 37rpx;
  124. right: 32rpx;
  125. }
  126. .phone {
  127. font-size: 56rpx;
  128. font-weight: bold;
  129. color: #1C274C;
  130. }
  131. .phone-text {
  132. font-size: 22rpx;
  133. font-weight: 500;
  134. color: #A4A9B7;
  135. margin-top: 8rpx;
  136. }
  137. .btn {
  138. width: 496rpx;
  139. height: 100rpx;
  140. background: #6116FF;
  141. border-radius: 20rpx 20rpx 20rpx 20rpx;
  142. opacity: 1;
  143. margin: auto;
  144. font-size: 30rpx;
  145. line-height: 100rpx;
  146. font-weight: 500;
  147. color: #FFFFFF;
  148. margin-bottom: 40rpx;
  149. }