build: 首页移动端适配

src/layout/admin.vue

@@ -16,7 +16,7 @@ const { width } = useWindowSize();
  * 中屏（>=992px）
  * 小屏（>=768px）
  */
-const WIDTH = 992;
+const WIDTH = 768;
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
@@ -81,11 +81,14 @@ function handleOutsideClick() {
     clear: both;
     content: "";
   }
-
   position: relative;
+	box-sizing: border-box;
   width: 100%;
+  min-width: 1900px;
   height: 100%;
-
+  &.mobile{
+		min-width: 750px;
+	}
   &.mobile.openSidebar {
     position: fixed;
     top: 0;
@@ -108,6 +111,9 @@ function handleOutsideClick() {
 .mobile .fixed-header {
   width: 100%;
 }
+.mobile .app-main{
+  padding-top: 70px;
+}
 
 .drawer-bg {
   position: absolute;

src/layout/components/Navbar/SchoolSelect.vue

@@ -84,13 +84,13 @@ watch(
     .nav-select {
       position: absolute;
       left: 0;
-      top: 80px;
+      top: 100px;
       z-index: 1;
       width: 100%;
       box-sizing: border-box;
-      padding: 0 24px;
+      padding: 0 30px;
       .el-select {
-        width: 100%;
+        width: 50%;
         padding: 0;
         margin: 0;
       }

src/layout/school.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, watchEffect } from "vue";
-import { useWindowSize } from "@vueuse/core";
-import { AppMain, TagsView, SchoolNavbar } from "./components/index";
+import {computed, watchEffect} from "vue";
+import {useWindowSize} from "@vueuse/core";
+import {AppMain, SchoolNavbar} from "./components/index";
 import Sidebar from "./components/Sidebar/index.vue";
 
-import { useAppStore } from "@/store/modules/app";
-import { useSettingsStore } from "@/store/modules/settings";
+import {useAppStore} from "@/store/modules/app";
+import {useSettingsStore} from "@/store/modules/settings";
 
 const { width } = useWindowSize();
 
@@ -16,7 +16,7 @@ const { width } = useWindowSize();
  * 中屏（>=992px）
  * 小屏（>=768px）
  */
-const WIDTH = 992;
+const WIDTH = 768;
 
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
@@ -81,17 +81,18 @@ function handleOutsideClick() {
     clear: both;
     content: "";
   }
-
   position: relative;
   width: 100%;
+  min-width: 1900px;
   height: 100%;
-
+  &.mobile{
+		min-width: 750px;
+  }
   &.mobile.openSidebar {
     position: fixed;
     top: 0;
   }
 }
-
 .fixed-header {
   position: fixed;
   top: 0;
@@ -108,6 +109,9 @@ function handleOutsideClick() {
 .mobile .fixed-header {
   width: 100%;
 }
+.mobile .app-main{
+  padding-top: 70px;
+}
 
 .drawer-bg {
   position: absolute;

src/views/dashboard/components/DataCard.vue

@@ -77,50 +77,54 @@ watch(
 );
 </script>
 <template>
-  <el-row :gutter="40" class="data-card">
-    <el-col :xs="24" :sm="12" :md="8" :lg="5">
-      <div class="card c1">
+		<el-row class="data-card">
+			<el-col :xs="12" :span="5">
+				<div class="card c1">
         <span class="n">{{ Math.round(Number(classCountOutput)) }}</span
-        ><span>全部班级</span>
-      </div>
-    </el-col>
-    <el-col :xs="24" :sm="12" :md="8" :lg="5">
-      <div class="card c2">
+				><span>全部班级</span>
+				</div>
+			</el-col>
+			<el-col :xs="12" :span="5">
+				<div class="card c2">
         <span class="n">{{ Math.round(Number(teacherCountOutput)) }}</span
-        ><span>全部教师</span>
-      </div>
-    </el-col>
-    <el-col :xs="24" :sm="12" :md="8" :lg="5">
-      <div class="card c3">
+				><span>全部教师</span>
+				</div>
+			</el-col>
+			<el-col :xs="12" :span="5">
+				<div class="card c3">
         <span class="n">{{ Math.round(Number(studentCountOutput)) }}</span
-        ><span>全部学生</span>
-      </div>
-    </el-col>
-    <el-col :xs="24" :sm="12" :md="8" :lg="5">
-      <div class="card c4">
+				><span>全部学生</span>
+				</div>
+			</el-col>
+			<el-col :xs="12" :span="5">
+				<div class="card c4">
         <span class="n">{{ Math.round(Number(equipmentCountOutput)) }}</span
-        ><span>设备套数</span>
-      </div>
-    </el-col>
-    <el-col :xs="24" :sm="12" :md="8" :lg="5">
-      <div class="card c5">
+				><span>设备套数</span>
+				</div>
+			</el-col>
+			<el-col :xs="12" :span="5">
+				<div class="card c5">
         <span class="n">{{ Math.round(Number(trainingCountOutput)) }}</span
-        ><span>累计训练次数</span>
-      </div>
-    </el-col>
-  </el-row>
+				><span>累计训练次数</span>
+				</div>
+			</el-col>
+		</el-row>
 </template>
 <style lang="scss" scoped>
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width:768px) {
+  .el-col-5{
+	display: block;
+	max-width: 20%;
+	min-width: 285px;
+	flex: 0 0 20%;
+  }
+}
+@media only screen and (max-width:768px) {
   .el-col-lg-5 {
-    display: block;
-    max-width: 20%;
-    min-width: 285px;
-    flex: 0 0 20%;
+
   }
 }
 .data-card {
-  margin: 0 auto !important;
   padding: 22px 42px;
   background: #ffffff;
   border-radius: 30px;
@@ -159,11 +163,15 @@ watch(
     }
   }
 }
-@media only screen and (max-width: 1200px) {
-  .data-card .card {
-    padding: 32px 0 0 74px;
-    text-align: center;
-    white-space: nowrap;
-  }
+//移动端兼容
+.mobile {
+  .data-card {
+	.card {
+	  padding: 32px 0 0 74px;
+	  text-align: center;
+	  white-space: nowrap;
+	}
+	}
+
 }
 </style>

src/views/dashboard/index.vue

@@ -136,11 +136,11 @@ watch(
 
     <!-- Echarts 图表 -->
     <el-row v-if="chartStatus" :gutter="20">
-      <el-col :md="24" :lg="8" :xl="8">
+      <el-col :xs="24" :span="8">
         <div class="charts-item">
           <p class="title">学员专注力平均值整体对比分析</p>
           <el-row justify="space-between">
-            <el-col :xs="24" :sm="12">
+            <el-col :span="12">
               <div class="item">
                 <LiquidChart
                   id="liquidChart1"
@@ -156,7 +156,7 @@ watch(
                 <p>专注力评估均值</p>
               </div>
             </el-col>
-            <el-col :xs="24" :sm="12">
+            <el-col :span="12">
               <div class="item">
                 <LiquidChart
                   id="liquidChart2"
@@ -174,7 +174,7 @@ watch(
             </el-col>
           </el-row>
           <el-row justify="space-between">
-            <el-col :xs="24" :sm="12">
+            <el-col :span="12">
               <div class="item">
                 <CircleChart
                   id="circleChart1"
@@ -192,7 +192,7 @@ watch(
                 <p>专注力50以上人数比例</p>
               </div>
             </el-col>
-            <el-col :xs="24" :sm="12">
+            <el-col :span="12">
               <div class="item">
                 <CircleChart
                   id="circleChart2"
@@ -214,11 +214,11 @@ watch(
         </div>
       </el-col>
       <!-- 学员专注力评分分级占比分析 -->
-      <el-col :md="24" :lg="16" :xl="16">
+      <el-col :xs="24" :span="16">
         <div class="charts-item">
           <p class="title">学员专注力评分分级占比分析</p>
           <el-row justify="space-between">
-            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+            <el-col :xs="24" :span="12">
               <div class="bar">
                 <PercentBarChart
                   id="barChart1"
@@ -232,7 +232,7 @@ watch(
                 />
               </div>
             </el-col>
-            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+            <el-col :xs="24" :span="12">
               <div class="bar">
                 <PercentBarChart
                   id="barChart2"
@@ -251,7 +251,7 @@ watch(
       </el-col>
     </el-row>
     <el-row v-else :gutter="20">
-      <el-col :md="24" :lg="8">
+      <el-col :xs="24" :span="8">
         <div class="charts-item">
           <p class="title">学员专注力平均值整体对比分析</p>
 <!--          <div v-if="dataStatus == 2" class="empty">-->
@@ -270,7 +270,7 @@ watch(
           </div>
         </div>
       </el-col>
-      <el-col :md="24" :lg="16">
+      <el-col :xs="24" :span="16">
         <div class="charts-item">
           <p class="title">学员专注力评分分级占比分析</p>
 <!--          <div v-if="dataStatus == 2" class="empty">-->