1

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

@@ -0,0 +1,48 @@
+<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="排行" 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>
+</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;
+}
+</style>

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

@@ -0,0 +1,78 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "50%",
+            data: [
+              { value: 123, name: "一年级" },
+              { value: 200, name: "二年级" },
+              { value: 250, name: "三年级" },
+              { value: 450, name: "四年级" },
+              { value: 300, name: "五年级" },
+              { value: 100, name: "六年级" },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,218 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        singleAxis: {
+          top: 50,
+          bottom: 50,
+          axisTick: {},
+          axisLabel: {},
+          grid: {
+            top: 0,
+            bottom: 0,
+            containLabel: true,
+          },
+          type: "time",
+          axisPointer: {
+            animation: true,
+            label: {
+              show: true,
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              opacity: 0.2,
+            },
+          },
+        },
+        series: [
+          {
+            type: "themeRiver",
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 20,
+                shadowColor: "rgba(0, 0, 0, 0.8)",
+              },
+            },
+            data: [
+              ["2015/11/08", 10, "DQ"],
+              ["2015/11/09", 15, "DQ"],
+              ["2015/11/10", 35, "DQ"],
+              ["2015/11/11", 38, "DQ"],
+              ["2015/11/12", 22, "DQ"],
+              ["2015/11/13", 16, "DQ"],
+              ["2015/11/14", 7, "DQ"],
+              ["2015/11/15", 2, "DQ"],
+              ["2015/11/16", 17, "DQ"],
+              ["2015/11/17", 33, "DQ"],
+              ["2015/11/18", 40, "DQ"],
+              ["2015/11/19", 32, "DQ"],
+              ["2015/11/20", 26, "DQ"],
+              ["2015/11/21", 35, "DQ"],
+              ["2015/11/22", 40, "DQ"],
+              ["2015/11/23", 32, "DQ"],
+              ["2015/11/24", 26, "DQ"],
+              ["2015/11/25", 22, "DQ"],
+              ["2015/11/26", 16, "DQ"],
+              ["2015/11/27", 22, "DQ"],
+              ["2015/11/28", 10, "DQ"],
+              ["2015/11/08", 35, "TY"],
+              ["2015/11/09", 36, "TY"],
+              ["2015/11/10", 37, "TY"],
+              ["2015/11/11", 22, "TY"],
+              ["2015/11/12", 24, "TY"],
+              ["2015/11/13", 26, "TY"],
+              ["2015/11/14", 34, "TY"],
+              ["2015/11/15", 21, "TY"],
+              ["2015/11/16", 18, "TY"],
+              ["2015/11/17", 45, "TY"],
+              ["2015/11/18", 32, "TY"],
+              ["2015/11/19", 35, "TY"],
+              ["2015/11/20", 30, "TY"],
+              ["2015/11/21", 28, "TY"],
+              ["2015/11/22", 27, "TY"],
+              ["2015/11/23", 26, "TY"],
+              ["2015/11/24", 15, "TY"],
+              ["2015/11/25", 30, "TY"],
+              ["2015/11/26", 35, "TY"],
+              ["2015/11/27", 42, "TY"],
+              ["2015/11/28", 42, "TY"],
+              ["2015/11/08", 21, "SS"],
+              ["2015/11/09", 25, "SS"],
+              ["2015/11/10", 27, "SS"],
+              ["2015/11/11", 23, "SS"],
+              ["2015/11/12", 24, "SS"],
+              ["2015/11/13", 21, "SS"],
+              ["2015/11/14", 35, "SS"],
+              ["2015/11/15", 39, "SS"],
+              ["2015/11/16", 40, "SS"],
+              ["2015/11/17", 36, "SS"],
+              ["2015/11/18", 33, "SS"],
+              ["2015/11/19", 43, "SS"],
+              ["2015/11/20", 40, "SS"],
+              ["2015/11/21", 34, "SS"],
+              ["2015/11/22", 28, "SS"],
+              ["2015/11/23", 26, "SS"],
+              ["2015/11/24", 37, "SS"],
+              ["2015/11/25", 41, "SS"],
+              ["2015/11/26", 46, "SS"],
+              ["2015/11/27", 47, "SS"],
+              ["2015/11/28", 41, "SS"],
+              ["2015/11/08", 10, "QG"],
+              ["2015/11/09", 15, "QG"],
+              ["2015/11/10", 35, "QG"],
+              ["2015/11/11", 38, "QG"],
+              ["2015/11/12", 22, "QG"],
+              ["2015/11/13", 16, "QG"],
+              ["2015/11/14", 7, "QG"],
+              ["2015/11/15", 2, "QG"],
+              ["2015/11/16", 17, "QG"],
+              ["2015/11/17", 33, "QG"],
+              ["2015/11/18", 40, "QG"],
+              ["2015/11/19", 32, "QG"],
+              ["2015/11/20", 26, "QG"],
+              ["2015/11/21", 35, "QG"],
+              ["2015/11/22", 40, "QG"],
+              ["2015/11/23", 32, "QG"],
+              ["2015/11/24", 26, "QG"],
+              ["2015/11/25", 22, "QG"],
+              ["2015/11/26", 16, "QG"],
+              ["2015/11/27", 22, "QG"],
+              ["2015/11/28", 10, "QG"],
+              ["2015/11/08", 10, "SY"],
+              ["2015/11/09", 15, "SY"],
+              ["2015/11/10", 35, "SY"],
+              ["2015/11/11", 38, "SY"],
+              ["2015/11/12", 22, "SY"],
+              ["2015/11/13", 16, "SY"],
+              ["2015/11/14", 7, "SY"],
+              ["2015/11/15", 2, "SY"],
+              ["2015/11/16", 17, "SY"],
+              ["2015/11/17", 33, "SY"],
+              ["2015/11/18", 40, "SY"],
+              ["2015/11/19", 32, "SY"],
+              ["2015/11/20", 26, "SY"],
+              ["2015/11/21", 35, "SY"],
+              ["2015/11/22", 4, "SY"],
+              ["2015/11/23", 32, "SY"],
+              ["2015/11/24", 26, "SY"],
+              ["2015/11/25", 22, "SY"],
+              ["2015/11/26", 16, "SY"],
+              ["2015/11/27", 22, "SY"],
+              ["2015/11/28", 10, "SY"],
+              ["2015/11/08", 10, "DD"],
+              ["2015/11/09", 15, "DD"],
+              ["2015/11/10", 35, "DD"],
+              ["2015/11/11", 38, "DD"],
+              ["2015/11/12", 22, "DD"],
+              ["2015/11/13", 16, "DD"],
+              ["2015/11/14", 7, "DD"],
+              ["2015/11/15", 2, "DD"],
+              ["2015/11/16", 17, "DD"],
+              ["2015/11/17", 33, "DD"],
+              ["2015/11/18", 4, "DD"],
+              ["2015/11/19", 32, "DD"],
+              ["2015/11/20", 26, "DD"],
+              ["2015/11/21", 35, "DD"],
+              ["2015/11/22", 40, "DD"],
+              ["2015/11/23", 32, "DD"],
+              ["2015/11/24", 26, "DD"],
+              ["2015/11/25", 22, "DD"],
+              ["2015/11/26", 16, "DD"],
+              ["2015/11/27", 22, "DD"],
+              ["2015/11/28", 10, "DD"],
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,78 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true,
+        },
+        series: [
+          {
+            data: [400, 510, 510, 350, 320, 510],
+            symbolSize: 10,
+            type: "line",
+            lineStyle: {
+              width: 3, // 设置线宽度
+              color: "#0E65F7", // 设置线颜色
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,87 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "item",
+        },
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true,
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 14,
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: true,
+            },
+            data: [
+              { value: 123, name: "思维类" },
+              { value: 200, name: "评价类" },
+              { value: 250, name: "学科类" },
+              { value: 450, name: "其他类" },
+              { value: 300, name: "逻辑类" },
+              { value: 100, name: "动作类" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,97 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        xAxis: {},
+        yAxis: {},
+        color: ["#3681FC"],
+        series: [
+          {
+            symbolSize: 15,
+            data: [
+              [10.0, 8.04],
+              [8.07, 6.95],
+              [13.1, 7],
+              [13.2, 8.48],
+              [13.3, 9.38],
+              [13.4, 6.28],
+              [9.05, 8],
+              [9.15, 8.71],
+              [9.25, 9],
+              [9.35, 7],
+              [9.45, 6],
+              [11.0, 8.33],
+              [14.0, 7.66],
+              [13.4, 6.81],
+              [10.0, 6.33],
+              [14.0, 8.96],
+              [12.5, 6.82],
+              [9.15, 7.2],
+              [11.5, 7.2],
+              [3.03, 4.23],
+              [12.2, 7.83],
+              [2.02, 4.47],
+              [1.05, 3.33],
+              [4.35, 4],
+              [4.25, 5.26],
+              [4.15, 6.36],
+              [4.5, 4.96],
+              [6.03, 7.24],
+              [12.0, 6.26],
+              [12.0, 8.84],
+              [7.08, 5.82],
+              [5.02, 5.68],
+            ],
+            type: "scatter",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,81 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: "category",
+          data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
+        },
+        series: [
+          {
+            name: "2011",
+            type: "bar",
+            data: [60, 110, 25, 130, 65, 80],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -4,15 +4,29 @@
     <div class="left">
       <div class="top">
         <div class="titleBox">
-          <div class="title">使用频次</div>
+          <div class="title">授课频次</div>
+        </div>
+        <div class="dataBox">
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>累计授课次数</div>
+              <div>156203</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>相对增幅百分比</div>
+              <div>20.3%</div>
+            </div>
+          </div>
+          <TeaFre></TeaFre>
         </div>
-        <div class="dataBox"></div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">工具使用</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <ToolUse></ToolUse>
+        </div>
       </div>
     </div>
     <div class="center">
@@ -20,36 +34,91 @@
         <div class="titleBox">
           <div class="title">课程数量</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox middleBox">
+          <div class="halfBox">
+            <div class="teafre">
+              <div class="teaMiddle cNum">
+                <div>课程总数</div>
+                <div>12546</div>
+              </div>
+              <div class="teaMiddle tNum">
+                <div>类别总数</div>
+                <div>8412</div>
+              </div>
+              <div class="teaMiddle tSum">
+                <div>类别平均</div>
+                <div>3021</div>
+              </div>
+            </div>
+            <CateRank></CateRank>
+          </div>
+          <div class="halfBox middleBox" style="align-items: flex-start">
+            <WorkNum></WorkNum>
+          </div>
+        </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">课程时间分布</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <CourseTime></CourseTime>
+        </div>
       </div>
     </div>
     <div class="right">
       <div class="top">
         <div class="titleBox">
-          <div class="title">课程参与</div>
+          <div class="title">课程分析</div>
+        </div>
+        <div class="dataBox">
+          <CourseAna></CourseAna>
         </div>
-        <div class="dataBox"></div>
       </div>
       <div class="bottom">
         <div class="titleBox">
-          <div class="title">学习时长</div>
+          <div class="title">授课时长</div>
+        </div>
+        <div class="dataBox">
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>累计时长</div>
+              <div>26517</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>学生在线平均时长</div>
+              <div>268</div>
+            </div>
+          </div>
+          <WorkTime></WorkTime>
         </div>
-        <div class="dataBox"></div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+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"
 export default {
-
-}
+  components: {
+    TeaFre,
+    ToolUse,
+    CateRank,
+    WorkNum,
+    CourseTime,
+    CourseAna,
+    WorkTime,
+  },
+  data() {
+    return {};
+  },
+};
 </script>
 
 <style scoped>
@@ -66,7 +135,7 @@ export default {
   height: 100%;
 }
 
-.left>.top {
+.left > .top {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -74,7 +143,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.left>.bottom {
+.left > .bottom {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -87,7 +156,7 @@ export default {
   margin: 0 20px;
 }
 
-.center>.top {
+.center > .top {
   width: 100%;
   height: calc(100% / 5 * 3 - 10px);
   background: #fff;
@@ -95,7 +164,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.center>.bottom {
+.center > .bottom {
   width: 100%;
   height: calc(100% / 5 * 2 - 10px);
   background: #fff;
@@ -105,18 +174,17 @@ export default {
 .right {
   width: calc(100% / 4 * 1);
   height: 100%;
-
 }
 
-.right>.top {
+.right > .top {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
-  border-radius: 5px;
+  border-radius: 16px;
   margin: 0 0 20px 0;
 }
 
-.right>.bottom {
+.right > .bottom {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -135,4 +203,100 @@ export default {
   height: calc(100% - 40px);
   width: 100%;
 }
+
+.middleBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.title {
+  font-weight: bold;
+  color: #060e17;
+  font-size: 18px;
+}
+
+.teafre {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+  justify-content: space-evenly;
+}
+
+.teaLeft,
+.teaMiddle {
+  width: calc(100% / 2 - 10px);
+  height: 60px;
+  border-radius: 8px;
+  border: 1px solid #e0eafb;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 10px;
+  margin: 0 10px;
+}
+.teaMiddle {
+  width: calc(100% / 3 - 10px);
+}
+.teaLeft {
+  width: calc(100% / 2 - 10px);
+  background: linear-gradient(
+    180deg,
+    rgba(224, 234, 251, 0.2) 0%,
+    rgba(54, 130, 252, 0.3) 100%
+  );
+}
+.teaRigth {
+  background: linear-gradient(
+    180deg,
+    rgb(211, 246, 228, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.cNum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.tNum {
+  background: linear-gradient(
+    180deg,
+    rgb(174, 204, 254, 0.2) 0%,
+    rgb(54, 129, 252, 0.3) 100%
+  ) !important;
+}
+
+.tSum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.teaLeft > div:first-child,
+.teaMiddle > div:first-child {
+  font-size: 12px;
+  font-weight: 400;
+  color: #565e6a;
+}
+
+.teaLeft > div:last-child,
+.teaMiddle > div:last-child {
+  font-size: 22px;
+  font-weight: bold;
+  color: #060e17;
+}
+
+.halfBox {
+  width: 50%;
+}
 </style>

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

@@ -0,0 +1,98 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        legend: {
+          data: ["评价", "授课", "创建", "登录"],
+        },
+        series: [
+          {
+            name: "平台使用深度",
+            type: "funnel",
+            left: "10%",
+            top: 60,
+            bottom: 60,
+            width: "80%",
+            min: 0,
+            max: 100,
+            minSize: "0%",
+            maxSize: "100%",
+            sort: "descending",
+            label: {
+              show: true,
+              position: "inside",
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: "solid",
+              },
+            },
+            itemStyle: {
+              borderColor: "#fff",
+              borderWidth: 1,
+            },
+
+            data: [
+              { value: 20, name: "登录" },
+              { value: 40, name: "创建" },
+              { value: 60, name: "授课" },
+              { value: 80, name: "评价" },
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,53 @@
+<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>
+</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;
+}
+</style>

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

@@ -0,0 +1,119 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {},
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        const hours = [
+          "语文",
+          "数学",
+          "英语",
+          "科学",
+          "体育",
+          "音乐",
+          "美术",
+          "劳动",
+          "其他",
+        ];
+        // prettier-ignore
+        const days = [
+            '一年级', '二年级', '三年级',
+            '四年级', '五年级', '六年级'
+        ];
+        // prettier-ignore
+        const data = [[0,0,3],[0,2,4],[0,3,8],[0,6,6],[0,8,4],[1,0,3],[1,2,4],[1,3,8],[1,6,6],[1,8,4],[2,1,13],[2,3,6],[2,4,3],[2,6,6],[2,8,4],[3,3,6],[3,4,3],[3,6,6],[3,7,4],[4,0,10],[4,2,13],[4,3,6],[4,4,3],[4,6,6],[4,7,3],[5,2,4],[5,3,6],[5,4,3],[5,5,10],[5,6,10],[5,7,3]];
+        const title = [];
+        const singleAxis = [];
+        const series = [];
+        days.forEach(function (day, idx) {
+          title.push({
+            textBaseline: "middle",
+            top: ((idx + 0.5) * 90) / 6 + "%",
+            text: day,
+            textStyle: {
+              fontSize: 12,
+            },
+          });
+          singleAxis.push({
+            left: 70,
+            type: "category",
+            boundaryGap: false,
+            data: hours,
+            top: (idx * 90) / 6 + 5 + "%",
+            height: 90 / 6 - 10 + "%",
+          });
+          series.push({
+            singleAxisIndex: idx,
+            coordinateSystem: "singleAxis",
+            type: "scatter",
+            data: [],
+            symbolSize: function (dataItem) {
+              return dataItem[1] * 4;
+            },
+          });
+        });
+        data.forEach(function (dataItem) {
+          series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
+        });
+        this.option = {
+          tooltip: {
+            position: "top",
+          },
+          title: title,
+          singleAxis: singleAxis,
+          series: series,
+          grid: {
+            left: "3",
+            right: "3",
+            top: "3",
+            bottom: 0,
+            containLabel: true,
+          },
+        };
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,78 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        grid: {
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true,
+        },
+        series: [
+          {
+            data: [400, 510, 510, 350, 320, 510],
+            symbolSize: 10,
+            type: "line",
+            lineStyle: {
+              width: 3, // 设置线宽度
+              color: "#0E65F7", // 设置线颜色
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,97 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        xAxis: {},
+        yAxis: {},
+        color: ["#3681FC"],
+        series: [
+          {
+            symbolSize: 15,
+            data: [
+              [10.0, 8.04],
+              [8.07, 6.95],
+              [13.1, 7],
+              [13.2, 8.48],
+              [13.3, 9.38],
+              [13.4, 6.28],
+              [9.05, 8],
+              [9.15, 8.71],
+              [9.25, 9],
+              [9.35, 7],
+              [9.45, 6],
+              [11.0, 8.33],
+              [14.0, 7.66],
+              [13.4, 6.81],
+              [10.0, 6.33],
+              [14.0, 8.96],
+              [12.5, 6.82],
+              [9.15, 7.2],
+              [11.5, 7.2],
+              [3.03, 4.23],
+              [12.2, 7.83],
+              [2.02, 4.47],
+              [1.05, 3.33],
+              [4.35, 4],
+              [4.25, 5.26],
+              [4.15, 6.36],
+              [4.5, 4.96],
+              [6.03, 7.24],
+              [12.0, 6.26],
+              [12.0, 8.84],
+              [7.08, 5.82],
+              [5.02, 5.68],
+            ],
+            type: "scatter",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,81 @@
+<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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      chartObj: null,
+      option: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        yAxis: {
+          type: "category",
+          data: ["六年级", "五年级", "四年级", "三年级", "二年级", "一年级"],
+        },
+        series: [
+          {
+            name: "2011",
+            type: "bar",
+            data: [60, 110, 25, 130, 65, 80],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    setChart() {
+      // 雷达图显示的标签
+      let newPromise = new Promise((resolve) => {
+        resolve();
+      });
+      //然后异步执行echarts的初始化函数
+      newPromise.then(() => {
+        const chartObj = this.$echarts.init(
+          this.$el.querySelector("#charts_canvas")
+        );
+        // 初始化雷达图
+        this.chartObj = chartObj;
+        this.chartObj.setOption(this.option);
+      });
+    },
+  },
+  mounted() {
+    this.setChart(this.option);
+    var _this = this;
+    window.addEventListener("resize", () => {
+      if (_this.chartObj) {
+        _this.chartObj.resize();
+      }
+    });
+  },
+  created() {
+    this.setChart();
+  },
+};
+</script>
+
+<style>
+</style>

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

@@ -6,13 +6,37 @@
         <div class="titleBox">
           <div class="title">基础概况</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>活跃总数</div>
+              <div>156203</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>活跃频次</div>
+              <div>20.3%</div>
+            </div>
+          </div>
+          <div class="teafre" style="margin-top: 10px">
+            <div class="teaLeft">
+              <div>登录频次</div>
+              <div>155784</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>人均使用频次</div>
+              <div>156</div>
+            </div>
+          </div>
+          <TeaFre></TeaFre>
+        </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">教师活跃度</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <TeaAct></TeaAct>
+        </div>
       </div>
     </div>
     <div class="center">
@@ -20,13 +44,131 @@
         <div class="titleBox">
           <div class="title">教师行为数据</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>上传课程总数</div>
+              <div>12546</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>各年级课程上传平均数</div>
+              <div>40</div>
+            </div>
+            <div class="teaLeft">
+              <div>各学科课程上传平均数</div>
+              <div>20</div>
+            </div>
+          </div>
+          <TeaData></TeaData>
+        </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">平台使用深度</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="allBox">
+            <div class="allBox_left"><FunPlot></FunPlot></div>
+            <div class="allBox_right">
+              <div class="depth">
+                <span>上传课程</span>
+                <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>
+              <div class="depth">
+                <span>使用工具</span>
+                <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>
+              <div class="depth">
+                <span>互动交流</span>
+                <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>
+              <div class="depth">
+                <span>参与项目</span>
+                <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>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="right">
@@ -34,22 +176,49 @@
         <div class="titleBox">
           <div class="title">教学活动</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <WorkNum></WorkNum>
+        </div>
       </div>
       <div class="bottom">
         <div class="titleBox">
           <div class="title">在线时长</div>
         </div>
-        <div class="dataBox"></div>
+        <div class="dataBox">
+          <div class="teafre">
+            <div class="teaLeft">
+              <div>累计在线时长</div>
+              <div>26517</div>
+            </div>
+            <div class="teaLeft teaRigth">
+              <div>师均时长</div>
+              <div>268</div>
+            </div>
+          </div>
+          <WorkTime></WorkTime>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import TeaFre from "./chartList/teaFre.vue";
+import TeaAct from "./chartList/teaAct.vue";
+import TeaData from "./chartList/teaData.vue";
+import FunPlot from "./chartList/funPlot.vue";
+import WorkNum from "./chartList/workNum.vue"
+import WorkTime from "./chartList/workTime.vue"
 export default {
-
-}
+  components: {
+    TeaFre,
+    TeaAct,
+    TeaData,
+    FunPlot,
+    WorkNum,
+    WorkTime,
+  },
+};
 </script>
 
 
@@ -67,7 +236,7 @@ export default {
   height: 100%;
 }
 
-.left>.top {
+.left > .top {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -75,7 +244,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.left>.bottom {
+.left > .bottom {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -88,7 +257,7 @@ export default {
   margin: 0 20px;
 }
 
-.center>.top {
+.center > .top {
   width: 100%;
   height: calc(100% / 5 * 3 - 10px);
   background: #fff;
@@ -96,7 +265,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.center>.bottom {
+.center > .bottom {
   width: 100%;
   height: calc(100% / 5 * 2 - 10px);
   background: #fff;
@@ -106,10 +275,9 @@ export default {
 .right {
   width: calc(100% / 4 * 1);
   height: 100%;
-
 }
 
-.right>.top {
+.right > .top {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -117,7 +285,7 @@ export default {
   margin: 0 0 20px 0;
 }
 
-.right>.bottom {
+.right > .bottom {
   width: 100%;
   height: calc(100% / 2 - 10px);
   background: #fff;
@@ -136,4 +304,135 @@ export default {
   height: calc(100% - 40px);
   width: 100%;
 }
+
+.middleBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.title {
+  font-weight: bold;
+  color: #060e17;
+  font-size: 18px;
+}
+
+.teafre {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+  justify-content: space-evenly;
+}
+
+.teaLeft,
+.teaMiddle {
+  width: calc(100% / 2 - 10px);
+  height: 60px;
+  border-radius: 8px;
+  border: 1px solid #e0eafb;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0 10px;
+  margin: 0 10px;
+}
+.teaMiddle {
+  width: calc(100% / 3 - 10px);
+}
+.teaLeft {
+  width: calc(100% / 2 - 10px);
+  background: linear-gradient(
+    180deg,
+    rgba(224, 234, 251, 0.2) 0%,
+    rgba(54, 130, 252, 0.3) 100%
+  );
+}
+.teaRigth {
+  background: linear-gradient(
+    180deg,
+    rgb(211, 246, 228, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.cNum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.tNum {
+  background: linear-gradient(
+    180deg,
+    rgb(174, 204, 254, 0.2) 0%,
+    rgb(54, 129, 252, 0.3) 100%
+  ) !important;
+}
+
+.tSum {
+  background: linear-gradient(
+    180deg,
+    rgb(125, 227, 174, 0.2) 0%,
+    rgb(23, 196, 105, 0.3) 100%
+  ) !important;
+}
+
+.teaLeft > div:first-child,
+.teaMiddle > div:first-child {
+  font-size: 12px;
+  font-weight: 400;
+  color: #565e6a;
+}
+
+.teaLeft > div:last-child,
+.teaMiddle > div:last-child {
+  font-size: 22px;
+  font-weight: bold;
+  color: #060e17;
+}
+
+.halfBox {
+  width: 50%;
+}
+.allBox {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.allBox_left {
+  width: 30%;
+}
+.allBox_right {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 70%;
+  margin: 0 auto;
+  overflow: hidden;
+  justify-content: space-between;
+}
+
+.depth {
+  width: calc(100% / 5 - 10px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.depth > span:nth-child(1) {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0 0 10px;
+}
+.depth > div:nth-child(1) {
+}
 </style>