转手页样式细化

src/views/ExhibitionDetailAnimation.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="root">
-    <h2>金色中国—中国古代金器大展</h2>
+    <h2 :class="$route.query.exhibitionType">
+      {{ title }}
+    </h2>
     <img
       v-for="index of 151"
       v-show="index - 1 === currentFrameIdx || index - 1 === currentFrameIdx - 1"
       :key="index"
+      class="frame"
       :src="`${$publicPath}hand-rotate-frames/s/涂鸦手势${(index - 1).toString().padStart(4, '0')}.jpg`"
       alt=""
       @load="onImgLoad(index - 1)"
@@ -17,6 +20,11 @@
       type="spinner"
       size="3rem"
     />
+    <img
+      class="background-image"
+      src="@/assets/image/bg-text.png"
+      alt="background"
+    >
   </div>
 </template>
 
@@ -35,6 +43,14 @@ export default {
       exhibitionData,
     }
   },
+  computed: {
+    choosenExhibition() {
+      return this.exhibitionData[this.$route.query.exhibitionType][this.$route.query.exhibitionId]
+    },
+    title() {
+      return this.choosenExhibition.text.split('<br>').join('')
+    }
+  },
   mounted() {
     this.intervalId = setInterval(() => {
       if ((this.loadCountDown === 0) && (this.imgStateList[this.currentFrameIdx + 1] !== undefined)) {
@@ -77,25 +93,45 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  h2 {
+  > h2 {
     position: absolute;
     top: 2rem;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1;
+    font-weight: bold;
+    &.theme {
+      color: #18489D;
+    }
+    &.wuyiba {
+      color: #F15835;
+    }
+    &.traditionModern {
+      color: #2FB779;
+    }
   }
-  img {
+  > .frame {
     position: absolute;
     height: 100%;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
   }
-  .loading {
+  > .loading {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
+  > .background-image {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>