诗歌列表页 在现有资源限度下实现样式

src/views/MoreContent.vue

@@ -5,10 +5,12 @@
     </button>
     <button>画作</button>
 
-    <PoemList
-      v-if="isShowPoemList"
-      @close="isShowPoemList = false"
-    />
+    <Transition name="fade-in-out">
+      <PoemList
+        v-if="isShowPoemList"
+        @close="isShowPoemList = false"
+      />
+    </Transition>
   </div>
 </template>
 

src/views/PoemList.vue

@@ -11,8 +11,18 @@
         v-for="(item, index) in poemList"
         :key="index"
         class="poem-item"
+        :class="[`typesetting-${getTypesettingIdx(item['类型'])}`]"
       >
-        {{ item }}
+        <div class="inner-wrap">
+          <div class="title-wrap">
+            <h1>《{{ item['标题'] }}》</h1>
+            <div class="sub-title">
+              <span class="author">{{ item['作者'] }}</span>
+              <span class="age">{{ item['朝代'] }}</span>
+            </div>
+          </div>
+          <p>{{ item['正文'] }}</p>
+        </div>
       </SwiperSlide>
     </Swiper>
 
@@ -22,7 +32,6 @@
       @click="emit('close')"
     />
     <OperationTip
-      v-show="!isShowMenu"
       class="operation-tip"
       text="下一首"
       :is-show="isShowOperationTip"
@@ -88,8 +97,36 @@ const emit = defineEmits(['close'])
 
 const poemList = configExcel['诗词']
 
-let swiper = null
+/**
+ * 当前古诗
+ */
 const currentIdx = ref(0)
+const currentPoem = computed(() => {
+  return poemList[currentIdx.value]
+})
+
+/**
+ * 排版
+ */
+function getTypesettingIdx(poemType) {
+  switch (poemType) {
+  case '七绝':
+    return 1
+  case '七律':
+    return 2
+  case '五绝':
+    return 3
+  case '五律':
+    return 4
+  default:
+    return 2
+  }
+}
+
+/**
+ * swiper
+ */
+let swiper = null
 const onSwiper = (swiperP) => {
   swiper = swiperP
 }
@@ -97,6 +134,9 @@ const onSlideChange = (e) => {
   currentIdx.value = e.activeIndex
 }
 
+/**
+ * 操作提示
+ */
 const isShowOperationTip = ref(true)
 watch(currentIdx, (v) => {
   if (isShowOperationTip.value) {
@@ -104,6 +144,9 @@ watch(currentIdx, (v) => {
   }
 })
 
+/**
+ * 目录
+ */
 const isShowMenu = ref(false)
 const temp = configExcel['诗词'].map((item) => {
   return item['朝代']
@@ -125,7 +168,7 @@ function onClickMenuItem(menuItemName) {
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: #555;
+  background-color: #dbe2dc;
   ::-webkit-scrollbar { width: 0; height: 0; }
   >.poem-list{
     position: absolute;
@@ -134,10 +177,103 @@ function onClickMenuItem(menuItemName) {
     width: 100%;
     height: 100%;
     overflow: auto;
-    >.poem-item{
-      display: block;
+    .poem-item{
+      display: flex;
+      justify-content: center;
+      align-items: center;
       width: 100%;
       height: 100%;
+      writing-mode: vertical-rl;
+      position: relative;
+      .inner-wrap{
+        >.title-wrap{
+          position: relative;
+          width: fit-content;
+          height: fit-content;
+          >h1{
+            font-family: KingHwa_OldSong, KingHwa_OldSong;
+            font-weight: 400;
+            font-size: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            color: #476446;
+            line-height: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            white-space: pre;
+            letter-spacing: 0.1em;
+          }
+          >.sub-title{
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translate(-140%, -50%);
+            display: flex;
+            align-items: center;
+            >.author{
+              white-space: pre;
+              font-family: KaiTi, KaiTi;
+              font-weight: 400;
+              font-size: 20px;
+              color: #476446;
+              letter-spacing: 0.3em;
+              margin-inline-end: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            }
+            >.age{
+              display: inline-block;
+              width: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              background-color: #b6a261;
+              border-radius: 50%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-family: KaiTi, KaiTi;
+              font-weight: 400;
+              font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+              color: #FFFFFF;
+            }
+          }
+        }
+        >p{
+          margin-right: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: KaiTi, KaiTi;
+          font-weight: 400;
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          color: #476446;
+          line-height: 1.8em;
+          white-space: pre;
+          letter-spacing: 0.2em;
+        }
+      }
+    }
+    .poem-item.typesetting-1{
+      >.inner-wrap{
+        transform: translate(10%, -20%);
+        >p{
+          margin-top: calc(232 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+    }
+    .poem-item.typesetting-2{
+      >.inner-wrap{
+        transform: translate(10%, -4%);
+        >p{
+          margin-top: calc(102 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+    }
+    .poem-item.typesetting-3{
+      >.inner-wrap{
+        transform: translate(0, -9%);
+        >p{
+          margin-top: calc(135 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+    }
+    .poem-item.typesetting-4{
+      >.inner-wrap{
+        transform: translate(10%, -10%);
+        >p{
+          margin-top: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
     }
   }
   >.button-back{