myReport.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <div>
  3. <!-- <div class="myBox">
  4. <div class="myLeftBox">
  5. <div><MrBasicData></MrBasicData></div>
  6. <div><MrOverPer></MrOverPer></div>
  7. </div>
  8. <div class="myMiddleBox"><MyCourseReport></MyCourseReport></div>
  9. <div class="myRightBox">
  10. <div>
  11. <CourseEvaScore></CourseEvaScore>
  12. </div>
  13. </div>
  14. </div> -->
  15. <div class="sr_body">
  16. <div class="sr_box">
  17. <div class="sr_first">
  18. <div class="first">
  19. <div class="sub_title"><span>基础信息</span></div>
  20. <MrBasicData class="r_box"></MrBasicData>
  21. </div>
  22. <div class="second">
  23. <div class="sub_title"><span>我的综合表现</span></div>
  24. <MrOverPer class="r_box"></MrOverPer>
  25. </div>
  26. <div class="third">
  27. <div class="sub_title"><span>我的学习状态</span></div>
  28. <MrLearnStatus class="r_box"></MrLearnStatus>
  29. </div>
  30. </div>
  31. <div class="sr_second" style="height:965px">
  32. <div class="first">
  33. <div class="sub_title"><span>我的课程报告</span></div>
  34. <MyCourseReport class="r_box"></MyCourseReport>
  35. </div>
  36. </div>
  37. <div class="sr_third">
  38. <div class="first">
  39. <div class="sub_title"><span>课程评价得分</span></div>
  40. <CourseEvaScore class="r_box"></CourseEvaScore>
  41. </div>
  42. <div class="second">
  43. <div class="sub_title"><span>课程类型分析</span></div>
  44. <CourseTypeAna class="r_box"></CourseTypeAna>
  45. </div>
  46. <div class="third">
  47. <div class="sub_title"><span>工具类型分析</span></div>
  48. <ToolTypeAna class="r_box"></ToolTypeAna>
  49. </div>
  50. </div>
  51. </div>
  52. <div style="height: 100%;overflow-x: hidden;">
  53. <div class="sub_title"><span>目标体系1</span></div>
  54. <MrEva class="r_box"></MrEva>
  55. </div>
  56. </div>
  57. </div>
  58. </template>
  59. <script>
  60. import MrBasicData from "./components/mrBasicData.vue";
  61. import MrOverPer from "./components/mrOverPer.vue";
  62. import MyCourseReport from "./components/myCourseReport.vue";
  63. import MrLearnStatus from "./components/mrLearnStatus.vue";
  64. import CourseEvaScore from "./components/courseEvaScore.vue";
  65. import CourseTypeAna from "./components/courseTypeAna.vue";
  66. import ToolTypeAna from "./components/toolTypeAna.vue";
  67. import MrEva from "./components/mrEva.vue";
  68. export default {
  69. components: {
  70. MrBasicData,
  71. MrOverPer,
  72. MyCourseReport,
  73. MrLearnStatus,
  74. CourseEvaScore,
  75. CourseTypeAna,
  76. ToolTypeAna,
  77. MrEva,
  78. },
  79. data() {
  80. return {
  81. userid: this.$route.query.userid,
  82. org: this.$route.query.org,
  83. oid: this.$route.query.oid,
  84. };
  85. },
  86. };
  87. </script>
  88. <style scoped>
  89. .sr_head {
  90. color: rgb(21, 80, 183);
  91. font-size: 30px;
  92. font-weight: bolder;
  93. text-align: center;
  94. margin-bottom: 15px;
  95. }
  96. .sr_body {
  97. width: 95%;
  98. margin: 0 auto;
  99. height: calc(100% - 55px);
  100. overflow: auto;
  101. }
  102. .sr_box {
  103. width: 100%;
  104. height: 100%;
  105. display: flex;
  106. min-width: 1100px;
  107. min-height: 700px;
  108. }
  109. .sr_first {
  110. width: calc(100% / 3.75);
  111. height: 100%;
  112. }
  113. .sr_second {
  114. width: calc(100% / 3.75 * 2);
  115. height: 100%;
  116. }
  117. .sr_third {
  118. width: calc(100% / 3.75 * 0.75);
  119. height: 100%;
  120. }
  121. .sr_first,
  122. .sr_second,
  123. .sr_third {
  124. display: flex;
  125. flex-direction: column;
  126. align-items: center;
  127. }
  128. .sr_first .first,
  129. .sr_first .second,
  130. .sr_first .third,
  131. .sr_second .first,
  132. .sr_second .second,
  133. .sr_third .first,
  134. .sr_third .second,
  135. .sr_third .third {
  136. background: #fff;
  137. border-radius: 10px;
  138. width: 98%;
  139. overflow: hidden;
  140. }
  141. .sr_first .first {
  142. height: calc(100% / 3);
  143. margin-bottom: 20px;
  144. }
  145. .sr_first .second {
  146. height: calc(100% / 3);
  147. margin-bottom: 20px;
  148. }
  149. .sr_first .third {
  150. height: calc(100% / 3);
  151. }
  152. .sr_second .first {
  153. /* height: calc(100% / 3.5 * 2); */
  154. height: calc(100%);
  155. /* margin-bottom: 20px; */
  156. }
  157. .sr_second .second {
  158. /* height: calc(100% / 3.5 * 1.5); */
  159. }
  160. .sr_third .first {
  161. height: calc(100% / 2.25);
  162. margin-bottom: 20px;
  163. }
  164. .sr_third .second {
  165. height: calc(100% / 2.25);
  166. margin-bottom: 20px;
  167. }
  168. .sr_third .third {
  169. height: calc(100% / 2.25);
  170. }
  171. .sub_title {
  172. display: flex;
  173. color: #3050c2;
  174. font-weight: bold;
  175. align-items: center;
  176. justify-content: space-between;
  177. height: 40px;
  178. width: 200px;
  179. margin: 0 15px;
  180. }
  181. .r_box {
  182. height: calc(100% - 40px);
  183. width: 100%;
  184. }
  185. </style>