index.less 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. @charset "utf-8";
  2. #paper-question,
  3. #question-detail {
  4. height: 100%;
  5. .base {
  6. height: 100%;
  7. .layout {
  8. background: #fff;
  9. height: 100%;
  10. display: flex;
  11. flex-direction: row;
  12. &.exercise {
  13. // border-top: 20px solid #7775CA;
  14. // background: #fff;
  15. // .layout-header {
  16. // height: 60px;
  17. // top: 20px;
  18. // }
  19. border-top: none;
  20. }
  21. // &.sentence {
  22. // border-top: 20px solid #435C96;
  23. // background: #fff;
  24. // }
  25. &.examination {
  26. border-top: 20px solid #8D909C;
  27. background: #fff;
  28. .layout-header {
  29. height: 60px;
  30. top: 20px;
  31. }
  32. }
  33. .layout-header {
  34. height: 60px;
  35. line-height: 60px;
  36. position: fixed;
  37. top: 0;
  38. left: 0;
  39. right: 0;
  40. box-shadow: 0px 4px 14px 0px rgba(189, 199, 215, 0.16);
  41. text-align: center;
  42. z-index: 80;
  43. .left {
  44. position: absolute;
  45. left: 50px;
  46. .btn {
  47. display: inline-block;
  48. padding-right: 10px;
  49. line-height: 60px;
  50. }
  51. .no {
  52. font-size: 20px;
  53. display: inline-block;
  54. color: #303036;
  55. font-size: 20px;
  56. margin-right: 25px;
  57. }
  58. .title {
  59. color: #A7A7B7;
  60. display: inline-block;
  61. font-size: 20px;
  62. img {
  63. margin-top: -3px;
  64. margin-right: 5px;
  65. }
  66. }
  67. }
  68. .menu-wrap {
  69. position: absolute;
  70. right: 0;
  71. text-align: left;
  72. padding: 0 10px;
  73. white-space: nowrap;
  74. .menu-content {
  75. position: absolute;
  76. background: #fff;
  77. text-align: left;
  78. top: 50px;
  79. right: 10px;
  80. border: 1px solid #EAEDF2;
  81. padding: 10px 20px;
  82. min-width: 150px;
  83. p {
  84. line-height: 30px;
  85. height: 30px;
  86. text-align: left;
  87. margin: 0;
  88. }
  89. }
  90. }
  91. .center {
  92. position: absolute;
  93. right: 50%;
  94. transform: translateX(100%);
  95. .icon {
  96. margin-left: 20px;
  97. }
  98. }
  99. .right {
  100. position: absolute;
  101. right: 50px;
  102. .b {
  103. margin-left: 30px;
  104. .s {
  105. color: #4299FF;
  106. }
  107. }
  108. .icon {
  109. margin-left: 10px;
  110. }
  111. }
  112. }
  113. }
  114. .layout-footer {
  115. position: fixed;
  116. bottom: 0;
  117. left: 0;
  118. right: 0;
  119. height: 60px;
  120. line-height: 60px;
  121. box-shadow: 0px -4px 14px 0px rgba(189, 199, 215, 0.16);
  122. .left {
  123. width: 30%;
  124. display: inline-block;
  125. padding-left: 50px;
  126. }
  127. .right {
  128. width: 30%;
  129. display: inline-block;
  130. text-align: right;
  131. padding-right: 50px;
  132. .icon {
  133. margin-left: 10px;
  134. }
  135. }
  136. .center {
  137. width: 40%;
  138. display: inline-block;
  139. text-align: center;
  140. .item {
  141. margin: 0 10px;
  142. }
  143. }
  144. }
  145. .layout-body {
  146. background: #fff;
  147. flex: 1;
  148. overflow: hidden;
  149. margin: 60px 0;
  150. .layout-content {
  151. height: 100%;
  152. position: relative;
  153. .one {
  154. flex: 1;
  155. display: flex;
  156. flex-direction: column;
  157. width: 50%;
  158. overflow: hidden;
  159. }
  160. .two {
  161. flex: 1;
  162. display: flex;
  163. flex-direction: row;
  164. overflow: hidden;
  165. height: 100%;
  166. }
  167. .block {
  168. flex: 1;
  169. }
  170. .block-content,
  171. .block-answer,
  172. .block-text,
  173. .block-awa {
  174. box-sizing: border-box;
  175. padding: 30px 60px;
  176. color: #303036;
  177. height: 100%;
  178. overflow: hidden;
  179. overflow-y: auto;
  180. }
  181. .block-content {
  182. h2 {
  183. padding: 65px 0 20px 0px;
  184. font-size: 20px;
  185. color: #303036;
  186. }
  187. }
  188. .block-awa {
  189. background: #EFF3F7;
  190. h2 {
  191. font-size: 20px;
  192. color: #303036;
  193. margin-top: 37px;
  194. margin-bottom: 23px;
  195. }
  196. .detail {
  197. .info {
  198. font-weight: bold;
  199. font-size: 18px;
  200. color: #303036;
  201. span.b {
  202. margin-right: 80px;
  203. .s {
  204. color: #4299FF;
  205. }
  206. }
  207. }
  208. }
  209. .content-awa {
  210. padding-top: 50px;
  211. color: #686872;
  212. font-size: 16px;
  213. }
  214. .show-awa {
  215. font-size: 12px;
  216. width: 100%;
  217. height: 100%;
  218. margin: 50% 0;
  219. text-align: center;
  220. line-height: 20px;
  221. color: #A7A7B7;
  222. }
  223. }
  224. .block-analysis {
  225. background: #EFF3F7;
  226. padding: 25px 25px 0 20px;
  227. display: flex;
  228. flex-direction: column;
  229. .block-answer {
  230. padding: 38px 50px;
  231. }
  232. .block {
  233. background: #fff;
  234. margin-bottom: 5px;
  235. }
  236. .detail {
  237. flex: 1;
  238. display: flex;
  239. flex-direction: column;
  240. height: 100%;
  241. .detail-block {
  242. box-sizing: border-box;
  243. flex: 1;
  244. overflow: hidden;
  245. overflow-y: auto;
  246. font-size: 16px;
  247. color: #686872;
  248. background: #fff;
  249. }
  250. .ant-carousel {
  251. height: 100%;
  252. .slick-slider {
  253. height: 100%;
  254. }
  255. .slick-list {
  256. height: 100%;
  257. }
  258. .slick-track {
  259. height: 100%;
  260. }
  261. .slick-slide {
  262. height: 100%;
  263. overflow: hidden;
  264. overflow-y: auto;
  265. }
  266. .slick-dots {
  267. li {
  268. button {
  269. background: #D0D8E2;
  270. width: 4px;
  271. }
  272. }
  273. .slick-active {
  274. button {
  275. background: #4299FF;
  276. width: 24px;
  277. }
  278. }
  279. }
  280. }
  281. // .answer-block {
  282. // margin-bottom: 5px;
  283. // }
  284. }
  285. .other {
  286. flex: 1;
  287. background: #fff;
  288. padding: 30px 50px;
  289. overflow: hidden;
  290. overflow-y: auto;
  291. font-size: 16px;
  292. color: #686872;
  293. .other-answer {
  294. margin-bottom: 30px;
  295. }
  296. }
  297. }
  298. .two-analysis {
  299. position: absolute;
  300. height: 100%;
  301. top: 0;
  302. left: 0;
  303. width: 50%;
  304. transition: all 0.3s;
  305. transform: translateX(200%);
  306. }
  307. .two-analysis.show {
  308. transform: translateX(100%);
  309. }
  310. .fixed-analysis {
  311. height: 110px;
  312. line-height: 20px;
  313. position: absolute;
  314. width: 35px;
  315. padding: 5px;
  316. right: 0;
  317. top: 50%;
  318. transform: translateY(-50%);
  319. border: 1px solid #E7E7E7;
  320. background: #fff;
  321. z-index: 9;
  322. color: #787883;
  323. cursor: pointer;
  324. text-align: center;
  325. }
  326. }
  327. }
  328. }
  329. }