人文页 序列帧

README.md

@@ -8,4 +8,6 @@
 
 内容扩展页开发
 
-启动页
+启动页
+
+保存组件：序列帧

src/views/PaintingList.vue

@@ -2,7 +2,7 @@
   <div
     class="painting-list"
   >
-    <!-- 背景图 -->
+    <!-- 背景序列帧 -->
     <SerialFrames
       class="bg-serial-frames-top"
       :image-src="require(`@/assets/images/serial-frame-painting-list-top.png`)"

src/views/PoemList.vue

@@ -1,5 +1,45 @@
 <template>
   <div class="poem-list-page">
+    <!-- 背景序列帧 -->
+    <Transition name="fade-in-out">
+      <SerialFrames
+        v-if="getTypesettingIdx(currentPoem['类型']) === 1"
+        class="bg-serial-frames-1"
+        :image-src="require(`@/assets/images/serial-frame-poem-list-1.png`)"
+        :total-width="13001"
+        :height="852"
+        :frame-number="33"
+        :frame-duration="50"
+      />
+      <SerialFrames
+        v-else-if="getTypesettingIdx(currentPoem['类型']) === 2"
+        class="bg-serial-frames-2"
+        :image-src="require(`@/assets/images/serial-frame-poem-list-2.png`)"
+        :total-width="13001"
+        :height="852"
+        :frame-number="33"
+        :frame-duration="50"
+      />
+      <SerialFrames
+        v-else-if="getTypesettingIdx(currentPoem['类型']) === 3"
+        class="bg-serial-frames-3"
+        :image-src="require(`@/assets/images/serial-frame-poem-list-3.png`)"
+        :total-width="13001"
+        :height="852"
+        :frame-number="33"
+        :frame-duration="50"
+      />
+      <SerialFrames
+        v-else-if="getTypesettingIdx(currentPoem['类型']) === 4"
+        class="bg-serial-frames-4"
+        :image-src="require(`@/assets/images/serial-frame-poem-list-1.png`)"
+        :total-width="13001"
+        :height="852"
+        :frame-number="33"
+        :frame-duration="50"
+      />
+    </Transition>
+
     <Transition name="fade-in-out">
       <img
         v-if="getTypesettingIdx(currentPoem['类型']) === 1"
@@ -221,6 +261,32 @@ function onClickMenuItem(menuItemName) {
   height: 100%;
   background-color: #dde6db;
   ::-webkit-scrollbar { width: 0; height: 0; }
+
+  >.bg-serial-frames-1, .bg-serial-frames-4{
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(0, 0) scale(0.8);
+    transform-origin: top left;
+    z-index: 1;
+  }
+  >.bg-serial-frames-2{
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    transform: translate(0, 0) scale(0.8);
+    transform-origin: bottom right;
+    z-index: 1;
+  }
+  >.bg-serial-frames-3{
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(0, 0) scale(0.8);
+    transform-origin: top right;
+    z-index: 1;
+  }
+
   >.bg{
     position: absolute;
     left: 0;