home.wxss 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. /* 水平间距 */
  2. /* 水平间距 */
  3. .container.data-v-07e72d3c {
  4. display: flex;
  5. flex-direction: column;
  6. padding: 0 20rpx;
  7. height: 100vh;
  8. overflow: hidden;
  9. background-color: #f1f6fe;
  10. }
  11. .container .tab.data-v-07e72d3c {
  12. position: relative;
  13. display: flex;
  14. justify-content: center;
  15. align-items: center;
  16. font-size: 34rpx;
  17. }
  18. .container .tab .tab_img.data-v-07e72d3c {
  19. position: absolute;
  20. top: var(--73922f18);
  21. left: 0;
  22. width: 62rpx;
  23. height: 62rpx;
  24. }
  25. .container .tab2.data-v-07e72d3c {
  26. z-index: 999;
  27. position: fixed;
  28. top: 0;
  29. left: 0;
  30. right: 0;
  31. padding: 0 20rpx;
  32. font-size: 34rpx;
  33. text-align: center;
  34. background-color: #fff;
  35. }
  36. .container .header.data-v-07e72d3c {
  37. position: relative;
  38. margin-top: 35rpx;
  39. width: 710rpx;
  40. height: 369rpx;
  41. color: #fff;
  42. font-size: 36rpx;
  43. border-radius: 10rpx;
  44. }
  45. .container .header .header_img.data-v-07e72d3c {
  46. width: 100%;
  47. height: 100%;
  48. }
  49. .container .header .header_icon.data-v-07e72d3c {
  50. position: absolute;
  51. top: 25rpx;
  52. left: 25rpx;
  53. width: 47rpx;
  54. height: 47rpx;
  55. border-radius: 50%;
  56. }
  57. .container .header .header_school.data-v-07e72d3c {
  58. position: absolute;
  59. top: 18rpx;
  60. left: 81rpx;
  61. font-size: 40rpx;
  62. }
  63. .container .header .header_name.data-v-07e72d3c {
  64. position: absolute;
  65. top: 243rpx;
  66. right: 145rpx;
  67. }
  68. .container .header .header_grade.data-v-07e72d3c {
  69. position: absolute;
  70. top: 292rpx;
  71. right: 145rpx;
  72. }
  73. .container .header .header_code.data-v-07e72d3c {
  74. position: absolute;
  75. top: 245rpx;
  76. right: 28rpx;
  77. display: flex;
  78. justify-content: center;
  79. align-items: center;
  80. width: 98rpx;
  81. height: 98rpx;
  82. border-radius: 10rpx;
  83. background-color: #fff;
  84. }
  85. .container .body.data-v-07e72d3c {
  86. height: calc(100vh - 550rpx);
  87. margin-top: 20rpx;
  88. }
  89. .container .body .body_header.data-v-07e72d3c {
  90. position: relative;
  91. width: 710rpx;
  92. height: 128rpx;
  93. }
  94. .container .body .body_header .info_bg.data-v-07e72d3c {
  95. position: absolute;
  96. z-index: 1;
  97. width: 100%;
  98. height: 100%;
  99. pointer-events: none;
  100. }
  101. .container .body .body_header .info_img.data-v-07e72d3c {
  102. position: absolute;
  103. top: 20rpx;
  104. left: 20rpx;
  105. z-index: 1;
  106. width: 90rpx;
  107. height: 90rpx;
  108. border-radius: 50%;
  109. }
  110. .container .body .body_header .info_name.data-v-07e72d3c {
  111. position: absolute;
  112. top: 15rpx;
  113. left: 132rpx;
  114. z-index: 1;
  115. font-size: 32rpx;
  116. font-weight: bold;
  117. }
  118. .container .body .body_header .info_detail.data-v-07e72d3c {
  119. position: absolute;
  120. top: 64rpx;
  121. left: 132rpx;
  122. z-index: 1;
  123. width: 136rpx;
  124. height: 46rpx;
  125. line-height: 46rpx;
  126. text-align: center;
  127. font-size: 24rpx;
  128. color: #0061ff;
  129. border-radius: 5rpx;
  130. background-color: #ebf2ff;
  131. }
  132. .container .body .body_header .info_change.data-v-07e72d3c {
  133. position: absolute;
  134. top: 48rpx;
  135. left: 393rpx;
  136. z-index: 1;
  137. font-size: 24rpx;
  138. color: #a6a6a6;
  139. }
  140. .container .body .body_header .info_no.data-v-07e72d3c {
  141. position: absolute;
  142. top: 38rpx;
  143. left: 163rpx;
  144. z-index: 1;
  145. font-size: 30rpx;
  146. color: #a6a6a6;
  147. }
  148. .container .body .body_header .info_bind.data-v-07e72d3c {
  149. position: absolute;
  150. top: 20rpx;
  151. right: 0;
  152. display: flex;
  153. justify-content: flex-end;
  154. align-items: center;
  155. padding-right: 25rpx;
  156. width: 300rpx;
  157. height: 102rpx;
  158. font-size: 28rpx;
  159. color: #0061ff;
  160. background-color: #e8f1ff;
  161. }
  162. .container .body .body_header .info_bind .bind_img.data-v-07e72d3c {
  163. margin-right: 5rpx;
  164. width: 42rpx;
  165. height: 42rpx;
  166. }
  167. .container .body .body_list.data-v-07e72d3c {
  168. max-height: calc(100vh - 790rpx);
  169. overflow-y: auto;
  170. box-sizing: border-box;
  171. padding: 30rpx 30rpx;
  172. display: grid;
  173. grid-template-columns: repeat(3, 1fr);
  174. grid-auto-rows: 240rpx;
  175. background-color: #fff;
  176. gap: 20rpx 10rpx;
  177. }
  178. .container .body .body_list .list_box.data-v-07e72d3c {
  179. display: flex;
  180. flex-direction: column;
  181. justify-content: space-evenly;
  182. align-items: center;
  183. font-size: 28rpx;
  184. overflow: hidden;
  185. }
  186. .container .body .body_list .list_box .box_img.data-v-07e72d3c {
  187. width: 120rpx;
  188. height: 120rpx;
  189. border-radius: 32rpx;
  190. }
  191. .container .body .body_list .list_box .box_text.data-v-07e72d3c {
  192. width: 100%;
  193. text-align: center;
  194. overflow: hidden;
  195. text-overflow: ellipsis;
  196. white-space: nowrap;
  197. }