build: 路由调整

src/views/dashboard/components/DataCard.vue

@@ -62,31 +62,31 @@ onMounted(() => {
 </script>
 <template>
   <el-row :gutter="40" class="data-card">
-    <el-col :xs="24" :sm="8" :lg="5">
+    <el-col :xs="24" :sm="12" :md="8" :lg="5">
       <div class="card c1">
         <span class="n">{{ Math.round(classCountOutput) }}</span
         ><span>全部班级</span>
       </div>
     </el-col>
-    <el-col :xs="24" :sm="8" :lg="5">
+    <el-col :xs="24" :sm="12" :md="8" :lg="5">
       <div class="card c2">
         <span class="n">{{ Math.round(teacherCountOutput) }}</span
         ><span>全部教师</span>
       </div>
     </el-col>
-    <el-col :xs="24" :sm="8" :lg="5">
+    <el-col :xs="24" :sm="12" :md="8" :lg="5">
       <div class="card c3">
         <span class="n">{{ Math.round(studentCountOutput) }}</span
         ><span>全部学生</span>
       </div>
     </el-col>
-    <el-col :xs="24" :sm="8" :lg="5">
+    <el-col :xs="24" :sm="12" :md="8" :lg="5">
       <div class="card c4">
         <span class="n">{{ Math.round(equipmentCountOutput) }}</span
         ><span>设备套数</span>
       </div>
     </el-col>
-    <el-col :xs="24" :sm="8" :lg="5">
+    <el-col :xs="24" :sm="12" :md="8" :lg="5">
       <div class="card c5">
         <span class="n">{{ Math.round(trainingCountOutput) }}</span
         ><span>累计训练次数</span>
@@ -142,4 +142,11 @@ onMounted(() => {
     }
   }
 }
+@media only screen and (max-width: 1200px) {
+  .data-card .card {
+    padding: 32px 0 0 74px;
+    text-align: center;
+    white-space: nowrap;
+  }
+}
 </style>

src/views/dashboard/index.vue

@@ -88,13 +88,13 @@ onMounted(() => {
       <router-link to="/dashboard/example">优秀教学效果示例</router-link>
     </div>
 
-    <!-- Echarts 图表-->
+    <!-- Echarts 图表 -->
     <el-row v-if="dataStatus == 1" :gutter="20">
-      <el-col :md="24" :lg="8">
+      <el-col :md="24" :lg="12" :xl="8">
         <div class="charts-item">
           <p class="title">学员专注力平均值整体对比分析</p>
           <el-row justify="space-between">
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="item">
                 <LiquidChart
                   id="liquidChart1"
@@ -109,7 +109,7 @@ onMounted(() => {
                 <p>专注力评估均值</p>
               </div>
             </el-col>
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="item">
                 <LiquidChart
                   id="liquidChart2"
@@ -126,7 +126,7 @@ onMounted(() => {
             </el-col>
           </el-row>
           <el-row justify="space-between">
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="item">
                 <CircleChart
                   id="circleChart1"
@@ -141,7 +141,7 @@ onMounted(() => {
                 <p>专注力50以上人数比例</p>
               </div>
             </el-col>
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
               <div class="item">
                 <CircleChart
                   id="circleChart2"
@@ -160,11 +160,11 @@ onMounted(() => {
         </div>
       </el-col>
       <!-- 学员专注力评分分级占比分析 -->
-      <el-col :md="24" :lg="16">
+      <el-col :md="24" :lg="12" :xl="16">
         <div class="charts-item">
           <p class="title">学员专注力评分分级占比分析</p>
           <el-row justify="space-between">
-            <el-col :span="12">
+            <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
               <div class="bar">
                 <BarChart
                   id="barChart1"
@@ -177,7 +177,7 @@ onMounted(() => {
                 />
               </div>
             </el-col>
-            <el-col :span="12">
+            <el-col :xs="24" :sm="24" :md="12" :lg="24" :xl="12">
               <div class="bar">
                 <BarChart
                   id="barChart2"