1

src/components/pages/dataBoard/course/chartList/cateRank.vue

@@ -1,17 +1,30 @@
 <template>
-  <div style="width: 100%; margin: 10px">
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      :header-cell-style="{ background: '#E0EAFB' }"
-      :row-class-name="tableRowClassName"
-    >
-      <el-table-column prop="rank" label="排行" min-width="50" align="center"> </el-table-column>
-      <el-table-column prop="name" label="类别名称" min-width="80" align="center">
-      </el-table-column>
-      <el-table-column prop="sum" label="类别平均" min-width="80" align="center">
-      </el-table-column>
-    </el-table>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{ background: '#E0EAFB' }"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column prop="rank" label="排行" min-width="50" align="center">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="类别名称"
+          min-width="80"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="sum"
+          label="类别平均"
+          min-width="80"
+          align="center"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 
@@ -29,7 +42,7 @@ export default {
       ],
     };
   },
-  methods:{
+  methods: {
     tableRowClassName({ row, rowIndex }) {
       if ((rowIndex + 1) % 2 === 0) {
         return "even_row";
@@ -43,6 +56,18 @@ export default {
 
 <style scoped>
 .el-table >>> .even_row {
-  background-color: #F2F7FF !important;
+  background-color: #f2f7ff !important;
+}
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
 }
 </style>

src/components/pages/dataBoard/course/chartList/courseAna.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 450px; height: 350px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -74,5 +75,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/course/chartList/courseTime.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="height: 280px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -216,5 +217,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/course/chartList/teaFre.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 450px; height: 255px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -31,7 +32,7 @@ export default {
         },
         series: [
           {
-            data: [400, 510, 510, 350, 320, 510],
+            data: [400, 510, 510, 350, 320, 510, 420],
             symbolSize: 10,
             type: "line",
             lineStyle: {
@@ -75,5 +76,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/course/chartList/toolUse.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 450px; height: 350px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -83,5 +84,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/course/chartList/workNum.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 390px; height: 435px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -93,5 +94,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/course/chartList/workTime.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 450px; height: 300px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -78,5 +79,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/course/index.vue

@@ -17,7 +17,7 @@
               <div>20.3%</div>
             </div>
           </div>
-          <TeaFre></TeaFre>
+          <TeaFre style="height: calc(100% - 62px)"></TeaFre>
         </div>
       </div>
       <div class="bottom">
@@ -25,7 +25,7 @@
           <div class="title">工具使用</div>
         </div>
         <div class="dataBox">
-          <ToolUse></ToolUse>
+          <ToolUse style="height: calc(100% - 40px)"></ToolUse>
         </div>
       </div>
     </div>
@@ -50,10 +50,12 @@
                 <div>3021</div>
               </div>
             </div>
-            <CateRank></CateRank>
+            <CateRank
+              style="height: calc(100% - 72px); margin-top: 10px"
+            ></CateRank>
           </div>
           <div class="halfBox middleBox" style="align-items: flex-start">
-            <WorkNum></WorkNum>
+            <WorkNum style="height: calc(100% - 40px)"></WorkNum>
           </div>
         </div>
       </div>
@@ -62,7 +64,7 @@
           <div class="title">课程时间分布</div>
         </div>
         <div class="dataBox">
-          <CourseTime></CourseTime>
+          <CourseTime style="height: calc(100% - 40px)"></CourseTime>
         </div>
       </div>
     </div>
@@ -72,7 +74,7 @@
           <div class="title">课程分析</div>
         </div>
         <div class="dataBox">
-          <CourseAna></CourseAna>
+          <CourseAna style="height: calc(100% - 40px)"></CourseAna>
         </div>
       </div>
       <div class="bottom">
@@ -90,7 +92,7 @@
               <div>268</div>
             </div>
           </div>
-          <WorkTime></WorkTime>
+          <WorkTime style="height: calc(100% - 62px)"></WorkTime>
         </div>
       </div>
     </div>
@@ -102,9 +104,9 @@ import TeaFre from "./chartList/teaFre.vue";
 import ToolUse from "./chartList/toolUse.vue";
 import CateRank from "./chartList/cateRank.vue";
 import WorkNum from "./chartList/workNum.vue";
-import CourseTime from "./chartList/courseTime.vue"
-import CourseAna from "./chartList/courseAna.vue"
-import WorkTime from "./chartList/workTime.vue"
+import CourseTime from "./chartList/courseTime.vue";
+import CourseAna from "./chartList/courseAna.vue";
+import WorkTime from "./chartList/workTime.vue";
 export default {
   components: {
     TeaFre,
@@ -208,7 +210,7 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-items: center;
+  align-items: flex-start;
 }
 
 .title {
@@ -298,5 +300,6 @@ export default {
 
 .halfBox {
   width: 50%;
+  height: 100%;
 }
 </style>

src/components/pages/dataBoard/school/cateRank/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{ background: '#E0EAFB' }"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column prop="rank" label="排行" min-width="50" align="center">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="类别名称"
+          min-width="80"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="sum"
+          label="类别平均"
+          min-width="80"
+          align="center"
+        >
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { rank: "1", name: "一年级", sum: "2356" },
+        { rank: "2", name: "二年级", sum: "2256" },
+        { rank: "3", name: "三年级", sum: "2156" },
+        { rank: "4", name: "四年级", sum: "1356" },
+        { rank: "5", name: "五年级", sum: "1256" },
+        { rank: "6", name: "六年级", sum: "1056" },
+      ],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.el-table >>> .even_row {
+  background-color: #f2f7ff !important;
+}
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoard/school/index.vue

@@ -25,7 +25,7 @@
               <span>15620</span>
             </div>
           </div>
-          <loginCount style="height: calc(100% - 140px);"></loginCount>
+          <loginCount style="height: calc(100% - 140px)"></loginCount>
         </div>
       </div>
       <div class="bottom">
@@ -43,7 +43,7 @@
               <span>15620</span>
             </div>
           </div>
-          <loginTime style="height: calc(100% - 70px);"></loginTime>
+          <loginTime style="height: calc(100% - 70px)"></loginTime>
         </div>
       </div>
     </div>
@@ -53,7 +53,7 @@
           <div class="title">教师综合评价</div>
         </div>
         <div class="dataBox">
-          <div class="info_box" style="width:95%">
+          <div class="info_box" style="width: 95%">
             <div class="info2 blueBG">
               <span>上传课程总数</span>
               <span>15620</span>
@@ -71,7 +71,7 @@
               <span>15620</span>
             </div>
           </div>
-          <teacherInfo style="height: calc(100% - 70px);"></teacherInfo>
+          <teacherInfo style="height: calc(100% - 70px)"></teacherInfo>
         </div>
       </div>
       <div class="bottom">
@@ -82,43 +82,123 @@
           <div class="depth_box">
             <div class="depth">
               <span>上传课程</span>
-              <div><el-progress :width="80" type="circle" :percentage="36" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="36"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>指导项目</span>
-              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>使用工具</span>
-              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>课程评价</span>
-              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>互动交流</span>
-              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>参与课程</span>
-              <div><el-progress :width="80" type="circle" :percentage="36" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="36"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>参与项目</span>
-              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>使用工具</span>
-              <div><el-progress :width="80" type="circle" :percentage="25" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="25"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>协同合作</span>
-              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
             <div class="depth">
               <span>合作交流</span>
-              <div><el-progress :width="80" type="circle" :percentage="76" :stroke-width="15" :format="format"></el-progress></div>
+              <div>
+                <el-progress
+                  :width="80"
+                  type="circle"
+                  :percentage="76"
+                  :stroke-width="15"
+                  :format="format"
+                ></el-progress>
+              </div>
             </div>
           </div>
         </div>
@@ -132,23 +212,26 @@
         <div class="dataBox">
           <div class="course_box">
             <div class="info_box">
-                <div class="info3 blueBG">
-                  <span>课程总数</span>
-                  <span>1254</span>
-                </div>
-                <div class="info3 greenBG">
-                  <span>类别总数</span>
-                  <span>546</span>
-                </div>
-                <div class="info3 blueBG">
-                  <span>类别平均</span>
-                  <span>12</span>
-                </div>
+              <div class="info3 blueBG">
+                <span>课程总数</span>
+                <span>1254</span>
+              </div>
+              <div class="info3 greenBG">
+                <span>类别总数</span>
+                <span>546</span>
+              </div>
+              <div class="info3 blueBG">
+                <span>类别平均</span>
+                <span>12</span>
+              </div>
             </div>
             <div class="course_box_p">
               <courseInfo></courseInfo>
             </div>
           </div>
+          <cateRank
+            style="height: calc(100% - 216px); overflow: auto"
+          ></cateRank>
         </div>
       </div>
       <div class="bottom">
@@ -164,14 +247,20 @@
 </template>
 
 <script>
-import loginCount from './loginCount'
-import loginTime from './loginTime'
-import teacherInfo from './teacherInfo'
-import courseInfo from './courseInfo'
-import studentInfo from './studentInfo'
+import loginCount from "./loginCount";
+import loginTime from "./loginTime";
+import teacherInfo from "./teacherInfo";
+import courseInfo from "./courseInfo";
+import studentInfo from "./studentInfo";
+import cateRank from "./cateRank";
 export default {
   components: {
-    loginCount, loginTime, teacherInfo,courseInfo,studentInfo
+    loginCount,
+    loginTime,
+    teacherInfo,
+    courseInfo,
+    studentInfo,
+    cateRank,
   },
   props: {
     oid: {
@@ -180,18 +269,20 @@ export default {
   },
   data() {
     return {
-      isLoading: false
-    }
+      isLoading: false,
+    };
   },
   mounted() {
-    this.getData()
+    this.getData();
   },
   methods: {
     getData() {
       this.isLoading = true;
-      let params = [{
-        oid: this.oid
-      }]
+      let params = [
+        {
+          oid: this.oid,
+        },
+      ];
       this.ajax
         .post(this.$store.state.api + "selectDataBoardSchool", params)
         .then((res) => {
@@ -204,9 +295,9 @@ export default {
     },
     format(percentage) {
       return percentage;
-    }
+    },
   },
-}
+};
 </script>
 
 
@@ -224,7 +315,7 @@ export default {
   height: 100%;
 }
 
-.left>.top {
+.left > .top {
   width: 100%;
   height: calc(100% / 5 * 2.8 - 20px);
   background: #fff;
@@ -232,7 +323,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.left>.bottom {
+.left > .bottom {
   width: 100%;
   height: calc(100% / 5 * 2.2);
   background: #fff;
@@ -245,7 +336,7 @@ export default {
   margin: 0 20px;
 }
 
-.center>.top {
+.center > .top {
   width: 100%;
   height: calc(100% / 5 * 2.8 - 20px);
   background: #fff;
@@ -253,7 +344,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.center>.bottom {
+.center > .bottom {
   width: 100%;
   height: calc(100% / 5 * 2.2);
   background: #fff;
@@ -263,10 +354,9 @@ export default {
 .right {
   width: calc(100% / 4 * 1);
   height: 100%;
-
 }
 
-.right>.top {
+.right > .top {
   width: 100%;
   height: calc(100% / 5 * 2.8 - 20px);
   background: #fff;
@@ -274,7 +364,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.right>.bottom {
+.right > .bottom {
   width: 100%;
   height: calc(100% / 5 * 2.2);
   background: #fff;
@@ -289,7 +379,7 @@ export default {
   width: 100%;
 }
 
-.titleBox>.title {
+.titleBox > .title {
   font-weight: 700;
 }
 
@@ -298,7 +388,6 @@ export default {
   width: 100%;
 }
 
-
 .info_box {
   display: flex;
   flex-wrap: wrap;
@@ -308,9 +397,9 @@ export default {
   margin: 0 auto;
 }
 
-.info_box>.info2,
-.info_box>.info3,
-.info_box>.info {
+.info_box > .info2,
+.info_box > .info3,
+.info_box > .info {
   width: calc(50% - 10px);
   display: flex;
   flex-direction: column;
@@ -322,41 +411,44 @@ export default {
   border-radius: 5px;
 }
 
-.info_box>.info2 {
-  width: calc(100%/4 - 10px);
+.info_box > .info2 {
+  width: calc(100% / 4 - 10px);
   align-items: flex-end;
 }
 
-.info_box>.info3 {
+.info_box > .info3 {
   width: 100%;
   margin-bottom: 5px;
 }
 
-
-.info_box>.info2>span:nth-child(1),
-.info_box>.info3>span:nth-child(1),
-.info_box>.info>span:nth-child(1) {
+.info_box > .info2 > span:nth-child(1),
+.info_box > .info3 > span:nth-child(1),
+.info_box > .info > span:nth-child(1) {
   font-size: 12px;
   margin: 0 0 5px 0;
 }
 
-.info_box>.info2>span:nth-child(2),
-.info_box>.info3>span:nth-child(2),
-.info_box>.info>span:nth-child(2) {
+.info_box > .info2 > span:nth-child(2),
+.info_box > .info3 > span:nth-child(2),
+.info_box > .info > span:nth-child(2) {
   font-size: 22px;
   font-weight: 700;
 }
 
 .blueBG {
-  background: linear-gradient(180deg,
-      rgba(224, 234, 251, 0.2) 0%,
-      rgba(54, 130, 252, 0.3) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(224, 234, 251, 0.2) 0%,
+    rgba(54, 130, 252, 0.3) 100%
+  );
 }
 
 .greenBG {
-  background: linear-gradient(180deg,
-      rgb(211, 246, 228, 0.2) 0%,
-      rgb(23, 196, 105, 0.3) 100%);
+  background: linear-gradient(
+    180deg,
+    rgb(211, 246, 228, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  );
 }
 
 .depth_box {
@@ -382,22 +474,23 @@ export default {
   font-weight: 700;
   margin: 0 0 10px;
 }
-.depth > div:nth-child(1) {}
+.depth > div:nth-child(1) {
+}
 
-.course_box{
+.course_box {
   display: flex;
   height: 50%;
   width: 90%;
   margin: 0 auto;
 }
-.course_box .info_box{
+.course_box .info_box {
   height: 100%;
   width: 100px;
   flex-direction: column;
   margin: 0;
   flex-wrap: nowrap;
 }
-.course_box_p{
+.course_box_p {
   width: calc(100% - 100px);
 }
 </style>

src/components/pages/dataBoard/student/stuAct/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <el-table
+        :data="tableData"
+        style="width: 100%; height: 100%; overflow: auto"
+        :header-cell-style="{ background: '#E0EAFB' }"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column prop="rank" label="排行" width="100" align="center">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="类别名称"
+          width="170"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="sum" label="授课次数" width="170" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { rank: "1", name: "一年级", sum: "2356" },
+        { rank: "2", name: "二年级", sum: "2256" },
+        { rank: "3", name: "三年级", sum: "2156" },
+        { rank: "4", name: "四年级", sum: "1356" },
+        { rank: "5", name: "五年级", sum: "1256" },
+        { rank: "6", name: "六年级", sum: "1056" },
+        { rank: "7", name: "七年级", sum: "956" },
+        { rank: "8", name: "八年级", sum: "856" },
+      ],
+    };
+  },
+  methods: {
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "even_row";
+      } else {
+        return "";
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.el-table >>> .even_row {
+  background-color: #f2f7ff !important;
+}
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
+</style>

src/components/pages/dataBoard/teacher/chartList/funPlot.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 250px; height: 300px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -94,5 +95,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/teacher/chartList/teaAct.vue

@@ -1,20 +1,25 @@
 <template>
-  <div
-    style="width: 94%; height: calc(100% - 40px); overflow: auto; margin: 10px"
-  >
-    <el-table
-      :data="tableData"
-      style="width: 100%; height: 100%; overflow: auto"
-      :header-cell-style="{ background: '#E0EAFB' }"
-      :row-class-name="tableRowClassName"
-    >
-      <el-table-column prop="rank" label="排行" width="100" align="center">
-      </el-table-column>
-      <el-table-column prop="name" label="类别名称" width="170" align="center">
-      </el-table-column>
-      <el-table-column prop="sum" label="授课次数" width="170" align="center">
-      </el-table-column>
-    </el-table>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <el-table
+        :data="tableData"
+        style="width: 100%; height: 100%; overflow: auto"
+        :header-cell-style="{ background: '#E0EAFB' }"
+        :row-class-name="tableRowClassName"
+      >
+        <el-table-column prop="rank" label="排行" width="100" align="center">
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="类别名称"
+          width="170"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column prop="sum" label="授课次数" width="170" align="center">
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 
@@ -50,4 +55,16 @@ export default {
 .el-table >>> .even_row {
   background-color: #f2f7ff !important;
 }
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/teacher/chartList/teaData.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="height: 400px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -115,5 +116,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/teacher/chartList/teaFre.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 450px; height: 220px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -75,5 +76,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/teacher/chartList/workNum.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 390px; height: 335px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -93,5 +94,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/teacher/chartList/workTime.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 450px; height: 300px; margin: 0 auto">
-    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
-    <div
-      id="charts_canvas"
-      class="echart"
-      style="width: 100%; height: 100%"
-    ></div>
+  <div class="data_body">
+    <div style="width: 100%; height: 100%">
+      <div
+        id="charts_canvas"
+        class="echart"
+        style="width: 100%; height: 100%"
+      ></div>
+    </div>
   </div>
 </template>
 
@@ -78,5 +79,17 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.data_body {
+  height: 100%;
+  /* display: flex; */
+  position: relative;
+  border-radius: 5px;
+  /* border: 1px solid #eee; */
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0;
+  width: 95%;
+  background: #fff;
+}
 </style>

src/components/pages/dataBoard/teacher/index.vue

@@ -27,7 +27,7 @@
               <div>156</div>
             </div>
           </div>
-          <TeaFre></TeaFre>
+          <TeaFre style="height:calc(100% - 134px)"></TeaFre>
         </div>
       </div>
       <div class="bottom">
@@ -35,7 +35,7 @@
           <div class="title">教师活跃度</div>
         </div>
         <div class="dataBox">
-          <TeaAct></TeaAct>
+          <TeaAct style="height:calc(100% - 40px)"></TeaAct>
         </div>
       </div>
     </div>
@@ -59,7 +59,7 @@
               <div>20</div>
             </div>
           </div>
-          <TeaData></TeaData>
+          <TeaData style="height:calc(100% - 62px)"></TeaData>
         </div>
       </div>
       <div class="bottom">
@@ -68,7 +68,7 @@
         </div>
         <div class="dataBox">
           <div class="allBox">
-            <div class="allBox_left"><FunPlot></FunPlot></div>
+            <div class="allBox_left"><FunPlot style="height:calc(100% - 40px)"></FunPlot></div>
             <div class="allBox_right">
               <div class="depth">
                 <span>上传课程</span>
@@ -177,7 +177,7 @@
           <div class="title">教学活动</div>
         </div>
         <div class="dataBox">
-          <WorkNum></WorkNum>
+          <WorkNum style="height:calc(100% - 40px)"></WorkNum>
         </div>
       </div>
       <div class="bottom">
@@ -195,7 +195,7 @@
               <div>268</div>
             </div>
           </div>
-          <WorkTime></WorkTime>
+          <WorkTime style="height:calc(100% - 62px)"></WorkTime>
         </div>
       </div>
     </div>
@@ -402,6 +402,7 @@ export default {
 }
 .allBox {
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -409,11 +410,12 @@ export default {
 }
 .allBox_left {
   width: 30%;
+  height: 100%;
 }
 .allBox_right {
   display: flex;
   flex-wrap: wrap;
-  height: 100%;
+  height: calc(100% - 40px);
   width: 70%;
   margin: 0 auto;
   overflow: hidden;