feat: 从双钩页面进入的两个绘画详情页，重做

src/router/index.js

@@ -5,7 +5,9 @@ import ShuangGou from '../views/ShuangGou.vue'
 import BambooList from '../views/BambooList.vue'
 import PoemList from '../views/PoemList.vue'
 import PaintingList from '../views/PaintingList.vue'
-import PaintingDetail from '../views/PaintingDetail'
+import PaintingDetail from '../views/PaintingDetail.vue'
+import PaintingDetailForTaoZhu from '../views/PaintingDetailForTaoZhu.vue'
+import PaintingDetailForZhuQin from '../views/PaintingDetailForZhuQin.vue'
 import GameView from '../views/GameView.vue'
 import BambooBookView from '../views/BambooBookView.vue'
 import SceneView from '../views/SceneView.vue'
@@ -54,6 +56,16 @@ const routes = [
     component: PaintingDetail,
     // component: TEXT,
   },
+  {
+    path: '/painting-detail-for-zhu-qin',
+    name: 'PaintingDetailForZhuQin',
+    component: PaintingDetailForZhuQin,
+  },
+  {
+    path: '/painting-detail-for-tao-zhu',
+    name: 'PaintingDetailForTaoZhu',
+    component: PaintingDetailForTaoZhu,
+  },
   // 游戏
   {
     path: '/game',

src/views/PaintingDetailForShuangGou.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="painting-detail-for-shuang-gou">
+    <div
+      class="painting-wrap"
+      :style="{
+        clipPath: `rect(0 100% ${AnimationProgress.value}% 0)`,
+      }"
+    >
+      <!-- <img
+        class=""
+        src="@/assets/images/"
+        alt=""
+        draggable="false"
+      > -->
+      <Transition name="fade-out">
+        <img
+          v-show="isAnimating"
+          class="bottom-border-for-animation"
+          :style="{
+            bottom: `${100 - AnimationProgress.value}%`,
+          }"
+          src="@/assets/images/painting-border-bottom.png"
+          alt=""
+          draggable="false"
+        >
+      </Transition>
+    </div>
+    <div
+      ref="descTextEl"
+      class="desc-text"
+      :style="{
+        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
+      }"
+    >
+      <h1>{{ props.title }}</h1>
+      <p class="subtitle">
+        {{ `${props.author} （${props.age}）` }}
+      </p>
+      <p class="subtitle">
+        {{ props.subtitle }}
+      </p>
+      <p class="subtitle">
+        {{ props.location }}
+      </p>
+    </div>
+
+    <OperationTip
+      v-if="needOperationTip"
+      class="operation-tip"
+      text=""
+      :is-show="isShowOperationTip"
+    />
+
+    <BtnBack
+      v-if="canClose"
+      @click="emit('close')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, inject, onUnmounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import TWEEN from '@tweenjs/tween.js'
+import { api as viewerApi } from 'v-viewer'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const emit = defineEmits(['close'])
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const props = defineProps({
+  thumb: {
+    type: String,
+    required: true,
+  },
+  bigPainting: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  author: {
+    type: String,
+    required: true,
+  },
+  // subtitle: {
+  //   type: String,
+  //   required: true,
+  // },
+  age: {
+    type: String,
+    required: true,
+  },
+  location: {
+    type: String,
+    required: true,
+  },
+  paintingDesc: {
+    type: String,
+    default: '',
+  },
+  authorDesc: {
+    type: String,
+    default: '',
+  },
+  canClose: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: Object,
+    default: () => {
+      return {
+        width: 1,
+        height: 1,
+      }
+    },
+  },
+  needOperationTip: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+/**
+ * 操作提示
+ */
+const needOperationTip = computed(() => {
+  return props.needOperationTip
+})
+const isShowOperationTip = ref(true)
+const descTextEl = ref(null)
+const descTextElScrollTop = ref(0)
+onMounted(() => {
+  descTextEl.value.addEventListener('scroll', (e) => {
+    descTextElScrollTop.value = descTextEl.value.scrollTop
+  })
+
+})
+const unwatch = watch(descTextElScrollTop, (v) => {
+  isShowOperationTip.value = false
+  unwatch()
+})
+
+const isAnimating = ref(true)
+
+/** 卷轴展开动画的tweening */
+const AnimationProgress = ref({
+  value: 7
+})
+const tween = new TWEEN.Tween(AnimationProgress.value)
+tween.to({
+  value: 100,
+}, 3000)
+tween.easing(TWEEN.Easing.Cubic.InOut)
+let animationRequestId = null
+const animate = () => {
+  animationRequestId = requestAnimationFrame(animate)
+  TWEEN.update()
+}
+// tween.onUpdate(function (object) {
+//   console.log(object.value)
+// })
+onMounted(() => {
+  tween.start()
+  animate()
+})
+tween.onComplete(() => {
+  isAnimating.value = false
+  cancelAnimationFrame(animationRequestId)
+})
+onUnmounted(() => {
+  tween.stop()
+  cancelAnimationFrame(animationRequestId)
+})
+
+/**
+ * 尺寸相关
+ */
+const paintingWrapWidth = ref(268)
+const paintingWrapHeight = ref(426)
+let wrapSizeRatio = paintingWrapWidth.value / paintingWrapHeight.value
+if (wrapSizeRatio < 1) {
+  wrapSizeRatio = 1 / wrapSizeRatio
+}
+
+let sizeRatio = props.size.width / props.size.height
+if (sizeRatio < 1) {
+  sizeRatio = 1 / sizeRatio
+}
+
+const isOversize = ref(sizeRatio > wrapSizeRatio)
+
+const paintingWrap2El = ref(null)
+const paintingEl = ref(null)
+onMounted(() => {
+  if (isOversize.value) {
+    setTimeout(() => {
+      const y = (paintingEl.value.clientHeight - paintingWrap2El.value.clientHeight) / 2
+      paintingWrap2El.value.scrollTo({
+        top: y,
+        // behavior: 'smooth',
+      })
+    }, 0)
+  }
+})
+
+function showBigPainting() {
+  viewerApi({
+    images: [props.bigPainting],
+  })
+}
+
+</script>
+
+<style lang="less" scoped>
+.painting-detail-for-shuang-gou{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  ::-webkit-scrollbar { width: 0; height: 0; }
+  >.painting-wrap{
+    position: absolute;
+    left: 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;
+    >img.painting-border{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    >.painting-wrap-2{
+      position: absolute;
+      left: 50%;
+      top: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      transform: translate(-50%, 0);
+      width: calc(v-bind('paintingWrapWidth') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(v-bind('paintingWrapHeight') / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      overflow: auto;
+      >img.painting{
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+      }
+      >img.painting.oversize{
+        position: static;
+        left: initial;
+        top: initial;
+        transform: initial;
+      }
+    }
+    >img.bottom-border-for-animation{
+      position: absolute;
+      left: 0;
+      width: 100%;
+    }
+  }
+  >.desc-text{
+    position: absolute;
+    left: 50%;
+    bottom: 2%;
+    transform: translateX(-50%);
+    width: calc(306 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(130 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    overflow: auto;
+    >h1{
+      text-align: center;
+      font-family: KaiTi, KaiTi;
+      font-weight: 400;
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      color: #FFFFFF;
+      margin-bottom: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >p.subtitle{
+      text-align: center;
+      font-family: KaiTi, KaiTi;
+      font-weight: 400;
+      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      color: rgba(255, 255, 255, 0.8);
+      line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-bottom: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >h2{
+      display: inline-block;
+      margin-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: KaiTi, KaiTi;
+      color: #FFFFFF;
+      margin-top: 2em;
+      margin-bottom: 0.5em;
+      font-weight: 400;
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >.normal-text{
+      font-family: KaiTi, KaiTi;
+      color: #FFFFFF;
+      font-weight: 400;
+      font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      text-align: justify;
+      white-space: pre-line;
+    }
+  }
+}
+</style>

src/views/PaintingDetailForTaoZhu.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="painting-detail-for-shuang-gou">
+    <div
+      class="painting-wrap"
+      :style="{
+        clipPath: `inset(0% 0% ${100 - AnimationProgress.value}% 0%)`,
+      }"
+    >
+      <img
+        class="painting-border"
+        src="@/assets/images/painting-border-new.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        ref="paintingEl"
+        class="painting"
+        :src="imgUrlSmall"
+        alt=""
+        draggable="false"
+      >
+      <Transition name="fade-out">
+        <img
+          v-show="isAnimating"
+          class="bottom-border-for-animation"
+          :style="{
+            bottom: `${100 - AnimationProgress.value}%`,
+          }"
+          src="@/assets/images/painting-border-bottom.png"
+          alt=""
+          draggable="false"
+        >
+      </Transition>
+    </div>
+    <div
+      class="bottom-text"
+      :style="{
+        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
+      }"
+    >
+      <p class="size">
+        163.3×103.1厘米
+      </p>
+      <p class="location">
+        台北故宫博物院藏
+      </p>
+    </div>
+
+    <div
+      class="right-text"
+      :style="{
+        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
+      }"
+    >
+      <img
+        class="title"
+        src="@/assets/images/title-tao-zhu.png"
+        alt=""
+        draggable="false"
+      >
+      <p class="subtitle subtitle-1">
+        <span>轴</span> <span>绢本</span> <span>设色</span>
+      </p>
+      <p class="subtitle subtitle-2">
+        <span>宋</span> <span>佚名</span>
+      </p>
+    </div>
+
+    <button
+      class="view-img"
+      :style="{
+        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
+      }"
+      @click="showBigPainting"
+    >
+      <img
+        class=""
+        src="@/assets/images/painting-box-img/big-view.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+
+    <BtnBack
+      @click="router.go(-1)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, inject, onUnmounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import TWEEN from '@tweenjs/tween.js'
+import { api as viewerApi } from 'v-viewer'
+import { useWindowSize } from "@vueuse/core"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+
+const isAnimating = ref(true)
+
+/** 卷轴展开动画的tweening */
+const AnimationProgress = ref({
+  value: 7
+})
+const tween = new TWEEN.Tween(AnimationProgress.value)
+tween.to({
+  value: 100,
+}, 3000)
+tween.easing(TWEEN.Easing.Cubic.InOut)
+let animationRequestId = null
+const animate = () => {
+  animationRequestId = requestAnimationFrame(animate)
+  TWEEN.update()
+}
+// tween.onUpdate(function (object) {
+//   console.log(object.value)
+// })
+onMounted(() => {
+  tween.start()
+  animate()
+})
+tween.onComplete(() => {
+  isAnimating.value = false
+  cancelAnimationFrame(animationRequestId)
+})
+onUnmounted(() => {
+  tween.stop()
+  cancelAnimationFrame(animationRequestId)
+})
+
+const imgUrlSmall = `${$env.BASE_URL}configMultiMedia/paintings-small/桃竹双凫图.jpg`
+const imgUrl = `${$env.BASE_URL}configMultiMedia/paintings/桃竹双凫图.jpg`
+
+function showBigPainting() {
+  viewerApi({
+    images: [imgUrl],
+  })
+}
+
+</script>
+
+<style lang="less" scoped>
+.painting-detail-for-shuang-gou{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/painting-detail-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  ::-webkit-scrollbar { width: 0; height: 0; }
+  >.painting-wrap{
+    position: absolute;
+    left: 50%;
+    top: calc(16px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    transform: translate(-50%, 0);
+    width: calc(500px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    height: calc(848px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    overflow: hidden;
+    >img.painting-border{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    >img.painting{
+      position: absolute;
+      left: 50%;
+      top: calc(167px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      transform: translate(-50%, 0);
+      width: calc(398px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      height: calc(602px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      object-fit: contain;
+    }
+    >img.bottom-border-for-animation{
+      position: absolute;
+      left: 0;
+      width: 100%;
+    }
+  }
+  >.bottom-text{
+    position: absolute;
+    left: 50%;
+    bottom: calc(28px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    transform: translateX(-50%);
+    >p{
+      text-align: center;
+      font-family: KaiTi, KaiTi;
+      font-weight: 400;
+      font-size: calc(24px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      color: #E1EDD9;
+      line-height: calc(28px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      white-space: pre;
+      margin-top: 0.2em;
+    }
+  }
+  >.right-text{
+    position: absolute;
+    top: 50%;
+    left: calc(50% + 351px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    >img.title{
+      height: calc(513px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    }
+    >p{
+      font-family: KaiTi, KaiTi;
+      font-weight: 400;
+      font-size: calc(32px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      color: #E1EDD9;
+      line-height: calc(38px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      writing-mode: vertical-lr;
+    }
+    >p:nth-of-type(1) {
+      margin-left: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    }
+    >p:nth-of-type(2) {
+      margin-left: calc(12px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    }
+  }
+  >button.view-img{
+    position: absolute;
+    left: 35px;
+    bottom: 55px;
+    width: 48px;
+    height: 48px;
+    >img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/PaintingDetailForZhuQin.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="painting-detail-for-zhu-qin">
+    <div
+      class="painting-wrap"
+      :style="{
+        clipPath: `inset(0% ${100 - AnimationProgress.value}% 0% 0%)`,
+      }"
+    >
+      <img
+        class="painting-border"
+        src="@/assets/images/painting-border-horiz.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="painting"
+        :src="imgUrlSmall"
+        alt=""
+        draggable="false"
+      >
+      <img
+        class="right-border-for-animation"
+        :style="{
+          right: `calc(${100 - AnimationProgress.value}% - 2px)`,
+        }"
+        src="@/assets/images/painting-border-right.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
+    <div
+      class="bottom-text"
+      :style="{
+        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
+      }"
+    >
+      <p class="size">
+        33.8×55.4厘米
+      </p>
+      <p class="location">
+        大都会艺术博物馆藏
+      </p>
+    </div>
+
+    <div
+      class="right-text"
+      :style="{
+        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
+      }"
+    >
+      <img
+        class="title"
+        src="@/assets/images/title-zhu-qin.png"
+        alt=""
+        draggable="false"
+      >
+      <p class="subtitle subtitle-1">
+        <span>卷</span> <span>绢本</span> <span>设色</span>
+      </p>
+      <p class="subtitle subtitle-2">
+        <span>宋</span> <span>赵佶</span>
+      </p>
+    </div>
+
+    <button
+      class="view-img"
+      :style="{
+        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
+      }"
+      @click="showBigPainting"
+    >
+      <img
+        class=""
+        src="@/assets/images/painting-box-img/big-view.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+
+    <BtnBack
+      @click="router.go(-1)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, inject, onUnmounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import TWEEN from '@tweenjs/tween.js'
+import { api as viewerApi } from 'v-viewer'
+import { useWindowSize } from "@vueuse/core"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+
+const isAnimating = ref(true)
+
+/** 卷轴展开动画的tweening */
+const AnimationProgress = ref({
+  value: 7
+})
+const tween = new TWEEN.Tween(AnimationProgress.value)
+tween.to({
+  value: 100,
+}, 3000)
+tween.easing(TWEEN.Easing.Cubic.InOut)
+let animationRequestId = null
+const animate = () => {
+  animationRequestId = requestAnimationFrame(animate)
+  TWEEN.update()
+}
+// tween.onUpdate(function (object) {
+//   console.log(object.value)
+// })
+onMounted(() => {
+  tween.start()
+  animate()
+})
+tween.onComplete(() => {
+  isAnimating.value = false
+  cancelAnimationFrame(animationRequestId)
+})
+onUnmounted(() => {
+  tween.stop()
+  cancelAnimationFrame(animationRequestId)
+})
+
+const imgUrlSmall = `${$env.BASE_URL}configMultiMedia/paintings/竹禽图卷.jpg`
+const imgUrl = `${$env.BASE_URL}configMultiMedia/paintings/竹禽图卷.jpg`
+
+function showBigPainting() {
+  viewerApi({
+    images: [imgUrl],
+  })
+}
+
+</script>
+
+<style lang="less" scoped>
+.painting-detail-for-zhu-qin{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/painting-detail-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  ::-webkit-scrollbar { width: 0; height: 0; }
+  >.painting-wrap{
+    position: absolute;
+    left: 50%;
+    top: calc(50% - 18px);
+    transform: translate(-50%, -50%);
+    width: 810px;
+    height: 443px;
+    overflow: hidden;
+    >img.painting-border{
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    >img.painting{
+      position: absolute;
+      top: 50%;
+      left: 116px;
+      transform: translate(0, -50%);
+      width: 634px;
+      height: 387px;
+      object-fit: contain;
+    }
+    >img.right-border-for-animation{
+      position: absolute;
+      top: 0;
+      height: 100%;
+    }
+  }
+  >.bottom-text{
+    position: absolute;
+    left: 50%;
+    top: calc(50% + 236px);
+    transform: translateX(-50%);
+    >p{
+      text-align: center;
+      font-family: KaiTi, KaiTi;
+      font-weight: 400;
+      font-size: 24px;
+      color: #E1EDD9;
+      line-height: 28px;
+      white-space: pre;
+      margin-bottom: 0.2em;
+    }
+  }
+  >.right-text{
+    position: absolute;
+    top: calc(278px / v-bind('windowHeightDesign') * v-bind('windowHeight'));;
+    left: calc(50% + 504px);
+    display: flex;
+    align-items: center;
+    @media (max-width: 1420px) {
+      left: initial;
+      right: 10px;
+    }
+    >img.title{
+      height: calc(302px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    }
+    >p{
+      font-family: KaiTi, KaiTi;
+      font-weight: 400;
+      font-size: calc(32px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      color: #E1EDD9;
+      line-height: calc(38px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      writing-mode: vertical-lr;
+    }
+    >p:nth-of-type(1) {
+      margin-left: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    }
+    >p:nth-of-type(2) {
+      margin-left: calc(12px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    }
+  }
+  >button.view-img{
+    position: absolute;
+    left: 35px;
+    bottom: 55px;
+    width: 48px;
+    height: 48px;
+    >img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/ShuangGou.vue

@@ -144,17 +144,11 @@ const isShowVideos = ref(false)
 function onClickHotspot(idx) {
   if (idx === 1) {
     router.push({
-      name: 'PaintingDetailSimple',
-      query: {
-        idx: 20,
-      }
+      name: 'PaintingDetailForZhuQin',
     })
   } else if (idx === 2) {
     router.push({
-      name: 'PaintingDetailSimple',
-      query: {
-        idx: 21,
-      }
+      name: 'PaintingDetailForTaoZhu',
     })
   }
 }