图画详情页的查看大图功能

src/App.vue

@@ -125,11 +125,7 @@ input, textarea {
 }
 
 // // vue-viewer
-// .viewer-container {
-//   background-color: rgba(0, 0, 0, 80%) !important;
-// }
-// 或者
-// .viewer-backdrop {
-//   background-color: rgba(0, 0, 0, 90%) !important;
-// }
+.viewer-backdrop {
+  background-color: rgba(0, 0, 0, 90%) !important;
+}
 </style>

src/views/HotspotDetail2.vue

@@ -59,6 +59,10 @@
         pointerEvents: isAnimating ? 'none' : null,
       }"
     >
+      <button
+        class="show-big-painting"
+        @click="showBigPainting"
+      />
       <h3>作品简介：</h3>
       <p
         v-for="(item, index) in homepagePaintingDesc"
@@ -87,8 +91,8 @@ import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import TWEEN from '@tweenjs/tween.js'
-import { progressProps } from "element-plus"
-
+import { api as viewerApi } from 'v-viewer'
+import bigPainting from '@/assets/images/home-painting-big.jpg'
 
 const route = useRoute()
 const router = useRouter()
@@ -146,6 +150,14 @@ onMounted(() => {
   })
 })
 
+function showBigPainting() {
+  if (descElScrollTop.value < 20) {
+    viewerApi({
+      images: [bigPainting],
+    })
+  }
+}
+
 const isShowOperationTip = ref(true)
 watch(descElScrollTop, (v) => {
   if (v > 0) {
@@ -193,8 +205,8 @@ const fixedDescOpacity = computed(() => {
   >.painting-wrap{
     position: absolute;
     left: 50%;
-    top: 44%;
-    transform: translate(-50%, -50%);
+    top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
     width: calc(356 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(602 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     overflow: hidden;
@@ -258,13 +270,18 @@ const fixedDescOpacity = computed(() => {
     top: 0;
     width: 100%;
     height: 100%;
-    padding-top: 100vh;
     color: white;
     overflow: auto;
     padding-left: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     padding-right: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     font-family: KaiTi, KaiTi;
     color: #FFFFFF;
+    >button.show-big-painting{
+      height: calc(602 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: 100%;
+      margin-bottom: calc((844 - 602 - 70) / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
     >h3{
       margin-top: 1em;
       margin-bottom: 0.5em;