优化首页抖动和苹果手机进度条显示问题

src/views/HomeView.vue

@@ -6,6 +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'
 
 const store = useStore()
 
@@ -88,6 +89,11 @@ function showBigPainting() {
   }
   if (viewerBtn) {
     viewerBtn.classList.add("viewer-button-home")
+    viewerBtn.addEventListener("click", () => {
+      if (bodyDom.querySelector(".big-tip")) {
+        bodyDom.removeChild(bigTipDom)
+      }
+    })
   }
 
   if (viewerCanvas) {
@@ -500,15 +506,21 @@ body {
   transform: translate3d(0, 0, 0);
 }
 
+// img,div {
+//   -webkit-backface-visibility: hidden;
+//   backface-visibility: hidden;
+//   transition: width 1.5s, transform 1.5s, top 1.5s, opacity 1.5s;
+// }
+
 img,div {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
-  transition: transform 1.5s, bottom 1.5s, top 1.5s, opacity 1.5s;
+  // 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;
 }
 
 ::-webkit-scrollbar {
-  width: 0;
-  height: 0;
+  display:none;
 }
 
 .home {
@@ -780,9 +792,11 @@ img,div {
   > .painting-wrap2 {
     top: 7%;
     z-index: 8;
+    transform: transform 1.5s !important;
   }
 
   > .painting-wrap3 {
+    // transform: translate(-50%, 0%) scale(1.5);
     width: 110%;
     // height: calc(315 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(
@@ -818,11 +832,47 @@ img,div {
   }
 
   > .painting-wrap4 {
-    transform: translate(-57%, -40%) scale(4.7);
+    // transform: translate(-57%, -40%) scale(3.2);
+    width: calc(110% * 3.2);
+    // height: calc(315 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(
+      760 * 3.2 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    transform: translate(-53%, -53%);
+    transform-origin: 50% 50%;
+    > .painting-stem {
+      width: calc(
+        364 * 3.2 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      height: calc(
+        542* 3.2 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+    }
   }
 
   > .painting-wrap5 {
-    transform: translate(-26%, 10%) scale(2.6);
+    // transform: translate(-26%, 10%) scale(2.6);
+     width: calc(110% * 2.2);
+    // height: calc(315 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(
+      760 * 2.2 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
+    transform: translate(-40%, -39%);
+    transform-origin: center center;
+    > .painting-stem {
+      width: calc(
+        364 * 2.2 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      height: calc(
+        542* 2.2 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+    }
   }
 
   > .center-text {

src/views/PaintingDetail.vue

@@ -393,6 +393,10 @@ function showBigPainting() {
 </script>
 
 <style lang="less" scoped>
+::-webkit-scrollbar {
+  display:none;
+}
+
 .hotspot-detail-2 {
   position: absolute;
   left: 0;

src/views/PaintingList.vue

@@ -309,6 +309,10 @@ const isShowPaintingStyleDesc = ref(false)
 </script>
 
 <style lang="less" scoped>
+::-webkit-scrollbar {
+  display:none;
+}
+
 .painting-list{
   position: absolute;
   left: 0;