questionnaire-result.wxss 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. .plv-mp-questionnaire-result {
  2. position: absolute;
  3. top: 0;
  4. display: flex;
  5. flex-direction: column;
  6. height: 100%;
  7. width: 100%;
  8. background: #fff;
  9. }
  10. .plv-mp-questionnaire-result-head {
  11. position: relative;
  12. padding: 17px 16px;
  13. color: #333;
  14. font-size: 14px;
  15. line-height: 14px;
  16. background: #fff;
  17. border: 1px solid #eceff1;
  18. word-break: break-all;
  19. text-align: center;
  20. }
  21. .plv-mp-questionnaire-result-head__close {
  22. position: absolute;
  23. top: 0;
  24. bottom: 0;
  25. margin: auto;
  26. right: 0;
  27. width: 50px;
  28. height: 14px;
  29. color: #90a4ae;
  30. text-align: center;
  31. font-size: 25px;
  32. }
  33. .plv-mp-questionnaire-result-body {
  34. padding: 0 23px;
  35. flex: 1;
  36. overflow-y: auto;
  37. }
  38. .plv-mp-questionnaire-result-body__title {
  39. margin: 22px 0;
  40. text-align: center;
  41. color: #333;
  42. font-size: 16px;
  43. font-weight: 600;
  44. word-break: break-all;
  45. }
  46. .plv-mp-questionnaire-result-body .plv-mp-result-question {
  47. margin-bottom: 20px;
  48. color: #455a64;
  49. }
  50. .plv-mp-questionnaire-result-body .plv-mp-result-question__title {
  51. margin-bottom: 20px;
  52. color: #333;
  53. word-break: break-all;
  54. font-size: 16px;
  55. }
  56. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-option-item {
  57. position: relative;
  58. width: 100%;
  59. margin-top: 12px;
  60. padding: 10px 16px;
  61. background: #edf1f7;
  62. border-radius: 20px;
  63. font-size: 14px;
  64. color: #546e7a;
  65. box-sizing: border-box;
  66. }
  67. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-option-item__text {
  68. padding-right: 25px;
  69. word-break: break-all;
  70. }
  71. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-option-item__icon {
  72. display: none;
  73. position: absolute;
  74. right: 16px;
  75. top: 0;
  76. bottom: 0;
  77. margin: auto;
  78. width: 16px;
  79. height: 16px;
  80. }
  81. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-option-item--select {
  82. background: #c0e3ff;
  83. color: #2196f3;
  84. }
  85. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-option-item--wrong {
  86. background: #ffe3e3;
  87. color: #e45b5b;
  88. }
  89. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-option-item--wrong .plv-mp-result-question-option-item__icon--wrong {
  90. display: inline-block;
  91. }
  92. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-option-item--my-correct {
  93. background: #c0e3ff;
  94. color: #2196f3;
  95. }
  96. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-option-item--my-correct .plv-mp-result-question-option-item__icon--correct {
  97. display: inline-block;
  98. }
  99. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-option-item--correct {
  100. background: #c0e3ff;
  101. color: #2196f3;
  102. }
  103. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-detail {
  104. position: relative;
  105. margin-top: 20px;
  106. padding: 16px;
  107. background: #edf1f7;
  108. border-radius: 5px;
  109. font-size: 14px;
  110. }
  111. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-detail__answer {
  112. font-weight: 600;
  113. margin: 0 0 8px;
  114. }
  115. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-detail__item {
  116. line-height: 22px;
  117. }
  118. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question-detail:before {
  119. content: "";
  120. position: absolute;
  121. top: -6px;
  122. border-left: 7px solid transparent;
  123. border-right: 7px solid transparent;
  124. border-bottom: 7px solid #edf1f7;
  125. }
  126. .plv-mp-questionnaire-result-body .plv-mp-result-question .plv-mp-result-question__textarea {
  127. display: inline-block;
  128. width: 100%;
  129. min-height: 80px;
  130. max-height: 180px;
  131. padding: 8px 10px;
  132. border: 1px solid #cfd8dc;
  133. font-size: 14px;
  134. color: #333;
  135. word-break: break-all;
  136. overflow-y: auto;
  137. vertical-align: bottom;
  138. border-radius: 4px;
  139. box-sizing: border-box;
  140. }
  141. .plv-mp-questionnaire-result-footer {
  142. height: 79px;
  143. padding: 15px 23px;
  144. border: 0;
  145. box-sizing: border-box;
  146. }
  147. .plv-mp-questionnaire-result-footer__confirm {
  148. width: 100%;
  149. height: 48px;
  150. margin: 0;
  151. background: #2196f3;
  152. color: #fff;
  153. border: 0;
  154. border-radius: 25px;
  155. }
  156. .plv-mp-questionnaire-result__text--blue {
  157. color: #2196f3;
  158. }
  159. .plv-mp-questionnaire-result__text--required {
  160. color: #ff5722;
  161. }