style: 简单优化PC/平板端布局样式

Author: hsingyin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.15.53",
+  "version": "2.15.54",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/App.vue

@@ -419,8 +419,10 @@ function checkNeedConfiguration() {
     // overflow: hidden;
     flex: 1;
     display: flex;
+    align-items: center;
     flex-direction: column;
     overflow: auto;
+    width: 100%;
   }
 
   overflow-y: auto;

src/layout/AppLayout.vue

@@ -41,6 +41,19 @@
     flex: 1;
     padding: 56px 0 v-bind(height) 0;
     overflow: auto;
+    width: 100%;
+    @media screen and (min-width: 600px) {
+      max-width: 85%;
+    }
+    @media screen and (min-width: 768px) {
+      max-width: 630px;
+    }
+    @media screen and (min-width: 900px) {
+      max-width: 700px;
+    }
+    @media screen and (min-width: 1200px) {
+      max-width: 900px;
+    }
   }
 
 </style>

src/views/FileEditor.vue

@@ -934,6 +934,7 @@ const handleEditGlobalClick = () => {
   display: flex;
   justify-content: space-between;
   bottom: 0;
+  left: 0;
   width: 100%;
   padding: 8px var(--safe-area-side) calc(v-bind("padding") + 8px) var(--safe-area-side);
   z-index: 20;
@@ -947,19 +948,18 @@ const handleEditGlobalClick = () => {
     display: flex;
     justify-content: center;
     align-items: center;
-
     svg {
       margin-right: 4px;
     }
   }
 
-  // .compare-btn {
-  //   background: transparent;
-  //   width: 36%;
-  // }
+  .compare-btn {
+    background: transparent;
+    width: 36%;
+  }
 
   .submit-btn {
-    width: 67%;
+    width: 62%;
   }
 }
 

src/views/SubEditor.vue

@@ -1382,6 +1382,7 @@ const handleEditGlobalClick = () => {
   display: flex;
   justify-content: space-between;
   bottom: 0;
+  left: 0;
   width: 100%;
   padding: 8px var(--safe-area-side) calc(v-bind("padding") + 8px)
     var(--safe-area-side);
@@ -1396,7 +1397,6 @@ const handleEditGlobalClick = () => {
     display: flex;
     justify-content: center;
     align-items: center;
-
     svg {
       margin-right: 4px;
     }

src/views/share/SharePopup.vue

@@ -5,7 +5,7 @@
     pop-class="share-popup"
     position="center"
     :style="{
-      width: `90%`,
+      width:'88vw',
       padding: '20px 12px 0 12px',
       backgroundColor: 'var(--background-color)',
     }"