有些傻逼浏览器不支持css gap!

src/components/BottomBar.vue

@@ -195,10 +195,14 @@ export default {
       transform: translateX(-50%);
       display: flex;
       align-items: center;
-      gap: 2.12rem;
       > button {
         padding: 0.4rem;
         position: relative;
+        margin-left: 2.12rem;
+        &:first-child {
+          margin-left: initial;
+        }
+
         > img {
           width: 3.17rem;
           height: 3.17rem;

src/components/HotspotDetail.vue

@@ -525,8 +525,11 @@ export default {
     width: 100%;
     display: flex;
     justify-content: center;
-    gap: 2.08rem;
     > button {
+      margin-right: 2.08rem;
+      &:last-child {
+        margin-right: initial;
+      }
       > img {
         width: 5rem;
         height: 5rem;

src/components/PanoList.vue

@@ -150,9 +150,9 @@ export default {
       padding: 0 1.67rem;
       .tab-wrap {
         display: flex;
-        gap: 3.58rem;
         align-items: center;
         > button {
+          margin-right: 3.58rem;
           font-size: 1.83rem;
           color: #FFFFFF;
           &.active {
@@ -187,15 +187,15 @@ export default {
       padding: 1.67rem;
       &.shrink {
         height: 5.83rem;
-        gap: 1.67rem;
         .tab-wrap {
+          margin-right: 1.67rem;
           flex: 1 1 1px;
           overflow: auto;
           display: flex;
           align-items: center;
-          gap: 2.92rem;
           &::-webkit-scrollbar { width: 0; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
           > button {
+            margin-right: 2.92rem;
             white-space: nowrap;
             word-break: keep-all;
             font-size: 1.83rem;
@@ -216,15 +216,18 @@ export default {
         }
       }
       &.expand {
-        gap: 1.67rem;
         flex-direction: column;
         flex: 0 0 auto;
         .tab-wrap {
+          margin-bottom: 1.67rem;
           display: flex;
           align-items: center;
           flex-wrap: wrap;
-          gap: 1.67rem 2.92rem;
+          margin-right: -2.92rem;
+          margin-bottom: -1.67rem;
           > button {
+            margin-right: 2.92rem;
+            margin-bottom: 1.67rem;
             white-space: nowrap;
             word-break: keep-all;
             font-size: 1.83rem;
@@ -255,14 +258,17 @@ export default {
     &::-webkit-scrollbar-track { background: transparent; }
     .scene-list {
       overflow: auto;
-      width: calc(2 * 20.83rem + 1.88rem + 0.25rem);
+      width: calc(2 * 20.83rem + 1.88rem * 2 + 0.25rem);
       display: flex;
       align-content: flex-start;
-      gap: 2.5rem 1.88rem;
       flex-wrap: wrap;
       padding-top: 2.5rem;
       padding-bottom: 2.5rem;
+      margin-right: -1.88rem;
+      margin-bottom: -2.5rem;
       .scene {
+        margin-right: 1.88rem;
+        margin-bottom: 2.5rem;
         flex: 0 0 auto;
         width: 20.83rem;
         height: 17.5rem;

src/components/ShareModal.vue

@@ -64,8 +64,6 @@ export default {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 4.63rem;
-    padding-top: 3.5rem;
     h1 {
       font-size: 2rem;
       font-family: Source Han Sans CN-Bold, Source Han Sans CN;
@@ -88,6 +86,7 @@ export default {
       }
     }
     > p {
+      margin-top: 4.63rem;
       font-size: 1.67rem;
       font-weight: bold;
       line-height: 2.4rem;
@@ -95,14 +94,15 @@ export default {
       text-align: center;
     }
     > img {
+      margin-top: 4.63rem;
       width: 18.75rem;
       height: 18.75rem;
       object-fit: contain;
     }
     .button-group {
+      margin-top: 4.63rem;
       display: flex;
       justify-content: center;
-      gap: 1.5rem;
       > button {
         width: 15rem;
         height: 5.42rem;
@@ -112,9 +112,6 @@ export default {
         color: #FFFFFF;
         font-size: 1.83rem;
       }
-      > a {
-        font-size: 1.83rem;
-      }
     }
   }
 }

src/views/HomeView.vue

@@ -292,12 +292,15 @@ export default {
     transform: translateX(-50%);
     display: inline-flex;
     flex-direction: column;
-    gap: 3rem;
     > .router-link {
       display: inline-block;
       width: 21.67rem;
       height: 6.25rem;
       position: relative;
+      margin-bottom: 3rem;
+      &:last-child {
+        margin-bottom: initial;
+      }
       > img {
         width: 100%;
         height: 100%;

src/views/RelicsAppr.vue

@@ -277,8 +277,10 @@ export default {
     .left-wrap {
       display: flex;
       height: 100%;
-      gap: 0.83rem;
       > button {
+        &:first-child {
+          margin-right: 0.83rem;
+        }
         height: 100%;
         border-radius: 2.08rem;
         border: 0.08rem solid #930909;
@@ -394,13 +396,15 @@ export default {
     }
   }
   ul.relics-list-2d {
-    width: 100%;
     height: 100%;
     overflow: auto;
     display: flex;
     flex-wrap: wrap;
-    gap: 2.5rem 1.6rem;
+    margin-right: -1.6rem;
+    margin-bottom: -2.5rem;
     > li {
+      margin-right: 1.6rem;
+      margin-bottom: 2.5rem;
       width: 20.83rem;
       height: 19.33rem;
       background: #FFFFFF;

src/views/SwkkView.vue

@@ -519,8 +519,11 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 0.83rem;
     > button {
+      margin-bottom: 0.83rem;
+      &:last-child {
+        margin-bottom: initial;
+      }
       > img {
         width: 5rem;
         height: 5rem;
@@ -608,11 +611,14 @@ export default {
     .tour-guide {
       display: flex;
       align-items: center;
-      gap: 0.83rem;
       overflow: auto;
       width: 100%;
       height: 100%;
       > li {
+        margin-right: 0.83rem;
+        &:last-child {
+          margin-right: initial;
+        }
         flex: 0 0 auto;
         width: 12.5rem;
         height: 10.5rem;