123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- <template>
- <div>
- <!-- <div class="myBox">
- <div class="myLeftBox">
- <div><MrBasicData></MrBasicData></div>
- <div><MrOverPer></MrOverPer></div>
- </div>
- <div class="myMiddleBox"><MyCourseReport></MyCourseReport></div>
- <div class="myRightBox">
- <div>
- <CourseEvaScore></CourseEvaScore>
- </div>
- </div>
- </div> -->
- <div class="sr_body">
- <div class="sr_box">
- <div class="sr_first">
- <div class="first">
- <div class="sub_title"><span>基础信息</span></div>
- <MrBasicData class="r_box"></MrBasicData>
- </div>
- <div class="second">
- <div class="sub_title"><span>我的综合表现</span></div>
- <MrOverPer class="r_box"></MrOverPer>
- </div>
- <div class="third">
- <div class="sub_title"><span>我的学习状态</span></div>
- <MrLearnStatus class="r_box"></MrLearnStatus>
- </div>
- </div>
- <div class="sr_second" style="height:965px">
- <div class="first">
- <div class="sub_title"><span>我的课程报告</span></div>
- <MyCourseReport class="r_box"></MyCourseReport>
- </div>
- </div>
- <div class="sr_third">
- <div class="first">
- <div class="sub_title"><span>课程评价得分</span></div>
- <CourseEvaScore class="r_box"></CourseEvaScore>
- </div>
- <div class="second">
- <div class="sub_title"><span>课程类型分析</span></div>
- <CourseTypeAna class="r_box"></CourseTypeAna>
- </div>
- <div class="third">
- <div class="sub_title"><span>工具类型分析</span></div>
- <ToolTypeAna class="r_box"></ToolTypeAna>
- </div>
- </div>
- </div>
- <div style="height: 100%;overflow-x: hidden;">
- <div class="sub_title"><span>目标体系1</span></div>
- <MrEva class="r_box"></MrEva>
- </div>
- </div>
- </div>
- </template>
- <script>
- import MrBasicData from "./components/mrBasicData.vue";
- import MrOverPer from "./components/mrOverPer.vue";
- import MyCourseReport from "./components/myCourseReport.vue";
- import MrLearnStatus from "./components/mrLearnStatus.vue";
- import CourseEvaScore from "./components/courseEvaScore.vue";
- import CourseTypeAna from "./components/courseTypeAna.vue";
- import ToolTypeAna from "./components/toolTypeAna.vue";
- import MrEva from "./components/mrEva.vue";
- export default {
- components: {
- MrBasicData,
- MrOverPer,
- MyCourseReport,
- MrLearnStatus,
- CourseEvaScore,
- CourseTypeAna,
- ToolTypeAna,
- MrEva,
- },
- data() {
- return {
- userid: this.$route.query.userid,
- org: this.$route.query.org,
- oid: this.$route.query.oid,
- };
- },
- };
- </script>
- <style scoped>
- .sr_head {
- color: rgb(21, 80, 183);
- font-size: 30px;
- font-weight: bolder;
- text-align: center;
- margin-bottom: 15px;
- }
- .sr_body {
- width: 95%;
- margin: 0 auto;
- height: calc(100% - 55px);
- overflow: auto;
- }
- .sr_box {
- width: 100%;
- height: 100%;
- display: flex;
- min-width: 1100px;
- min-height: 700px;
- }
- .sr_first {
- width: calc(100% / 3.75);
- height: 100%;
- }
- .sr_second {
- width: calc(100% / 3.75 * 2);
- height: 100%;
- }
- .sr_third {
- width: calc(100% / 3.75 * 0.75);
- height: 100%;
- }
- .sr_first,
- .sr_second,
- .sr_third {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
- .sr_first .first,
- .sr_first .second,
- .sr_first .third,
- .sr_second .first,
- .sr_second .second,
- .sr_third .first,
- .sr_third .second,
- .sr_third .third {
- background: #fff;
- border-radius: 10px;
- width: 98%;
- overflow: hidden;
- }
- .sr_first .first {
- height: calc(100% / 3);
- margin-bottom: 20px;
- }
- .sr_first .second {
- height: calc(100% / 3);
- margin-bottom: 20px;
- }
- .sr_first .third {
- height: calc(100% / 3);
- }
- .sr_second .first {
- /* height: calc(100% / 3.5 * 2); */
- height: calc(100%);
- /* margin-bottom: 20px; */
- }
- .sr_second .second {
- /* height: calc(100% / 3.5 * 1.5); */
- }
- .sr_third .first {
- height: calc(100% / 2.25);
- margin-bottom: 20px;
- }
- .sr_third .second {
- height: calc(100% / 2.25);
- margin-bottom: 20px;
- }
- .sr_third .third {
- height: calc(100% / 2.25);
- }
- .sub_title {
- display: flex;
- color: #3050c2;
- font-weight: bold;
- align-items: center;
- justify-content: space-between;
- height: 40px;
- width: 200px;
- margin: 0 15px;
- }
- .r_box {
- height: calc(100% - 40px);
- width: 100%;
- }
- </style>
|