图画详情组件 改为用prop传入信息

src/views/HomeView.vue

@@ -124,7 +124,7 @@
       <HotspotComp
         v-show="isShowHotspot"
         class="hotspot-2"
-        @click="isShowHotspotDetail2 = true"
+        @click="isShowPaintingDetail = true"
       />
       <HotspotComp
         v-show="isShowHotspot"
@@ -213,10 +213,19 @@
       />
     </Transition>
     <Transition name="fade-in-out">
-      <HotspotDetail2
-        v-if="isShowHotspotDetail2"
+      <PaintingDetail
+        v-if="isShowPaintingDetail"
+        :thumb="require(`@/assets/images/home-painting.jpg`)"
+        :title="'修篁树石图'"
+        :author="'李衎'"
+        :age="'元'"
+        :subtitle="'轴 绢本 墨笔'"
+        :location="'南京博物院藏'"
+        :painting-desc="homepagePaintingDesc.join('\n\n')"
+        :author-desc="homepageAuthorDesc.join('\n\n')"
+        :big-painting="require(`@/assets/images/home-painting-big.jpg`)"
         class="hotspot-detail"
-        @close="isShowHotspotDetail2 = false"
+        @close="isShowPaintingDetail = false"
       />
     </Transition>
     <Transition name="fade-in-out">
@@ -236,7 +245,7 @@ import { useStore } from "vuex"
 import Startup from '@/views/StartupView.vue'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import HotspotDetail1 from '@/views/HotspotDetail1.vue'
-import HotspotDetail2 from '@/views/HotspotDetail2.vue'
+import PaintingDetail from '@/views/PaintingDetail.vue'
 import HotspotDetail3 from '@/views/HotspotDetail3.vue'
 
 const route = useRoute()
@@ -416,7 +425,7 @@ const isShowHotspot = computed(() => {
 })
 
 const isShowHotspotDetail1 = ref(false)
-const isShowHotspotDetail2 = ref(false)
+const isShowPaintingDetail = ref(false)
 const isShowHotspotDetail3 = ref(false)
 </script>
 

src/views/HotspotDetail2.vue

@@ -14,9 +14,10 @@
       >
       <img
         class="painting"
-        src="@/assets/images/home-painting.jpg"
+        :src="props.thumb"
         alt=""
         draggable="false"
+        @click="showBigPainting"
       >
       <Transition name="fade-out">
         <img
@@ -32,46 +33,32 @@
       </Transition>
     </div>
     <div
-      class="fixed-desc"
+      class="desc-text"
       :style="{
-        opacity: isAnimating ? AnimationProgress.value / 100 : fixedDescOpacity,
+        opacity: isAnimating ? AnimationProgress.value / 100 : 1,
       }"
     >
-      <h1>修篁树石图</h1>
+      <h1>{{ props.title }}</h1>
       <p class="subtitle">
-        李衎（元）
+        {{ `${props.author} （${props.age}）` }}
       </p>
       <p class="subtitle">
-        轴 绢本 墨笔
+        {{ props.subtitle }}
       </p>
       <p class="subtitle">
-        南京博物院藏
+        {{ props.location }}
       </p>
 
       <h2>作品简介：</h2>
-      <p
-        v-for="(item, index) in homepagePaintingDesc"
-        :key="index"
-        class="normal-text"
-      >
-        {{ item }}
-      </p>
+      <div class="normal-text">
+        {{ paintingDesc }}
+      </div>
       <h2>作者简介：</h2>
-      <p
-        v-for="(item, index) in homepageAuthorDesc"
-        :key="index"
-        class="normal-text"
-      >
-        {{ item }}
-      </p>
+      <div class="normal-text">
+        {{ authorDesc }}
+      </div>
     </div>
 
-    <!-- <OperationTip
-      v-if="store.state.isStartupInvisible"
-      class="operation-tip"
-      :is-show="isShowOperationTip"
-    /> -->
-
     <BtnBack
       @click="emit('close')"
     />
@@ -100,8 +87,40 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const homepagePaintingDesc = configText.homepagePaintingDesc
-const homepageAuthorDesc = configText.homepageAuthorDesc
+const props = defineProps({
+  thumb: {
+    type: String,
+    required: true,
+  },
+  bigPainting: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  author: {
+    type: String,
+    required: true,
+  },
+  age: {
+    type: String,
+    required: true,
+  },
+  location: {
+    type: String,
+    required: true,
+  },
+  paintingDesc: {
+    type: String,
+    required: true,
+  },
+  authorDesc: {
+    type: String,
+    required: true,
+  }
+})
 
 const isAnimating = ref(true)
 
@@ -119,9 +138,9 @@ const animate = () => {
   animationRequestId = requestAnimationFrame(animate)
   TWEEN.update()
 }
-tween.onUpdate(function (object) {
-  console.log(object.value)
-})
+// tween.onUpdate(function (object) {
+//   console.log(object.value)
+// })
 onMounted(() => {
   tween.start()
   animate()
@@ -137,16 +156,10 @@ onUnmounted(() => {
 
 function showBigPainting() {
   viewerApi({
-    images: [bigPainting],
+    images: [props.bigPainting],
   })
 }
 
-// const isShowOperationTip = ref(true)
-// watch(descElScrollTop, (v) => {
-//   if (v > 0) {
-//     isShowOperationTip.value = false
-//   }
-// })
 </script>
 
 <style lang="less" scoped>
@@ -185,7 +198,7 @@ function showBigPainting() {
       width: 100%;
     }
   }
-  >.fixed-desc{
+  >.desc-text{
     position: absolute;
     left: 50%;
     bottom: 2%;
@@ -217,17 +230,17 @@ function showBigPainting() {
       color: #FFFFFF;
       margin-top: 1em;
       margin-bottom: 0.5em;
-      font-weight: 600;
+      font-weight: 400;
       font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
-    >p.normal-text{
+    >.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: justified;
-      margin-bottom: 0.5em;
+      white-space: pre-line;
     }
   }
   >.operation-tip{

src/views/PaintingDetailList.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="painting-detail-list" />
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+</script>
+
+<style lang="less" scoped>
+.painting-detail-list{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>