update: examData修改自适应

src/assets/css/base.css

@@ -92,4 +92,4 @@ body {
   text-align: center;
   font-size: 18px;
   color: #999;
-}
+}
\ No newline at end of file

src/components/layout/index.vue

@@ -27,9 +27,9 @@ export default {
 .app-layout-bd {
   flex: 1;
   display: flex;
-
   .app-main {
     flex: 1;
+    overflow: hidden;
   }
 }
 </style>

src/modules/teacher/data/exam/components/ExamInfo.vue

@@ -44,6 +44,7 @@ export default {}
 }
 
 .title {
+  white-space:nowrap;
   font-size: 16px;
   color: #909090;
   font-weight: 400;

src/modules/teacher/data/exam/components/QuestionType.vue

 <template>
   <el-card class="box-card">
-    <div slot="header" class="clearfix">
-      <h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">题型数据</h1>
+    <div style="width: 90%; margin: 0 auto">
+      <div slot="header" class="clearfix">
+        <h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">题型数据</h1>
+      </div>
+      <div id="type" style="width: 100%; height: 360px"></div>
+      <div>客观题正确率76%</div>
+      <div>主观题正确率24%</div>
     </div>
-    <div id="type" style="width: 300px; height: 360px"></div>
-    <div>客观题正确率76%</div>
-    <div>主观题正确率24%</div>
   </el-card>
 </template>
 

src/modules/teacher/data/exam/components/Result.vue

 <template>
   <el-card class="box-card">
-    <div slot="header" class="clearfix">
-      <h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">结果统计</h1>
+    <div style="width: 90%; margin: 0 auto">
+      <div slot="header" class="clearfix">
+        <h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">结果统计</h1>
+      </div>
+      <div id="main" style="width: 100%; height: 400px"></div>
     </div>
-    <div id="main" style="width: 300px; height: 400px"></div>
   </el-card>
 </template>
 

src/modules/teacher/data/exam/components/Score.vue

@@ -44,6 +44,7 @@ export default {}
 }
 .title {
   font-size: 16px;
+  white-space:nowrap;
   color: #909090;
   font-weight: 400;
 }

src/modules/teacher/data/exam/components/ScoreRange.vue

 <template>
   <el-card class="box-card">
-    <div slot="header" class="clearfix">
-      <h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">考分区间</h1>
-      <el-button type="text" style="font-size: 16px; color: #aa1941; float: right; margin-top: -35px">设置</el-button>
+    <div style="width: 90%; margin: 0 auto">
+      <div slot="header" class="clearfix">
+        <h1 style="color: #333; font-size: 16px; border-left: 3px solid #aa1941; padding-left: 7px">考分区间</h1>
+        <el-button type="text" style="font-size: 16px; color: #aa1941; float: right; margin-top: -35px">设置</el-button>
+      </div>
+      <div id="score" style="width: 100%; height: 400px"></div>
     </div>
-    <div id="score" style="width: 300px; height: 400px"></div>
   </el-card>
 </template>
 

src/modules/teacher/data/exam/components/Submission.vue

