1

src/views/PoemList.vue

@@ -1,5 +1,35 @@
 <template>
-  <div class="poem-list">
+  <div class="poem-list-page">
+    <Transition name="fade-in-out">
+      <img
+        v-if="getTypesettingIdx(currentPoem['类型']) === 1"
+        class="bg"
+        src="@/assets/images/poem-list-bg-1.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        v-else-if="getTypesettingIdx(currentPoem['类型']) === 2"
+        class="bg"
+        src="@/assets/images/poem-list-bg-2.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        v-else-if="getTypesettingIdx(currentPoem['类型']) === 3"
+        class="bg"
+        src="@/assets/images/poem-list-bg-3.jpg"
+        alt=""
+        draggable="false"
+      >
+      <img
+        v-else
+        class="bg"
+        src="@/assets/images/poem-list-bg-4.jpg"
+        alt=""
+        draggable="false"
+      >
+    </Transition>
     <Swiper
       class="poem-list"
       :slides-per-view="1"
@@ -162,14 +192,22 @@ function onClickMenuItem(menuItemName) {
 </script>
 
 <style lang="less" scoped>
-.poem-list{
+.poem-list-page{
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: #dbe2dc;
   ::-webkit-scrollbar { width: 0; height: 0; }
+  >.bg{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    object-fit: cover;
+  }
   >.poem-list{
     position: absolute;
     left: 0;