chore: homepage style

1 files changed, 24 insertions, 5 deletions

diff --git a/src/components/TrafficNow.module.scss b/src/components/TrafficNow.module.scss
index 0fca7ef..5ae96ac 100644
--- a/src/components/TrafficNow.module.scss
+++ b/src/components/TrafficNow.module.scss
@@ -4,10 +4,26 @@
   flex-wrap: wrap;
 
   display: grid;
-  grid-template-columns: repeat(auto-fill, 160px);
-  grid-gap: 15px;
-  justify-content: center;
-  // max-width: 1000px;
+  grid-gap: 10px;
+  grid-template-columns: 90%;
+  /* 当屏幕宽度大于300像素时，设置为一行两列 */
+  @media only screen and (min-width: 300px) {
+    grid-template-columns: 49% 49%;
+  }
+
+  /* 当屏幕宽度大于600像素时，设置为一行三列 */
+  @media only screen and (min-width: 600px) {
+    grid-template-columns: repeat(auto-fill, 32%);
+  }
+  /* 当屏幕宽度大于1000像素时，设置为一行四列 */
+  @media only screen and (min-width: 1000px) {
+    grid-template-columns: repeat(auto-fill, 24%);
+  }
+  /* 当屏幕宽度大于1000像素时，设置为一行四列 */
+  @media only screen and (min-width: 1200px) {
+    grid-template-columns: repeat(auto-fill, 15%);
+  }
+  justify-content: space-between;
 
   .sec {
     padding: 10px;
@@ -20,7 +36,10 @@
     }
     div:nth-child(2) {
       padding: 10px 0 0;
-      font-size: 1.3em;
+      font-size: 1.2em;
+      @media only screen and (min-width: 720px) {
+        font-size: 1.1em;
+      }
     }
   }
 }