修复在部分设备上布局不正确的问题，优化布局效果

index.html

@@ -28,6 +28,12 @@
         height: 100%;
         width: 100%;
       }
+
+      @media screen and (max-width:640px){
+        #app {
+            margin:0;
+        }
+      }
     </style>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>

src/App.vue

@@ -87,18 +87,18 @@ mdui-layout-main {
 
 mdui-card {
   margin: 3px;
-  width: 24.5%;
+  width: calc(25% - 6px);
   height: 25%;
 }
 
 @media screen and (max-width: 640px) {
   mdui-card {
-    margin: 0;
+    width: calc(100% - 6px);
-    width: 100%;
   }
 
   mdui-layout-main{
     flex-direction: column;
+    flex-wrap: nowrap;
   }
 }
 </style>