From 6b34541bb1d6ec7e766d6310990b1b456b24d945 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Wed, 19 Jul 2023 11:10:08 +0800
Subject: [PATCH] =?UTF-8?q?UI=E9=80=82=E9=85=8D=E6=89=8B=E6=9C=BA=E8=AE=BF?=
 =?UTF-8?q?=E9=97=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/banner.vue | 47 +++++++++++++++++++++++++++++++++++++++
 src/views/main.vue        | 12 +++++++++-
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/components/banner.vue b/src/components/banner.vue
index 71c47c2..ccaca34 100644
--- a/src/components/banner.vue
+++ b/src/components/banner.vue
@@ -69,6 +69,8 @@
       justify-content: center;
       height: 100%;
       margin-left: 16px;
+      padding: 16px;
+      line-height: 1;
       font-size: 32px;
       background: var(--color-plain-1);
     }
@@ -96,4 +98,49 @@
     background: var(--color-plain-1);
   }
 }
+
+@media screen and (max-width: 960px) {
+  .banner .env {
+    .scores {
+      font-size: 26px;
+    }
+
+    .num {
+      font-size: 44px;
+    }
+  }
+}
+@media screen and (max-width: 840px) {
+  .banner {
+    .env {
+      flex-direction: column;
+      width: 92%;
+      height: auto;
+
+      .info {
+        flex: 1;
+        width: auto;
+      }
+      .scores {
+        margin-left: 0;
+        margin-top: 8px;
+      }
+    }
+    .useragent {
+      width: 92%;
+      margin-top: 16px;
+    }
+  }
+}
+
+@media screen and (max-width: 460px) {
+  .banner {
+    .env {
+      .scores {
+        flex-direction: column;
+        font-size: 22px;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/main.vue b/src/views/main.vue
index c32e88a..d55e084 100644
--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -35,7 +35,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: 32px;
+  margin-top: 24px;
 
   .list {
     display: flex;
@@ -70,4 +70,14 @@ export default {
     color: var(--color-red-1);
   }
 }
+
+@media screen and (max-width: 840px) {
+  .modules .list {
+    width: 92%;
+
+    wc-card {
+      width: 100%;
+    }
+  }
+}
 </style>