test.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. .project{
  2. height: 70px;
  3. line-height: 70px;
  4. background: #1AA1E6;
  5. font-size: 24px;
  6. color: #FFFFFF;
  7. font-weight: bold;
  8. }
  9. .project-content{
  10. margin: 38px 0;
  11. justify-content: center;
  12. align-items: stretch;
  13. }
  14. /* 考试 */
  15. .test-box{
  16. width: 890px;
  17. min-height: 812px;
  18. background: #FFFFFF;
  19. border-radius: 0px 0px 0px 0px;
  20. opacity: 1;
  21. border: 3px solid #FFFFFF;
  22. position: relative;
  23. padding: 30px;
  24. box-sizing: border-box;
  25. }
  26. .test-box-title{
  27. font-size: 18px;
  28. }
  29. .test-question-box{
  30. margin-top: 30px;
  31. }
  32. .test-question{
  33. font-size: 18px;
  34. }
  35. .short{
  36. height: 300px;
  37. border-radius: 10px;
  38. margin-top: 20px;
  39. border: 1px solid #C4C4C4;
  40. }
  41. .text-ans{
  42. width: 100%;
  43. height: 100%;
  44. font-size: 16px;
  45. color: #333;
  46. padding: 20px;
  47. box-sizing: border-box;
  48. }
  49. .placeholder{
  50. color: #C4C4C4;
  51. }
  52. .test-question-answer{
  53. margin-top: 20px;
  54. }
  55. .answer-item{
  56. margin-top: 20px;
  57. cursor: pointer;
  58. }
  59. .answer-checked{
  60. width: 24px;
  61. height: 24px;
  62. background: #0BBE2F;
  63. opacity: 1;
  64. border: 2px solid #0BBE2F;
  65. border-radius: 100%;
  66. margin-right: 20px;
  67. }
  68. .answer-unchecked{
  69. width: 24px;
  70. height: 24px;
  71. opacity: 1;
  72. border: 2px solid #999999;
  73. border-radius: 100%;
  74. margin-right: 20px;
  75. }
  76. .answer-text{
  77. font-size: 18px;
  78. }
  79. .test-btn-group{
  80. position: absolute;
  81. bottom: 40px;
  82. right: 70px;
  83. }
  84. .test-btn{
  85. width: 150px;
  86. height: 42px;
  87. line-height: 42px;
  88. text-align: center;
  89. background: #FFFFFF;
  90. border-radius: 6px 6px 6px 6px;
  91. opacity: 1;
  92. border: 1px solid #707070;
  93. margin-left: 60px;
  94. cursor: pointer;
  95. }
  96. .test-info{
  97. width: 280px;
  98. flex-direction: column;
  99. justify-content: space-between;
  100. margin-left: 30px;
  101. }
  102. /* 考试信息 */
  103. .test-people{
  104. width: 100%;
  105. background-color: #FFFFFF;
  106. padding: 12px 11px;
  107. box-sizing: border-box;
  108. }
  109. .test-people image{
  110. width: 80px;
  111. height: 89px;
  112. margin-right: 19px;
  113. }
  114. .test-people-info{
  115. flex-direction: column;
  116. justify-content: space-between;
  117. font-size: 14px;
  118. flex: 1;
  119. align-items: flex-start;
  120. }
  121. .test-people-label{
  122. color: #999999;
  123. line-height: 36px;
  124. margin-right: 8px;
  125. }
  126. /* 考试倒计时 */
  127. .test-date{
  128. width: 100%;
  129. background-color: #FFFFFF;
  130. padding: 30px;
  131. box-sizing: border-box;
  132. margin-top: 20px;
  133. }
  134. .test-date-title{
  135. text-align: center;
  136. font-size: 12px;
  137. font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  138. font-weight: 400;
  139. color: #666666;
  140. }
  141. .test-date-group{
  142. margin: 14px auto 0;
  143. justify-content: center;
  144. }
  145. .test-date-item{
  146. width: 35px;
  147. height: 35px;
  148. line-height: 35px;
  149. background: #FF0000;
  150. border-radius: 2px 2px 2px 2px;
  151. color: #fff;
  152. text-align: center;
  153. font-size: 24px;
  154. }
  155. .test-date-symbol{
  156. font-size: 24px;
  157. font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  158. font-weight: 400;
  159. color: #B7B7B7;
  160. margin: 0 5px;
  161. }
  162. /* 答题卡 */
  163. .test-answer{
  164. width: 100%;
  165. background-color: #FFFFFF;
  166. padding: 30px;
  167. box-sizing: border-box;
  168. margin-top: 20px;
  169. position: relative;
  170. }
  171. .test-answer-title{
  172. font-size: 18px;
  173. font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  174. font-weight: bold;
  175. color: #333333;
  176. text-align: center;
  177. }
  178. .test-answer-info{
  179. margin: 20px 0;
  180. color: #B7B7B7;
  181. font-size: 14px;
  182. justify-content: center;
  183. }
  184. .test-answer-info-symbol{
  185. width: 1px;
  186. height: 14px;
  187. background-color: #B7B7B7;
  188. margin: 0 10px;
  189. }
  190. .test-answer-box{
  191. flex-wrap: wrap;
  192. padding-bottom: 30px;
  193. border-bottom: 1px solid #EBEBEB;
  194. }
  195. .test-answer-item{
  196. width: 34px;
  197. height: 24px;
  198. line-height: 24px;
  199. background: #FFFFFF;
  200. border-radius: 5px 5px 5px 5px;
  201. opacity: 1;
  202. border: 1px solid #999999;
  203. color: #999999;
  204. text-align: center;
  205. font-size: 14px;
  206. margin-right: 8px;
  207. margin-bottom: 10px;
  208. cursor: pointer;
  209. }
  210. .test-answer-item:nth-child(5n+5){
  211. margin-right: 0px;
  212. }
  213. .test-answer-item-curActive{
  214. border: 1px solid #333;
  215. color: #333;
  216. }
  217. .test-answer-item-active{
  218. border: 1px solid #0BBE2F;
  219. color: #0BBE2F;
  220. }
  221. .test-answer-number{
  222. justify-content: space-between;
  223. font-size: 12px;
  224. color: #999999;
  225. margin-top: 10px;
  226. }
  227. .test-isanswer{
  228. width: 15px;
  229. height: 15px;
  230. border-radius: 2px 2px 2px 2px;
  231. opacity: 1;
  232. border: 1px solid #0BBE2F;
  233. margin-right: 10px;
  234. }
  235. .test-unanswer{
  236. width: 15px;
  237. height: 15px;
  238. background: #FFFFFF;
  239. border-radius: 2px 2px 2px 2px;
  240. opacity: 1;
  241. border: 1px solid #C7C7C7;
  242. margin-right: 10px;
  243. }
  244. .submit-btn{
  245. width: 220px;
  246. height: 42px;
  247. line-height: 42px;
  248. background: #F45D44;
  249. border-radius: 6px 6px 6px 6px;
  250. opacity: 1;
  251. color: #fff;
  252. text-align: center;
  253. font-size: 16px;
  254. position: absolute;
  255. bottom:40px;
  256. }
  257. /* 弹窗 */
  258. .popup-box{
  259. width: 722px;
  260. min-height: 326px;
  261. background: #FFFFFF;
  262. box-shadow: 0px 0px 10px 1px rgba(81,0,0,0.1);
  263. border-radius: 6px 6px 6px 6px;
  264. opacity: 1;
  265. border: 3px solid #FFFFFF;
  266. }
  267. .popup-top{
  268. height: 65px;
  269. line-height: 65px;
  270. padding: 0 25px 0 17px;
  271. border-bottom: 1px solid #EBEBEB;
  272. font-size: 14px;
  273. justify-content: space-between;
  274. }
  275. .popup-top image{
  276. width: 29px;
  277. height: 29px;
  278. cursor: pointer;
  279. }
  280. .popup-content{
  281. text-align: center;
  282. font-size: 16px;
  283. margin-top: 55px;
  284. }
  285. .popup-bottom{
  286. margin-top: 60px;
  287. justify-content: center;
  288. }
  289. .popup-btn1{
  290. width: 146px;
  291. height: 42px;
  292. line-height: 42px;
  293. border-radius: 21px 21px 21px 21px;
  294. opacity: 1;
  295. border: 1px solid #999999;
  296. text-align: center;
  297. cursor: pointer;
  298. }
  299. .popup-btn2{
  300. width: 146px;
  301. height: 42px;
  302. line-height: 42px;
  303. border-radius: 21px 21px 21px 21px;
  304. opacity: 1;
  305. border: 1px solid #DF230F;
  306. margin-left: 30px;
  307. text-align: center;
  308. color: #DF230F;
  309. cursor: pointer;
  310. }
  311. /* 出分 */
  312. .chufen-title{
  313. font-size: 24px;
  314. font-family: Source Han Sans CN-Bold, Source Han Sans CN;
  315. font-weight: bold;
  316. color: #333333;
  317. }
  318. .chufen-number{
  319. color: #F45D44;
  320. font-size: 46px;
  321. margin-top: 30px;
  322. }
  323. .popup-bottom-label{
  324. font-size: 16px;
  325. color: #999999;
  326. }
  327. .popup-bottom-value{
  328. font-size: 24px;
  329. color: #1AA1E6;
  330. margin-top: 20px;
  331. }
  332. .line{
  333. width: 1px;
  334. height: 57px;
  335. color: #DEDEDE;
  336. background-color: #DEDEDE;
  337. margin: 0 30px;
  338. }
  339. @media only screen and (max-width: 1400px) {
  340. .video-box{
  341. width: 180px;height: 100px;position: fixed;top:0;right: 0;z-index: 500;
  342. }
  343. }
  344. @media only screen and (min-width: 1401px) {
  345. .video-box{
  346. width: 280px;height: 200px;position: fixed;top:0;right: 0;z-index: 500;
  347. }
  348. }