文物展示时添加文案

src/views/HomeView.vue

@@ -108,6 +108,19 @@
         @load="onTreasureFrameLoad(index - 1)"
         @error="onTreasureFrameError(index - 1)"
       >
+      <div
+        class="text1"
+        :style="{opacity: text1Opacity}"
+      >
+        <span class="title">宋清瓷团花粉盒</span><br>
+        <span>约公元前1220年<br>口径13.5cm  底径8cm  高6cm</span>
+      </div>
+      <div
+        class="text2"
+        :style="{opacity: text2Opacity}"
+      >
+        此展品为宋代文物。子母口，浅腹，平底，盖面平；盒为子口，内有三个小碟；胎灰白，坚硬，施青色釉，口沿与底部无釉。现收藏于松阳县博物馆。
+      </div>
     </div>
   </div>
 </template>
@@ -120,7 +133,7 @@ const peopleFarSpeedRate = 0.4
 const peopleNearSpeedRate = 0.6
 const introduceSpeedRate = 0.6
 const treasureFadeInProgressRightBorder = 3000
-const treasureDisplayProgressRightBorder = 3000
+const treasureDisplayProgressRightBorder = 6000
 const treasureFadeOutProgressRightBorder = 2000
 const translateLengthRightBorder = 900
 const treasureFrameTotalNum = 125
@@ -209,7 +222,37 @@ export default {
       } else {
         return 1
       }
-    }
+    },
+    text1Opacity() {
+      if (this.tourState === 1) {
+        if (this.treasureDisplayProgress < treasureDisplayProgressRightBorder * 0.1) {
+          return this.treasureDisplayProgress / (treasureDisplayProgressRightBorder * 0.1)
+        } else if (this.treasureDisplayProgress >= treasureDisplayProgressRightBorder * 0.1 && this.treasureDisplayProgress < treasureDisplayProgressRightBorder * 0.4) {
+          return 1
+        } else if (this.treasureDisplayProgress >= treasureDisplayProgressRightBorder * 0.4 && this.treasureDisplayProgress < treasureDisplayProgressRightBorder * 0.5) {
+          return 1 - (this.treasureDisplayProgress - treasureDisplayProgressRightBorder * 0.4) / (treasureDisplayProgressRightBorder * (0.5 - 0.4))
+        } else {
+          return 0
+        }
+      } else {
+        return 0
+      }
+    },
+    text2Opacity() {
+      if (this.tourState === 1) {
+        if (this.treasureDisplayProgress < treasureDisplayProgressRightBorder * 0.5) {
+          return 0
+        } else if (this.treasureDisplayProgress >= treasureDisplayProgressRightBorder * 0.5 && this.treasureDisplayProgress < treasureDisplayProgressRightBorder * 0.6) {
+          return (this.treasureDisplayProgress - treasureDisplayProgressRightBorder * 0.5) / (treasureDisplayProgressRightBorder * (0.6 - 0.5))
+        } else if (this.treasureDisplayProgress >= treasureDisplayProgressRightBorder * 0.6 && this.treasureDisplayProgress < treasureDisplayProgressRightBorder * 0.9) {
+          return 1
+        } else {
+          return 1 - (this.treasureDisplayProgress - treasureDisplayProgressRightBorder * 0.9) / (treasureDisplayProgressRightBorder * (1 - 0.9))
+        }
+      } else {
+        return 0
+      }
+    },
   },
   watch: {
     tourState(vNew, vOld) {
@@ -519,11 +562,36 @@ export default {
     width: 100%;
     height: 100%;
     z-index: 3;
-    img {
+    > img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
+    > .text1 {
+      color: #fff;
+      position: absolute;
+      top: 5%;
+      left: 3%;
+      .title {
+        font-size: 24px;
+        font-weight: bold;
+        line-height: 2;
+
+      }
+      span {
+        font-size: 18px;
+        line-height: 1.5;
+      }
+    }
+    > .text2 {
+      color: #fff;
+      position: absolute;
+      bottom: 5%;
+      right: 3%;
+      width: 30%;
+      font-size: 18px;
+      line-height: 1.5;
+    }
   }
   @media screen and (max-height: 810px) {
     .people-far-wrap {