ResumeEvaluation.wxss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. .max-w-4xl {
  2. max-width: 56rem;
  3. margin: 0 auto;
  4. }
  5. .p-6 {
  6. padding: 1.5rem;
  7. }
  8. .relative {
  9. position: relative;
  10. }
  11. /* .bg-\[\#1d1e3a\] {
  12. background-color: #1d1e3a;
  13. } */
  14. .text-white {
  15. color: white;
  16. }
  17. .p-4 {
  18. padding: 1rem;
  19. }
  20. .rounded-t-lg {
  21. border-top-left-radius: 0.5rem;
  22. border-top-right-radius: 0.5rem;
  23. }
  24. .flex {
  25. display: flex;
  26. }
  27. .justify-between {
  28. justify-content: space-between;
  29. }
  30. .items-center {
  31. align-items: center;
  32. }
  33. .text-sm {
  34. font-size: 0.875rem;
  35. }
  36. .bg-white {
  37. background-color: white;
  38. }
  39. .rounded-b-lg {
  40. border-bottom-left-radius: 0.5rem;
  41. border-bottom-right-radius: 0.5rem;
  42. }
  43. .shadow-lg {
  44. box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  45. }
  46. .mb-8 {
  47. margin-bottom: 2rem;
  48. }
  49. .pb-4 {
  50. padding-bottom: 1rem;
  51. }
  52. .border-b {
  53. border-bottom-width: 1px;
  54. border-bottom-style: solid;
  55. border-bottom-color: #e5e7eb;
  56. }
  57. /* .space-x-4 > * + * {
  58. margin-left: 1rem;
  59. } */
  60. .w-20 {
  61. width: 5rem;
  62. }
  63. .h-20 {
  64. height: 5rem;
  65. }
  66. .bg-gray-200 {
  67. background-color: #e5e7eb;
  68. }
  69. .rounded-lg {
  70. border-radius: 0.5rem;
  71. }
  72. .overflow-hidden {
  73. overflow: hidden;
  74. }
  75. .w-full {
  76. width: 100%;
  77. }
  78. .h-full {
  79. height: 100%;
  80. }
  81. .object-cover {
  82. object-fit: cover;
  83. }
  84. .text-2xl {
  85. font-size: 1.5rem;
  86. }
  87. .font-bold {
  88. font-weight: bold;
  89. }
  90. .text-gray-600 {
  91. color: #4b5563;
  92. }
  93. .text-right {
  94. text-align: right;
  95. }
  96. .text-4xl {
  97. font-size: 2.25rem;
  98. }
  99. .text-yellow-500 {
  100. color: #f59e0b;
  101. }
  102. .ml-1 {
  103. margin-left: 0.25rem;
  104. }
  105. .text-base {
  106. font-size: 1rem;
  107. }
  108. .grid {
  109. display: grid;
  110. }
  111. .grid-cols-1 {
  112. grid-template-columns: repeat(1, minmax(0, 1fr));
  113. }
  114. .grid-cols-2 {
  115. grid-template-columns: repeat(2, minmax(0, 1fr));
  116. }
  117. .grid-cols-3 {
  118. grid-template-columns: repeat(3, minmax(0, 1fr));
  119. }
  120. .gap-4 {
  121. gap: 1rem;
  122. }
  123. .gap-2 {
  124. gap: 0.5rem;
  125. }
  126. .gap-8 {
  127. gap: 2rem;
  128. }
  129. .text-xl {
  130. font-size: 1.25rem;
  131. }
  132. .mb-6 {
  133. margin-bottom: 1.5rem;
  134. }
  135. .mb-4 {
  136. margin-bottom: 1rem;
  137. }
  138. .mb-2 {
  139. margin-bottom: 0.5rem;
  140. }
  141. /* .space-y-6 > * + * {
  142. margin-top: 1.5rem;
  143. }
  144. .space-y-4 > * + * {
  145. margin-top: 1rem;
  146. }
  147. .space-y-8 > * + * {
  148. margin-top: 2rem;
  149. } */
  150. .w-32 {
  151. width: 8rem;
  152. }
  153. .text-red-500 {
  154. color: #ef4444;
  155. }
  156. .text-green-500 {
  157. color: #10b981;
  158. }
  159. .text-sm {
  160. font-size: 0.875rem;
  161. }
  162. .font-semibold {
  163. font-weight: 600;
  164. }
  165. .mt-2 {
  166. margin-top: 0.5rem;
  167. }
  168. .text-gray-500 {
  169. color: #6b7280;
  170. }
  171. .mt-4 {
  172. margin-top: 1rem;
  173. }
  174. .video-container {
  175. position: relative;
  176. width: 100%;
  177. max-width: 240px;
  178. aspect-ratio: 3/4;
  179. margin: 0 auto;
  180. background: #000;
  181. border-radius: 12px;
  182. overflow: hidden;
  183. }
  184. .justify-end {
  185. justify-content: flex-end;
  186. }
  187. .text-blue-500 {
  188. color: #3b82f6;
  189. }
  190. .text-lg {
  191. font-size: 1.125rem;
  192. }
  193. .bg-gray-50 {
  194. background-color: #f9fafb;
  195. }
  196. .aspect-square {
  197. aspect-ratio: 1 / 1;
  198. }
  199. .bg-gray-100 {
  200. background-color: #f3f4f6;
  201. }
  202. .form-item {
  203. margin-bottom: 1.5rem;
  204. }
  205. .border {
  206. border-width: 1px;
  207. border-style: solid;
  208. border-color: #e5e7eb;
  209. }
  210. .rounded {
  211. border-radius: 0.25rem;
  212. }
  213. .bg-blue-500 {
  214. background-color: #3b82f6;
  215. }
  216. .px-4 {
  217. padding-left: 1rem;
  218. padding-right: 1rem;
  219. }
  220. .py-2 {
  221. padding-top: 0.5rem;
  222. padding-bottom: 0.5rem;
  223. }
  224. .fixed-buttons {
  225. position: fixed;
  226. right: 2rem;
  227. bottom: 6rem;
  228. display: flex;
  229. flex-direction: column;
  230. gap: 1rem;
  231. z-index: 100;
  232. }
  233. .action-button {
  234. width: 40px;
  235. height: 40px;
  236. border-radius: 50%;
  237. background-color: #3b82f6;
  238. color: white;
  239. display: flex;
  240. align-items: center;
  241. justify-content: center;
  242. box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  243. }
  244. /* 为了模拟图标,你可能需要引入字体图标或使用其他方式 */
  245. @font-face {
  246. font-family: "iconfont";
  247. src: url('data:font/woff2;charset=utf-8;base64,...') format('woff2');
  248. }
  249. .iconfont {
  250. font-family: "iconfont" !important;
  251. font-style: normal;
  252. -webkit-font-smoothing: antialiased;
  253. -moz-osx-font-smoothing: grayscale;
  254. }
  255. /* 媒体查询适配移动端 */
  256. @media (max-width: 768px) {
  257. .p-6 {
  258. padding: 1rem;
  259. }
  260. .fixed-buttons {
  261. right: 1rem;
  262. }
  263. }
  264. .custom-column {
  265. flex-direction: column;
  266. }