修改数据首页布局

src/containers/Dashboard/Dashboard.vue

@@ -212,6 +212,7 @@ export default {
 </script>
 
 <style lang="scss">
+@import '@/assets/styles/variables.scss';
 .Dashboard {
   display: flex;
   flex-direction: column;
@@ -246,7 +247,6 @@ export default {
   }
   .Dashboard-CampusData {
     display: flex;
-    height: 300px;
     padding: 0 15px;
 
     .Dashboard-title {
@@ -321,4 +321,20 @@ export default {
     }
   }
 }
+@media screen and (max-width: $bigScreenWidth) {
+  .Dashboard {
+    .Dashboard-SearchBar {
+      padding: 10px 0 10px;
+    }
+    .Dashboard-OperatorData {
+      .Dashboard-SearchBar {
+        height: 50px;
+      }
+      .Dashboard-title {
+        margin: 10px 10px 0;
+        padding-bottom: 10px;
+      }
+    }
+  }
+}
 </style>

src/containers/Dashboard/chartMixin.js

@@ -8,6 +8,7 @@ export default {
   data() {
     return {
       chart: null,
+      height: 270,
       chartGeom: null,
     };
   },
@@ -17,6 +18,11 @@ export default {
     },
   },
   mounted() {
+    const innerWidth = window.innerWidth;
+    const innerHeight = window.innerHeight;
+    if (innerWidth < 1600) {
+      this.height = (innerHeight - 250) / 2;
+    }
     this.initData();
   },
   methods: {

src/containers/Dashboard/components/ActiveUserByMonth.vue

@@ -24,7 +24,7 @@ export default {
       this.chart = new G2.Chart({
         container: 'ActiveUserByMonth',
         forceFit: true,
-        height: 270,
+        height: this.height,
         padding: [50, 40],
       });
       this.chart

src/containers/Dashboard/components/CampusRank.vue

@@ -29,7 +29,7 @@ export default {
       this.chart = new G2.Chart({
         container: 'CampusRank',
         forceFit: true,
-        height: 270,
+        height: this.height,
         padding: [0, 130, 0, 0],
       });
       this.chart.source(this.data);

src/containers/Dashboard/components/RegisterByDay.vue

@@ -19,7 +19,7 @@ export default {
       this.chart = new G2.Chart({
         container: 'RegisterByDay',
         forceFit: true,
-        height: 270,
+        height: this.height,
         padding: [40, 20, 30, 45],
       });
       this.chart

src/containers/Dashboard/components/RegisterByMonth.vue

@@ -18,7 +18,7 @@ export default {
       this.chart = new G2.Chart({
         container: 'RegisterByMonth',
         forceFit: true,
-        height: 270,
+        height: this.height,
         padding: [0, 20, 30, 20],
       });
       this.chart

src/containers/Dashboard/components/SeviceRatio.vue

@@ -29,7 +29,7 @@ export default {
       this.chart = new G2.Chart({
         container: 'SeviceRatio',
         forceFit: true,
-        height: 270,
+        height: this.height,
         padding: [0, 130, 0, 0],
       });
       this.chart.source(this.data);

src/dev-local/develop.html

@@ -8,11 +8,6 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vuex@3.1.0/dist/vuex.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.js"></script>
-
-    <link
-      rel="stylesheet"
-      href="<%= VUE_APP_LIB_MANAGER %>/customerManage/lib/customerManage.css"
-    />
     <link
       rel="stylesheet"
       href="<%= VUE_APP_LIB_MANAGER %>/baseManage/lib/baseManage.css"