适配移动端web app

样式来自Chavyleung

web/src/App.vue

@@ -74,7 +74,6 @@ export default {
   }
 }
 </script>
-
 <style>
-
+@import "css/app.css";
 </style>

web/src/components/BottomNav.vue

@@ -34,4 +34,4 @@ export default {
     }
   }
 }
-</script>
+</script>

web/src/components/TopToolbar.vue

@@ -63,4 +63,4 @@ export default {
     }
   }
 }
-</script>
+</script>

web/src/css/app.css

@@ -0,0 +1,48 @@
+[v-cloak] {
+    display: none;
+}
+.text-pre-wrap {
+    white-space: pre-wrap !important;
+}
+.v-navigation-drawer {
+    padding-top: constant(safe-area-inset-top) !important;
+    padding-top: env(safe-area-inset-top) !important;
+}
+.v-bottom-sheet.v-dialog--fullscreen {
+    padding-top: constant(safe-area-inset-top) !important;
+    padding-top: env(safe-area-inset-top) !important;
+}
+.v-app-bar {
+    height: auto !important;
+    padding-top: constant(safe-area-inset-top) !important;
+    padding-top: env(safe-area-inset-top) !important;
+}
+.v-toolbar {
+    height: auto !important;
+    padding-top: constant(safe-area-inset-top) !important;
+    padding-top: env(safe-area-inset-top) !important;
+}
+.v-toolbar__content {
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+}
+.v-main {
+    margin-top: constant(safe-area-inset-top) !important;
+    margin-top: env(safe-area-inset-top) !important;
+    margin-bottom: constant(safe-area-inset-bottom) !important;
+    margin-bottom: env(safe-area-inset-bottom) !important;
+}
+.v-main .container {
+    height: 100%;
+}
+.v-bottom-navigation,
+.v-bottom-sheet {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+.v-bottom-navigation {
+    box-sizing: content-box;
+}
+.v-bottom-navigation button {
+    box-sizing: border-box;
+}

web/src/views/Subscription.vue

@@ -141,7 +141,7 @@
 </template>
 
 <script>
-import ProxyList from "@/views/ProxyList";
+import ProxyList from "@/components/ProxyList";
 import {BACKEND_BASE} from "@/config";
 import {axios} from "@/utils";