Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang into master

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/BambooHotView3/index.vue

@@ -541,18 +541,18 @@ img {
     }
   }
   &-b7 {
-    left: calc(950 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    left: calc(1000 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 2;
   }
   .bamboo-hot2__hot.b7 {
     top: calc(160 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    left: calc(1230 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    left: calc(1280 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 4;
   }
   &-b8 {
-    left: calc(1080 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    left: calc(1030 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(25 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);
 
     .bamboo-hot2__hot {

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) {
@@ -394,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 ||
@@ -409,7 +429,7 @@ const backFu = () => {
       src="@/assets/images/icon_back_white.png"
       alt=""
       @click="backFu()"
-    >
+    > -->
     <!-- 石头文字层 -->
     <div
       class="stone-text-box"
@@ -443,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"
@@ -480,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"
@@ -500,15 +528,22 @@ body {
   transform: translate3d(0, 0, 0);
 }
 
-img,div {
+// 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 +815,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 +855,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 {
@@ -945,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 {
@@ -1000,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 {
@@ -1084,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;
     }
 
@@ -1240,9 +1317,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>

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;