@@ -43,6 +43,7 @@ export default {}
   margin-left: 9px;
 }
 .title {
+  white-space:nowrap;
   font-size: 16px;
   color: #909090;
   font-weight: 400;

src/modules/teacher/data/exam/index.js

@@ -2,8 +2,7 @@ const routes = [
   {
     path: '/',
     component: () => import('@/components/layout/index.vue'),
-    children: [
-      { path: '/teacher/data/exam', component: () => import('./views/List.vue') },
+    children: [{ path: '/teacher/data/exam', component: () => import('./views/List.vue') },
       { path: '/class', component: () => import('./views/ClassList.vue') },
       { path: '/PersonalList', component: () => import('./views/PersonalList.vue') },
       { path: '/teacher/data/exam/classDetail', component: () => import('./views/ClassDetail.vue') },

src/modules/teacher/data/exam/views/ExamData.vue

 <template>
-  <app-container>
+  <div class="data-box">
     <el-row type="flex" class="row-bg" justify="space-between" style="margin-bottom: 30px">
-      <el-col :span="10"><h1 style="padding-left: 50px; font-size: 30px">模拟测试一</h1></el-col>
-      <el-col :span="5">
+      <el-col :span="10"><div class="title">模拟测试一</div></el-col>
+      <el-col :span="7">
         <el-select v-model="label" placeholder="请选择">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
         </el-select>
         <el-button type="text" style="margin-left: 20px">导出pdf</el-button>
       </el-col>
     </el-row>
-    <el-row type="flex" class="row-bg">
-      <el-col style="min-width: 366px; margin-right: 21px"><ExamInfo /></el-col>
-      <el-col style="min-width: 366px; margin-right: 21px"><Submission /></el-col>
-      <el-col style="min-width: 366px"><Score /></el-col>
-    </el-row>
-    <el-row type="flex" class="row-bg" style="margin-top: 30px">
-      <el-col style="min-width: 560px; margin-right: 21px"><ScoreRanking /></el-col>
-      <el-col style="min-width: 560px"><TitleData /></el-col>
-    </el-row>
-    <el-row type="flex" class="row-bg" style="margin-top: 30px">
-      <el-col style="min-width: 347px; margin-right: 21px"><Result /></el-col>
-      <el-col style="min-width: 347px; margin-right: 21px"><ScoreRange /></el-col>
-      <el-col style="min-width: 347px; margin-right: 21px"><QuestionType /></el-col>
-    </el-row>
-  </app-container>
+    <div class="data-content-top">
+        <examInfo class="flex" slot-scope=""/>
+        <submission class="flex" />
+        <score class="flex" />
+    </div>
+    <div class="data-content-center">
+      <scoreRanking class="flex" />
+      <titleData class="flex" />
+    </div>
+    <div class="data-content-bottom">
+      <result class="flex" />
+      <scoreRange class="flex" />
+      <questionType class="flex" />
+    </div>
+    <!-- <app-container>
+      <el-row type="flex" class="row-bg">
+        <el-col style="min-width: 366px; margin-right: 21px"><ExamInfo /></el-col>
+        <el-col style="min-width: 366px; margin-right: 21px"><Submission /></el-col>
+        <el-col style="min-width: 366px"><Score /></el-col>
+      </el-row>
+      <el-row type="flex" class="row-bg" style="margin-top: 30px">
+        <el-col style="min-width: 560px; margin-right: 21px"><ScoreRanking /></el-col>
+        <el-col style="min-width: 560px"><TitleData /></el-col>
+      </el-row>
+      <el-row type="flex" class="row-bg" style="margin-top: 30px">
+        <el-col style="min-width: 347px; margin-right: 21px"><Result /></el-col>
+        <el-col style="min-width: 347px; margin-right: 21px"><ScoreRange /></el-col>
+        <el-col style="min-width: 347px; margin-right: 21px"><QuestionType /></el-col>
+      </el-row>
+    </app-container> -->
+  </div>
 </template>
 
 <script>
@@ -45,4 +61,52 @@ export default {
 }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.data-box{
+  overflow-x: scroll;
+  &::-webkit-scrollbar {display:none}
+  .title{
+    font-size: 20px;
+    color: #333333;
+    opacity: 1;
+    margin-left: 20px;
+  }
+  .data-content-top{
+    display: flex;
+    .flex{
+      min-width: 366px;
+      flex: 1;
+      &:nth-child(2){
+        margin: 0 20px;
+      }
+    }
+  }
+  .data-content-center{
+    margin: 20px 0;
+    display: flex;
+    .flex{
+      min-width: 560px;
+      flex: 1;
+      &:nth-child(1){
+        margin-right: 20px;
+      }
+    }
+  }
+  .data-content-bottom{
+    display: flex;
+    .flex{
+      flex: 1;
+      &:nth-child(1){
+        min-width: 347px;
+      }
+      &:nth-child(2){
+        min-width: 366px;
+        margin: 0 20px;
+      }
+      &:nth-child(3){
+        min-width: 387px;
+      }
+    }
+  }
+}
+</style>

src/modules/teacher/data/exam/views/ExamData2.vue

+<template>
+  <app-container>
+    <el-row type="flex" class="row-bg" justify="space-between" style="margin-bottom: 30px">
+      <el-col :span="10"><h1 style="padding-left: 50px; font-size: 30px">模拟测试一</h1></el-col>
+      <el-col :span="5">
+        <el-select v-model="label" placeholder="请选择">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        </el-select>
+        <el-button type="text" style="margin-left: 20px">导出pdf</el-button>
+      </el-col>
+    </el-row>
+    <el-row type="flex" class="row-bg">
+      <el-col style="min-width: 366px; margin-right: 21px"><ExamInfo /></el-col>
+      <el-col style="min-width: 366px; margin-right: 21px"><Submission /></el-col>
+      <el-col style="min-width: 366px"><Score /></el-col>
+    </el-row>
+    <el-row type="flex" class="row-bg" style="margin-top: 30px">
+      <el-col style="min-width: 560px; margin-right: 21px"><ScoreRanking /></el-col>
+      <el-col style="min-width: 560px"><TitleData /></el-col>
+    </el-row>
+    <el-row type="flex" class="row-bg" style="margin-top: 30px">
+      <el-col style="min-width: 347px; margin-right: 21px"><Result /></el-col>
+      <el-col style="min-width: 347px; margin-right: 21px"><ScoreRange /></el-col>
+      <el-col style="min-width: 347px; margin-right: 21px"><QuestionType /></el-col>
+    </el-row>
+  </app-container>
+</template>
+
+<script>
+import ExamInfo from '../components/ExamInfo.vue'
+import Submission from '../components/Submission.vue'
+import Score from '../components/Score.vue'
+import ScoreRanking from '../components/ScoreRanking.vue'
+import TitleData from '../components/TitleData.vue'
+import Result from '../components/Result.vue'
+import ScoreRange from '../components/ScoreRange.vue'
+import QuestionType from '../components/QuestionType.vue'
+export default {
+  components: { ExamInfo, Submission, Score, ScoreRanking, TitleData, Result, ScoreRange, QuestionType },
+  data() {
+    return {
+      options: {}
+    }
+  }
+}
+</script>
+
+<style></style>