推一波

src/views/HotspotDetail1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="hotspot-detail-1">
+  <div :class="`hotspot-detail-1 ${pageLev === 1 ? '' : 'hotspot-detail-2'}`">
     <!-- 左上角 -->
     <img
       class="HD1_1"
@@ -27,6 +27,23 @@
       `"
       @click="ImgClick(item)"
     >
+      <div
+        v-show="pageLev === item.id"
+        v-touch:swipe.left="() => onSwipeChange(1, index)"
+        v-touch:swipe.right="() => onSwipeChange(-1, index)"
+        :swipe-options="{ direction: 'horizontal' }"
+        class="HD1_3AcMove"
+      >
+        <OperationTip
+          v-if="isShowOperationTip"
+          class="operation-tip"
+          :direction="'h'"
+          :text="'左右滑动'"
+          :is-show="isShowOperationTip"
+          color="green"
+        />
+      </div>
+
       <img
         :src="
           require(`@/assets/images/HD1/img${
@@ -38,7 +55,10 @@
     </div>
 
     <!-- 顶部文字 -->
-    <div :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`">
+    <div
+      :class="`HD1_4 ${pageShow ? 'HD1_4Ac' : ''}`"
+      :style="`opacity:${swChange && pageShow ? '1' : '0'}`"
+    >
       <H3>{{ txtShow.title }}</H3>
       <p>{{ txtShow.desc }}</p>
     </div>
@@ -51,18 +71,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, inject } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-import useSizeAdapt from "@/useFunctions/useSizeAdapt"
-
-const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
-
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-const $env = inject("$env")
+import { ref, onMounted } from "vue"
 
 const emit = defineEmits(["close"])
 
@@ -70,19 +79,19 @@ const craftInfo = configText.craft
 
 const imgList = [
   {
-    id: 1.1,
+    id: 11,
     imgName: "juan",
     title: craftInfo[3].title,
     desc: craftInfo[3].desc,
   },
   {
-    id: 1.2,
+    id: 12,
     imgName: "ling",
     title: craftInfo[5].title,
     desc: craftInfo[5].desc,
   },
   {
-    id: 1.3,
+    id: 13,
     imgName: "paper",
     title: craftInfo[4].title,
     desc: craftInfo[4].desc,
@@ -114,9 +123,21 @@ const txtShow = ref({
   title: "",
   desc: "",
 })
+const isShowOperationTip = ref(false)
 
 // 点击图片
 const ImgClick = (item) => {
+
+  if (!isShowOperationTip.value) {
+    isShowOperationTip.value = true
+
+    setTimeout(()=>{
+      isShowOperationTip.value = false
+    }, 2000)
+  }
+
+
+
   pageShow.value = true
   isLookImg.value = false
   pageLev.value = item.id
@@ -125,6 +146,30 @@ const ImgClick = (item) => {
     desc: item.desc,
   }
 }
+
+const swChange = ref(true)
+
+// 左滑右滑
+const onSwipeChange = (num, index) => {
+  if (swChange.value) {
+    swChange.value = false
+    setTimeout(() => {
+      swChange.value = true
+    }, 600)
+  }
+
+  let newItem = imgList[index + num]
+  if (index === 0 && num === -1) newItem = imgList[imgList.length - 1]
+  if (index === imgList.length - 1 && num === 1) newItem = imgList[0]
+  pageLev.value = newItem.id
+
+  setTimeout(() => {
+    txtShow.value = {
+      title: newItem.title,
+      desc: newItem.desc,
+    }
+  }, 500)
+}
 </script>
 
 <style lang="less" scoped>
@@ -146,7 +191,7 @@ const ImgClick = (item) => {
     z-index: 10;
     top: 60px;
     left: 30px;
-    width: 100px;
+    width: 80px;
   }
 
   .HD1_2 {
@@ -162,13 +207,13 @@ const ImgClick = (item) => {
     transition: opacity 1s;
     opacity: 1;
     & > img {
-      width: 30px;
+      width: 40px;
     }
     & > div {
       margin-top: 10px;
       position: relative;
       line-height: 20px;
-      left: 4px;
+      left: 9px;
       font-weight: 400;
       font-family: KaiTi, KaiTi;
       color: #fff;
@@ -204,10 +249,22 @@ const ImgClick = (item) => {
     z-index: 3;
   }
   .HD1_3Ac {
-    top: 38%;
+    top: 40%;
     right: 0;
+    .HD1_3AcMove {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 30%;
+    }
   }
   .HD1_3Hide {
+    right: -100%;
     opacity: 0;
     pointer-events: none;
   }
@@ -226,6 +283,7 @@ const ImgClick = (item) => {
     opacity: 0;
     pointer-events: none;
     transition: top 1s, opacity 0.5s;
+
     h3 {
       font-weight: 700;
       text-align: center;
@@ -243,9 +301,13 @@ const ImgClick = (item) => {
       line-height: 120%;
     }
   }
+
   .HD1_4Ac {
     opacity: 1;
     top: 4%;
   }
 }
+.hotspot-detail-2 {
+  background-image: url("../assets/images/HD1/bg_paper.jpg");
+}
 </style>

src/views/PoemList copy.vue

@@ -0,0 +1,494 @@
+<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="55"
+      />
+      <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="55"
+      />
+      <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="55"
+      />
+      <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="55"
+      />
+    </Transition>
+
+    <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"
+      direction="vertical"
+      @swiper="onSwiper"
+      @slideChange="onSlideChange"
+    >
+      <SwiperSlide
+        v-for="(item, index) in poemList"
+        :key="index"
+        class="poem-item"
+        :class="[`typesetting-${getTypesettingIdx(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>
+
+    <BtnBack
+      v-show="!isShowMenu"
+      class="button-back"
+      @click="router.push({
+        name: 'MoreContent',
+        query: {
+          anchorIdx: 1,
+        }
+      })"
+    />
+    <Transition
+      v-show="isShowOperationTipShadow"
+      name="fade-out"
+    >
+      <div class="operation-tip-shadow" />
+    </Transition>
+    <OperationTip
+      class="operation-tip"
+      text="下一首"
+      :is-show="isShowOperationTip"
+    />
+    <!-- 选择时间 -->
+    <button
+      v-show="!isShowMenu"
+      class="menu-btn"
+      @click="isShowMenu = true"
+    >
+      <img
+        class=""
+        src="@/assets/images/icon_menu.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+
+    <Transition name="fade-in-out">
+      <menu v-show="isShowMenu">
+        <ul>
+          <button
+            v-for="(item, index) in menuList"
+            :key="index"
+            :class="{
+              active: item === currentPoem['朝代']
+            }"
+            @click="onClickMenuItem(item)"
+          >
+            <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"
+          @click="isShowMenu = false"
+        >
+          <img
+            class=""
+            src="@/assets/images/icon_close.png"
+            alt=""
+            draggable="false"
+          >
+        </button>
+      </menu>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const poemList = configExcel['诗词']
+
+/**
+ * 当前古诗
+ */
+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
+}
+const onSlideChange = (e) => {
+  currentIdx.value = e.activeIndex
+}
+
+/**
+ * 操作提示
+ */
+const isShowOperationTip = ref(true)
+const unwatch = watch(currentIdx, (v) => {
+  isShowOperationTip.value = false
+  isShowOperationTipShadow.value = false
+  unwatch()
+})
+const isShowOperationTipShadow = ref(true)
+setTimeout(() => {
+  isShowOperationTipShadow.value = false
+}, 2000)
+
+/**
+ * 目录
+ */
+const isShowMenu = ref(false)
+const temp = configExcel['诗词'].map((item) => {
+  return item['朝代']
+})
+const menuList = Array.from(new Set(temp))
+function onClickMenuItem(menuItemName) {
+  const targetIdx = poemList.findIndex((item) => {
+    return item['朝代'] === menuItemName
+  })
+  swiper.slideTo(targetIdx)
+  isShowMenu.value = false
+}
+</script>
+
+<style lang="less" scoped>
+.poem-list-page{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  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;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  >.poem-list{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    .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{
+    z-index: 10;
+  }
+  >.operation-tip-shadow{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 20%;
+    background: linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);
+    z-index: 9;
+  }
+  >.operation-tip{
+    position: absolute;
+    left: 50%;
+    bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateX(-50%);
+    z-index: 10;
+  }
+  >.menu-btn{
+    position: absolute;
+    right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    z-index: 10;
+    width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >img{
+      width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+  >menu{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: hsl(96deg 22% 38% / 52%);
+    border-radius: 0px 0px 0px 0px;
+    backdrop-filter: blur(calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+    z-index: 15;
+    >ul{
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >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.active{
+        color: #F4E09D;
+      }
+    }
+    >button.close{
+      position: absolute;
+      right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      z-index: 10;
+      width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >img{
+        width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
+</style>

src/views/PoemList.vue

@@ -1,171 +1,105 @@
 <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="55"
-      />
-      <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="55"
-      />
-      <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="55"
-      />
-      <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="55"
-      />
-    </Transition>
+    <div
+      class="RWbox"
+      :style="`width: ${domWidth}px; left:-${indexAc * pageWidth}px`"
+    >
+      <!-- 第一种状态 -->
 
-    <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"
+      <!-- <div
+        class="ROW1"
+        :style="`width:${pageWidth}px`"
       >
-      <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"
+        <img
+          :style="`transform: translateX(${indexAc===0?0:(-80*3)}px);`"
+          class="ROW1_1"
+          :src="require(`@/assets/images/RW/3_01.png`)"
+          alt=""
+        >
+        <img
+          :style="`transform: translateX(${indexAc===0?0:(-100*3)}px);`"
+          class="ROW1_2"
+          :src="require(`@/assets/images/RW/1_01.png`)"
+          alt=""
+        >
+        <img
+          :style="`transform: translateX(${indexAc===0?0:(-60*3)}px);`"
+          class="ROW1_3"
+          :src="require(`@/assets/images/RW/3_02.png`)"
+          alt=""
+        >
+      </div> -->
+
+      <!-- 第二种状态 -->
+      <div
+        class="ROW2"
+        :style="`width:${pageWidth}px`"
       >
-    </Transition>
-    <Swiper
-      class="poem-list"
-      :slides-per-view="1"
-      direction="vertical"
-      @swiper="onSwiper"
-      @slideChange="onSlideChange"
-    >
-      <SwiperSlide
+        <img
+          :style="`transform: translateX(${indexAc===0?0:(-80*3)}px);`"
+          class="ROW1_1"
+          :src="require(`@/assets/images/RW/3_01.png`)"
+          alt=""
+        >
+        <img
+          :style="`transform: translateX(${indexAc===0?0:(-100*3)}px);`"
+          class="ROW1_2"
+          :src="require(`@/assets/images/RW/1_01.png`)"
+          alt=""
+        >
+        <img
+          :style="`transform: translateX(${indexAc===0?0:(-60*3)}px);`"
+          class="ROW1_3"
+          :src="require(`@/assets/images/RW/3_02.png`)"
+          alt=""
+        >
+      </div>
+
+      <!-- <div
         v-for="(item, index) in poemList"
         :key="index"
-        class="poem-item"
-        :class="[`typesetting-${getTypesettingIdx(item['类型'])}`]"
+        :style="`width:${pageWidth}px`"
+        class="ROW ROW1"
       >
-        <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>
+      </div> -->
+    </div>
 
-    <BtnBack
-      v-show="!isShowMenu"
-      class="button-back"
-      @click="router.push({
-        name: 'MoreContent',
-        query: {
-          anchorIdx: 1,
-        }
-      })"
-    />
-    <Transition
-      v-show="isShowOperationTipShadow"
-      name="fade-out"
-    >
-      <div class="operation-tip-shadow" />
-    </Transition>
+    <!-- 操作提示 -->
     <OperationTip
       class="operation-tip"
-      text="下一首"
+      :direction="'h'"
+      :text="'下一章'"
       :is-show="isShowOperationTip"
+      color="green"
     />
-    <button
+
+    <!-- 返场视频 -->
+    <div :class="`backVideo ${backVideoFlag ? 'backVideoShow' : ''}`">
+      <video
+        ref="backVideoRef"
+        muted
+        src="@/assets/images/RW/play.mp4"
+      />
+    </div>
+
+    <!-- 返回按钮 -->
+    <BtnBack
       v-show="!isShowMenu"
-      class="menu-btn"
-      @click="isShowMenu = true"
-    >
-      <img
-        class=""
-        src="@/assets/images/icon_menu.png"
-        alt=""
-        draggable="false"
-      >
-    </button>
+      color="green"
+      class="button-back"
+      @click="btnBackFu"
+    />
 
-    <Transition name="fade-in-out">
-      <menu v-show="isShowMenu">
-        <ul>
-          <button
-            v-for="(item, index) in menuList"
-            :key="index"
-            :class="{
-              active: item === currentPoem['朝代']
-            }"
-            @click="onClickMenuItem(item)"
-          >
-            <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"
-          @click="isShowMenu = false"
-        >
-          <img
-            class=""
-            src="@/assets/images/icon_close.png"
-            alt=""
-            draggable="false"
-          >
-        </button>
-      </menu>
-    </Transition>
+    <!-- 临时操作按钮 -->
+    <div class="aaaa">
+      <div @click="aaaaFu(1)">
+        ++++
+      </div>
+      <br>
+      <div @click="aaaaFu(-1)">
+        ----
+      </div>
+    </div>
   </div>
 </template>
 
@@ -179,14 +113,45 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
-const $env = inject('$env')
+const $env = inject("$env")
+
+// 返场视频ref
+const backVideoRef = ref("")
+const backVideoFlag = ref(false)
+
+// 点击返回
+const btnBackFu = () => {
+  backVideoRef.value.play()
+  setTimeout(() => {
+    backVideoFlag.value = true
+  }, 100)
+
+  setTimeout(() => {
+    router.push({
+      name: "MoreContent",
+      query: {
+        anchorIdx: 1,
+      },
+    })
+  }, 2200)
+}
+
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
+
+const poemList = configExcel["诗词"]
 
-const {
-  windowSizeInCssForRef,
-  windowSizeWhenDesignForRef,
-} = useSizeAdapt()
+// 元素总宽度
+const domWidth = ref(0)
+const pageWidth = ref(0)
 
-const poemList = configExcel['诗词']
+// 当前选中索引
+const indexAc = ref(0)
+
+onMounted(() => {
+  pageWidth.value = window.innerWidth
+  // 总盒子的宽度
+  domWidth.value = window.innerWidth * poemList.length
+})
 
 /**
  * 当前古诗
@@ -201,13 +166,13 @@ const currentPoem = computed(() => {
  */
 function getTypesettingIdx(poemType) {
   switch (poemType) {
-  case '七绝':
+  case "七绝":
     return 1
-  case '七律':
+  case "七律":
     return 2
-  case '五绝':
+  case "五绝":
     return 3
-  case '五律':
+  case "五律":
     return 4
   default:
     return 2
@@ -243,251 +208,103 @@ setTimeout(() => {
  * 目录
  */
 const isShowMenu = ref(false)
-const temp = configExcel['诗词'].map((item) => {
-  return item['朝代']
+const temp = configExcel["诗词"].map((item) => {
+  return item["朝代"]
 })
 const menuList = Array.from(new Set(temp))
 function onClickMenuItem(menuItemName) {
   const targetIdx = poemList.findIndex((item) => {
-    return item['朝代'] === menuItemName
+    return item["朝代"] === menuItemName
   })
   swiper.slideTo(targetIdx)
   isShowMenu.value = false
 }
+
+const aaaaFu = (val) => {
+  indexAc.value += val
+  // const dom = document.querySelector(".poem-list-page")
+  // dom.scrollLeft = dom.scrollLeft + window.innerWidth
+}
 </script>
 
 <style lang="less" scoped>
-.poem-list-page{
-  position: absolute;
-  left: 0;
-  top: 0;
+.poem-list-page {
+  position: relative;
   width: 100%;
   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;
+  background-color: #f3f4ef;
+  .aaaa {
+    position: fixed;
+    z-index: 50;
+    bottom: 100px;
+    left: 100px;
   }
 
-  >.bg{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  >.poem-list{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
+  .RWbox {
+    width: 8000px;
     height: 100%;
-    overflow: auto;
-    .poem-item{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      writing-mode: vertical-rl;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    background-image: url("../assets/images/RW/bg_caizhi.jpg");
+    background-size: cover;
+    transition: all 1.2s;
+
+
+    .ROW1 {
       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;
-        }
+      &>img{
+        position: absolute;
+        bottom: 0;
+        height: 100%;
+        transition: all .8s;
       }
-    }
-    .poem-item.typesetting-1{
-      >.inner-wrap{
-        transform: translate(10%, -20%);
-        >p{
-          margin-top: calc(232 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
+      .ROW1_1 {
+        left: 0;
       }
-    }
-    .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'));
-        }
+      .ROW1_2 {
+        z-index: 2;
+        right: 0;
       }
-    }
-    .poem-item.typesetting-4{
-      >.inner-wrap{
-        transform: translate(10%, -10%);
-        >p{
-          margin-top: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        }
+      .ROW1_3 {
+        right: 5%;
       }
     }
   }
-  >.button-back{
-    z-index: 10;
-  }
-  >.operation-tip-shadow{
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 20%;
-    background: linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);
-    z-index: 9;
-  }
-  >.operation-tip{
+
+  // 操作提示
+  .operation-tip {
     position: absolute;
     left: 50%;
-    bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(
+      17 / v-bind("windowSizeWhenDesignForRef") *
+        v-bind("windowSizeInCssForRef")
+    );
     transform: translateX(-50%);
     z-index: 10;
   }
-  >.menu-btn{
-    position: absolute;
-    right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    z-index: 10;
-    width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    >img{
-      width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    }
-  }
-  >menu{
+  // 返场视频
+  .backVideo {
     position: absolute;
-    left: 0;
     top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    background: hsl(96deg 22% 38% / 52%);
-    border-radius: 0px 0px 0px 0px;
-    backdrop-filter: blur(calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
-    z-index: 15;
-    >ul{
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      gap: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >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.active{
-        color: #F4E09D;
-      }
-    }
-    >button.close{
-      position: absolute;
-      right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      z-index: 10;
-      width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >img{
-        width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      }
+    z-index: 30;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 2s;
+    & > video {
+      width: 100%;
     }
   }
+  .backVideoShow {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  // 返回按钮
+  .btn-back {
+    z-index: 10;
+  }
 }
-</style>
+</style>