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/assets/styles/global.scss

@@ -93,6 +93,27 @@ img {
   border-radius: 8px;
   overflow: auto;
   padding-bottom: 24px;
+  
+  // PC/平板端响应式最大宽度限制
+  @media screen and (min-width: 600px) {
+    max-width: 500px;
+    width: 500px;
+  }
+  
+  @media screen and (min-width: 768px) {
+    max-width: 600px;
+    width: 600px;
+  }
+  
+  @media screen and (min-width: 1024px) {
+    max-width: 700px;
+    width: 700px;
+  }
+  
+  @media screen and (min-width: 1200px) {
+    max-width: 800px;
+    width: 800px;
+  }
 }
 .nut-button {
   margin-right: 10px;

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/CompareTable.vue

@@ -394,7 +394,7 @@
 
   .compare-table-row {
     padding: 0 var(--safe-area-side);
-    width: 100vw;
+    width: 100%;
     cursor: pointer;
   }
 
@@ -408,8 +408,6 @@
     display: grid;
     grid-template-columns: 46% 1fr 1fr 1fr 1fr;
 
-    li {
-    }
     li,
     td {
       display: flex;
@@ -493,6 +491,8 @@
     font-size: 12px;
     background: inherit;
     color: var(--comment-text-color);
+    width: 100%;
+    flex: 1;
   }
 
   .compare-page-header {
@@ -508,7 +508,7 @@
     color: var(--primary-text-color);
     background: var(--background-color);
     border-color: var(--divider-color);
-    width: 100vw;
+    width: 100%;
     .title {
       white-space: nowrap;
     }
@@ -517,6 +517,14 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 40vw;
+      
+      @media screen and (min-width: 768px) {
+        max-width: 300px;
+      }
+      
+      @media screen and (min-width: 1024px) {
+        max-width: 400px;
+      }
     }
     h1 {
       display: flex;
@@ -561,6 +569,33 @@
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     background: var(--background-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+    @media screen and (min-width: 768px) {
+      .compare-page-header,
+      .compare-page-body {
+        width: 85%;
+        max-width: 800px;
+      }
+    }
+    
+    @media screen and (min-width: 900px) {
+      .compare-page-header,
+      .compare-page-body {
+        width: 80%;
+        max-width: 900px;
+      }
+    }
+    
+    @media screen and (min-width: 1200px) {
+      .compare-page-header,
+      .compare-page-body {
+        width: 75%;
+        max-width: 1000px;
+      }
+    }
   }
 
   .divider,

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)',
     }"