UI适配手机访问

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>

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>