From 6047a22d33fbf607c30fceeec161ee456266e731 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Sun, 26 May 2024 16:13:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5vchart=E5=AA=92?=
 =?UTF-8?q?=E4=BD=93=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style/index.scss                   |  1 +
 src/style/media/index.scss             | 16 ++++++++++
 src/style/media/layout.scss            | 44 ++++++++++++++++++++++++++
 src/style/media/media.scss             |  1 +
 src/views/home/components/data-box.vue | 24 +++++++-------
 5 files changed, 75 insertions(+), 11 deletions(-)
 create mode 100644 src/style/media/index.scss
 create mode 100644 src/style/media/layout.scss
 create mode 100644 src/style/media/media.scss

diff --git a/src/style/index.scss b/src/style/index.scss
index d2b8c6c..ed4a2ed 100644
--- a/src/style/index.scss
+++ b/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;
diff --git a/src/style/media/index.scss b/src/style/media/index.scss
new file mode 100644
index 0000000..ee71c1c
--- /dev/null
+++ b/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;
diff --git a/src/style/media/layout.scss b/src/style/media/layout.scss
new file mode 100644
index 0000000..e1618e5
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/style/media/media.scss b/src/style/media/media.scss
new file mode 100644
index 0000000..8d689cb
--- /dev/null
+++ b/src/style/media/media.scss
@@ -0,0 +1 @@
+@import "./layout.scss";
diff --git a/src/views/home/components/data-box.vue b/src/views/home/components/data-box.vue
index 699b4ce..7f4011f 100644
--- a/src/views/home/components/data-box.vue
+++ b/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 {
-    width: calc(100% - 600px - $padding);
-    height: 400px;
-    padding-bottom: $padding;
-  }
-  .monthly-analysis {
-    margin-left: $padding;
-    width: 600px;
-    height: 400px;
-    padding-bottom: $padding;
-  }
+  // .sell-histogram {
+  //   // width: calc(100% - 600px - $padding);
+  //   width: 100%;
+  //   height: 400px;
+  //   padding-bottom: $padding;
+  // }
+  // .monthly-analysis {
+  //   margin-left: $padding;
+  //   width: 100%;
+  //   height: 400px;
+  //   padding-bottom: $padding;
+  // }
 }
 </style>