统一返回按钮大小、位置等问题

src/components/BtnBack.vue

@@ -51,8 +51,8 @@ const props = defineProps({
     justify-content: center;
     align-items: center;
     >img{
-      width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
 }

src/views/HomeView.vue

@@ -6,7 +6,7 @@ import { useStore } from "vuex"
 import HotspotDetail1 from "@/views/HotspotDetail1.vue"
 import HotspotDetail3 from "@/views/HotspotDetail3.vue"
 import { api as viewerApi } from "v-viewer"
-import Startup from '@/views/StartupView.vue'
+import Startup from "@/views/StartupView.vue"
 
 const store = useStore()
 
@@ -400,7 +400,21 @@ const backFu = () => {
     </div>
 
     <!-- 返回按钮 -->
-    <img
+    <BtnBack
+      :style="{
+        opacity:
+          curPageIndex == 2 ||
+          curPageIndex == 3 ||
+          curPageIndex == 4 ||
+          curPageIndex == 5
+            ? 1
+            : 0,
+        zIndex: curPageIndex == 1 || curPageIndex == 0 ? -1 : 1,
+      }"
+      class="back-btn-main"
+      @click="backFu()"
+    />
+    <!-- <img
       :style="{
         opacity:
           curPageIndex == 2 ||
@@ -415,7 +429,7 @@ const backFu = () => {
       src="@/assets/images/icon_back_white.png"
       alt=""
       @click="backFu()"
-    >
+    > -->
     <!-- 石头文字层 -->
     <div
       class="stone-text-box"
@@ -449,12 +463,16 @@ const backFu = () => {
         </p>
       </div>
       <!-- <div class="bottom-box" /> -->
-      <img
+      <BtnBack
+        class="back-btn"
+        @click="isShowPaintingDesc = false"
+      />
+      <!-- <img
         class="back-btn"
         src="@/assets/images/icon_back_white.png"
         alt=""
         @click="isShowPaintingDesc = false"
-      >
+      > -->
       <!-- <BtnBack
         class="system-btns"
         @click="isShowPaintingDesc = false"
@@ -486,12 +504,16 @@ const backFu = () => {
       </div>
       <!-- 底部遮罩 -->
       <!-- <div class="bottom-box" /> -->
-      <img
+      <BtnBack
+        class="back-btn"
+        @click="isShowAuthorDesc = false"
+      />
+      <!-- <img
         style="position: absolute; bottom: 30px; left: 20px; width: 25px"
         src="@/assets/images/icon_back_white.png"
         alt=""
         @click="isShowAuthorDesc = false"
-      >
+      > -->
       <!-- <BtnBack
         class="system-btns"
         @click="isShowAuthorDesc = false"
@@ -512,15 +534,16 @@ body {
 //   transition: width 1.5s, transform 1.5s, top 1.5s, opacity 1.5s;
 // }
 
-img,div {
+img,
+div {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   // transition: opacity 1.5s, top 1.5s, transform 1.5s;
-  transition: transform 1.5s, opacity 1.5s, top 1.5s, width 1.5s,height 1.5s;
+  transition: transform 1.5s, opacity 1.5s, top 1.5s, width 1.5s, height 1.5s;
 }
 
 ::-webkit-scrollbar {
-  display:none;
+  display: none;
 }
 
 .home {
@@ -847,7 +870,7 @@ img,div {
           v-bind("windowSizeInCssForRef")
       );
       height: calc(
-        542* 3.2 / v-bind("windowSizeWhenDesignForRef") *
+        542 * 3.2 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
     }
@@ -855,7 +878,7 @@ img,div {
 
   > .painting-wrap5 {
     // transform: translate(-26%, 10%) scale(2.6);
-     width: calc(110% * 2.2);
+    width: calc(110% * 2.2);
     // height: calc(315 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(
       760 * 2.2 / v-bind("windowSizeWhenDesignForRef") *
@@ -869,7 +892,7 @@ img,div {
           v-bind("windowSizeInCssForRef")
       );
       height: calc(
-        542* 2.2 / v-bind("windowSizeWhenDesignForRef") *
+        542 * 2.2 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
     }
@@ -995,7 +1018,7 @@ img,div {
       224 / var(--9ea40744-windowSizeWhenDesignForRef) *
         var(--9ea40744-windowSizeInCssForRef)
     );
-    background: linear-gradient(78deg, rgba(0, 0, 0, 0) 38%, #00000045 75%);
+    background: linear-gradient(78deg, rgba(0, 0, 0, 0) 38%, #00000087 75%);
     height: 100%;
 
     > .stone-text {
@@ -1050,17 +1073,16 @@ img,div {
   }
 
   > .back-btn-main {
-    width: 35px;
     position: absolute;
     z-index: 3;
     left: calc(
-      15 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
-    bottom: calc(
-      20 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
+        17 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      bottom: calc(
+        17 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
   }
 
   > .long-desc {
@@ -1134,9 +1156,14 @@ img,div {
     padding-right: 10%;
 
     > .back-btn {
-      width: 25px;
-      left: 20px;
-      bottom: 30px;
+      left: calc(
+        17 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      bottom: calc(
+        17 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
       position: absolute;
     }
 
@@ -1284,9 +1311,14 @@ img,div {
     }
 
     > .back-btn {
-      width: 25px;
-      left: 20px;
-      bottom: 30px;
+      left: calc(
+        17 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      bottom: calc(
+        17 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
       position: absolute;
     }
 

src/views/OnlineSceneView.vue

@@ -35,7 +35,7 @@ const router = useRouter()
     position: absolute;
     left: 20px;
     top: 25px;
-    transform: scale(1.2);
+    transform: scale(1);
   }
 }
 </style>