test.css 7.6 KB

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