home.wxss 4.0 KB

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