古诗列表页目录条目背景

src/views/PoemList.vue

@@ -82,13 +82,22 @@
     <Transition name="fade-in-out">
       <menu v-show="isShowMenu">
         <ul>
-          <li
+          <button
             v-for="(item, index) in menuList"
             :key="index"
             @click="onClickMenuItem(item)"
           >
-            {{ item }}
-          </li>
+            <img
+              class="bg"
+              :src="require(`@/assets/images/poem-menu-item-bg${item === currentPoem['朝代'] ? '-active' : ''}.png`)"
+              alt=""
+              draggable="false"
+              :style="{
+                transform: `rotate(${90 * (index % 5)}deg)`
+              }"
+            >
+            <span>{{ item }}</span>
+          </button>
         </ul>
         <button
           class="close"
@@ -205,7 +214,6 @@ function onClickMenuItem(menuItemName) {
     top: 0;
     width: 100%;
     height: 100%;
-    z-index: -1;
     object-fit: cover;
   }
   >.poem-list{
@@ -356,11 +364,21 @@ function onClickMenuItem(menuItemName) {
       justify-content: center;
       align-items: center;
       gap: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >li{
+      >button{
+        width: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         font-family: KingHwa_OldSong, KingHwa_OldSong;
         font-weight: 400;
         font-size: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         color: #FFFFFF;
+        position: relative;
+        >img.bg{
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+        }
       }
     }
     >button.close{