feat: 首页vchart媒体查询

src/style/index.scss

@@ -3,6 +3,7 @@
 @import "./global-style.scss";
 @import "./loading-page.scss";
 @import "./card-animation.scss";
+@import "./media/media.scss";
 * {
   margin: 0;
   padding: 0;

src/style/media/index.scss

@@ -0,0 +1,16 @@
+/* 栅格布局 (媒体查询的变量)
+ * 参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries
+ * $xs: >= 0px;
+ * $sm: >= 576px;
+ * $md: >= 768px;
+ * $lg: >= 992px;
+ * $xl: >= 1200px;
+ * $xxl: >= 1600px;
+*/
+
+$xs: 0px;
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
+$xxl: 1600px;

src/style/media/layout.scss

@@ -0,0 +1,44 @@
+@import "./index.scss";
+
+// 页面宽度 大于 0px 小于 992px;
+@media screen and (min-width: $xs) and (max-width: $lg) {
+  .sell-histogram {
+    width: 100%;
+    height: 400px;
+    padding-bottom: $padding;
+  }
+  .monthly-analysis {
+    width: 100%;
+    height: 400px;
+    padding-bottom: $padding;
+  }
+}
+
+// 页面宽度 大于 992px 小于 1600px;
+@media screen and (min-width: $lg) and (max-width: $xxl) {
+  .sell-histogram {
+    width: 100%;
+    height: 400px;
+    padding-bottom: $padding;
+  }
+  .monthly-analysis {
+    width: 100%;
+    height: 400px;
+    padding-bottom: $padding;
+  }
+}
+
+// 页面宽度 大于 1600px;
+@media screen and (min-width: $xxl) {
+  .sell-histogram {
+    width: calc(100% - 600px - $padding);
+    height: 400px;
+    padding-bottom: $padding;
+  }
+  .monthly-analysis {
+    margin-left: $padding;
+    width: 600px;
+    height: 400px;
+    padding-bottom: $padding;
+  }
+}

src/style/media/media.scss

@@ -0,0 +1 @@
+@import "./layout.scss";

src/views/home/components/data-box.vue

@@ -27,6 +27,7 @@ import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
   margin-top: calc($padding * 2);
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   .data-title {
     font-size: $font-size-body-3;
     color: $color-text-1;
@@ -36,16 +37,17 @@ import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
     color: $color-text-2;
     margin-left: $margin-text;
   }
-  .sell-histogram {
+  // .sell-histogram {
-    width: calc(100% - 600px - $padding);
+  //   // width: calc(100% - 600px - $padding);
-    height: 400px;
+  //   width: 100%;
-    padding-bottom: $padding;
+  //   height: 400px;
-  }
+  //   padding-bottom: $padding;
-  .monthly-analysis {
+  // }
-    margin-left: $padding;
+  // .monthly-analysis {
-    width: 600px;
+  //   margin-left: $padding;
-    height: 400px;
+  //   width: 100%;
-    padding-bottom: $padding;
+  //   height: 400px;
-  }
+  //   padding-bottom: $padding;
+  // }
 }
 </style>