NanjingMuseumWuJinZang/src/views/PoemList.vue

<template>
  <!-- pc端才使用 v-touch-->
  <!--
    v-touch:swipe.left="() => onSwipeChange(1)"
    v-touch:swipe.right="() => onSwipeChange(-1)"
    :swipe-options="{ direction: 'horizontal' }"

-->
  <div
    class="poem-list-page"
    @touchstart="(e) => touchstart(e.touches[0].pageX)"
    @touchmove="(e) => touchmove(e.touches[0].pageX)"
    @touchend="(e) => touchend((val) => onSwipeChange(val))"
  >
    <div
      class="RWbox"
      :style="`width: ${domWidth}px; left:-${
        baseRWboxLeft ? 500 : indexAc * pageWidth}px;
        `"
    >
      <div
        v-for="(item1, index1) in listRes"
        :key="index1"
        :class="`ROW ROW${item1.waiClass + 1} ROWW${index1 + 1}`"
        :style="`width:${pageWidth}px; opacity:${
          index1 === indexAc ? '1' : isOpcMove ? '0' : ''
        }`"
      >
        <img
          v-for="(item2, index2) in item1.imgArr"
          :key="index2"
          :style="`transform: translateX(${isMoveFu(
            index1,
            item2.moveNum
          )}px);`"
          :class="item2.classTxt"
          :src="require(`@/assets/images/RW/${item2.imgName}.png`)"
          alt=""
        >

        <!-- 诗句内容 -->
        <div
          class="ROWtxt"
          :class="[`typesetting-${getTypesettingIdx(item1['类型'])}`]"
        >
          <div class="inner-wrap">
            <div class="title-wrap">
              <h1>《{{ item1["标题"] }}》</h1>
              <div class="sub-title">
                <span class="author">{{ item1["作者"] }}</span>
                <span class="age">{{ item1["朝代"] }}</span>
              </div>
            </div>
            <p>{{ item1["正文"] }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 最底部的文字提示 -->
    <div :class="`RWind ${txtTit ? 'RWindShow' : ''}`">
      暂无更多内容
    </div>

    <!-- 操作提示 -->
    <OperationTip
      class="operation-tip"
      :direction="'h'"
      :text="'下一章'"
      color="green"
      :is-show="isShowOperationTip"
    />

    <!-- 返场视频 -->
    <div :class="`backVideo ${backVideoFlag ? 'backVideoShow' : ''}`">
      <video
        ref="backVideoRef"
        src="@/assets/images/RW/play.mp4"
        playsinline
        muted
        webkit-playsinline="true"
        x5-video-player-type="h5"
      />
    </div>

    <!-- 返回按钮 -->
    <div class="RWback">
      <BtnBack
        class="button-back"
        @click="btnBackFu"
      />
    </div>

    <!-- 选择 时代 -->
    <div
      :class="`RWsBtn ${ageFlga ? 'RWsBtnHide' : ''}`"
      @click="ageFlga = true"
    >
      <img
        class=""
        :src="require(`@/assets/images/icon_menu.png`)"
        alt=""
      >
    </div>

    <!-- 选择时代出来的元素 -->
    <div :class="`RWage ${ageFlga ? 'RWageShow' : ''}`">
      <div
        v-for="item in ageList"
        :key="item"
        :class="`RWageRow ${ageAc === item ? 'RWageRowAc' : ''}`"
        @click="cutAgeFu(item)"
      >
        {{ item }}
      </div>
      <div
        class="RWageImg"
        @click="ageFlga = false"
      >
        <img
          class=""
          :src="require(`@/assets/images/icon_close.png`)"
          alt=""
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
import { arrList } from "./PoemList.js"


import useMoveFu from "../moveFu"

const { touchstart, touchmove, touchend } = useMoveFu()

/**
 * 排版
 */
function getTypesettingIdx(poemType) {
  switch (poemType) {
  case "七绝":
    return 1
  case "七律":
    return 2
  case "五绝":
    return 3
  case "五律":
    return 4
  default:
    return 2
  }
}

// 提示语的显示隐藏
const titShow = ref(true)

const router = useRouter()
// 返场视频ref
const backVideoRef = ref("")
const backVideoFlag = ref(false)

// 点击返回
const btnBackFu = () => {
  backVideoRef.value.play()
  setTimeout(() => {
    backVideoFlag.value = true
  }, 100)

  setTimeout(() => {
    router.replace({
      name: "MoreContent",
      query: {
        anchorIdx: 1,
      },
    })
  }, 2200)
}

const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()

const listRes = ref(arrList)

// 元素总宽度
const domWidth = ref(0)
const pageWidth = ref(0)

// 当前选中索引
const indexAc = ref(0)

const baseRWboxLeft = ref(true)

onMounted(() => {
  setTimeout(() => {
    baseRWboxLeft.value = false
  }, 500)
})

// 底部文字提示显示和隐藏
const txtTit = ref(false)

const poemList = configExcel["诗词"]

const isOpcMove = ref(true)

// 时代数组
const ageList = ref([])
// 时代选中
const ageAc = ref(poemList[0]["朝代"])

// 时代显示隐藏切换
const ageFlga = ref(false)

// 切换时代
const cutAgeFu = (val) => {
  const index = listRes.value.findIndex((v) => v["朝代"] === val)

  if (indexAc.value === index) return

  isShowOperationTip.value = false

  titShow.value = false

  isOpcMove.value = false

  setTimeout(() => {
    isOpcMove.value = true
  }, 500)
  indexAc.value = index
  ageAc.value = val
}

onMounted(() => {
  const tempArr = []
  const imgDataLenght = arrList.length
  // 整个数组能分为多少段，向上取整
  const isArrNum = Math.ceil(poemList.length / imgDataLenght)
  for (let i = 0; i < isArrNum; i++) {
    tempArr.push(poemList.slice(i * imgDataLenght, (i + 1) * imgDataLenght))
  }

  const ageListTemp = []

  const arrRes = []

  tempArr.forEach((v1) => {
    v1.forEach((v2, i2) => {
      v2.imgArr = arrList[i2]
      v2.waiClass = i2
      arrRes.push(v2)
      if (!ageListTemp.includes(v2["朝代"])) ageListTemp.push(v2["朝代"])
    })
  })
  // console.log("-----", arrRes)
  ageList.value = ageListTemp
  listRes.value = arrRes

  const fullWidth = window.innerWidth >= 500 ? 500 : window.innerWidth

  pageWidth.value = fullWidth
  // 总盒子的宽度
  domWidth.value = fullWidth * poemList.length
})

// 向右是-1
// 向左是 1
const indexFlag = ref(0)
const isShowOperationTip = ref(true)

// 左右滑动
const onSwipeChange = (val) => {
  isShowOperationTip.value = false
  let numResTemp = indexAc.value + val

  let indexFlagTemp = -val

  if (val === -1 && indexAc.value === 0) {
    // 第一个页面左滑

    txtTit.value = true
    setTimeout(() => {
      txtTit.value = false
    }, 1000)
    return
  }
  if (val === 1 && indexAc.value === listRes.value.length - 1) {
    // numResTemp = 0

    txtTit.value = true
    setTimeout(() => {
      txtTit.value = false
    }, 1000)
    return
  }

  titShow.value = false

  indexAc.value = numResTemp

  indexFlag.value = indexFlagTemp

  // 底部朝代也要变化
  ageAc.value = listRes.value[numResTemp]["朝代"]
}

// 是否触发移动的逻辑
const isMoveFu = (index, num) => {
  let numRes
  if (index === indexAc.value) numRes = 0
  else numRes = indexFlag.value * num * 2

  return numRes
}
</script>

<style lang="less" scoped>
.poem-list-page {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f3f4ef;

  .RWsBtn {
    position: absolute;
    z-index: 22;
    right: 20px;
    bottom: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: all 0.5s;
    & > img {
      width: 20px;
    }
  }
  .RWsBtnHide {
    opacity: 0;
    pointer-events: none;
  }

  .RWage {
    position: absolute;
    z-index: 22;
    right: -220px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: calc(100% - 70px);
    height: 30px;
    transition: all 0.5s;
    opacity: 0;
    pointer-events: none;
    .RWageRow {
      transition: all 0.5s;
      width: 30px;
      height: 30px;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.5);
      font-family: KingHwa_OldSong;
      font-size: 16px;
      margin-right: 15px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      border: 1px solid transparent;
    }
    .RWageRowAc {
      color: #d6cda1;
      border: 1px solid #d6cda1;
      font-size: 18px;
    }
    .RWageImg {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      & > img {
        width: 20px;
      }
    }
  }
  .RWageShow {
    right: 20px;
    opacity: 1;
    pointer-events: auto;
  }

  .RWbox {
    width: 8000px;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    background-image: url("../assets/images/RW/bg_caizhi.jpg");
    background-size: contain;
    transition: left 0.8s;

    .ROW {
      position: relative;
      transition: opacity 1.2s;
      & > img {
        position: absolute;
        bottom: 0;
        height: 100%;
        transition: transform 1s;
      }
    }

    .ROW {
      .ROW1_1 {
        left: 0;
      }
      .ROW1_2 {
        z-index: 2;
        right: 0;
      }
      .ROW1_3 {
        right: 5%;
      }
      .ROW2_1 {
        z-index: 2;
        left: -38%;
      }
      .ROW2_2 {
        right: 5%;
      }
      .ROW2_3 {
        z-index: 3;
        right: -20%;
      }
      .ROW3_1 {
        left: -36%;
      }
      .ROW3_2 {
        height: 15%;
        left: 10%;
      }
      .ROW3_3 {
        z-index: 2;
        height: 15%;
        right: 10%;
      }
      .ROW3_4 {
        right: 0%;
      }
      .ROW3_5 {
        right: -5%;
      }
      .ROW4_1 {
        left: -35%;
      }
      .ROW4_2 {
        left: -40%;
        height: 15%;
      }
      .ROW4_3 {
        left: 10%;
        height: 20%;
      }
      .ROW4_4 {
        right: 6%;
        height: 15%;
      }
      .ROW4_5 {
        right: -17%;
      }
      .ROW5_1 {
        left: -45%;
      }
      .ROW5_2 {
        z-index: 2;
        left: -17%;
      }
      .ROW5_3 {
        z-index: 3;
        left: 5%;
        height: 15%;
      }
      .ROW5_4 {
        z-index: 3;
        left: 30%;
        height: 15%;
      }
      .ROW5_5 {
        right: -6%;
      }
      .ROW6_1 {
        z-index: 3;
        left: 2%;
        height: 15%;
      }
      .ROW6_2 {
        left: -10%;
      }
      .ROW6_3 {
        z-index: 2;
        left: -13%;
      }
      .ROW6_4 {
        right: -10%;
      }
      .ROW6_5 {
        right: -10%;
      }
    }

    .ROWtxt {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      writing-mode: vertical-rl;
      position: relative;
      z-index: 10;
      .inner-wrap {
        > .title-wrap {
          position: relative;
          width: fit-content;
          height: fit-content;
          > h1 {
            font-family: KingHwa_OldSong;
            font-weight: 400;
            font-size: calc(
              36 / v-bind("windowSizeWhenDesignForRef") *
                v-bind("windowSizeInCssForRef")
            );
            color: black;
            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;
              font-weight: 400;
              font-size: 20px;
              color: #b9aa70;
              letter-spacing: 0em;
              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;
              font-weight: 400;
              font-size: calc(
                16 / v-bind("windowSizeWhenDesignForRef") *
                  v-bind("windowSizeInCssForRef")
              );
              color: #ffffff;
            }
          }
        }
        > p {
          margin-right: calc(
            40 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
          font-family: KaiTi;
          font-weight: 400;
          font-size: calc(
            20 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
          color: black;
          line-height: 1.6em;
          white-space: pre;
          letter-spacing: 0.2em;
        }
      }
    }
    .ROWtxt.typesetting-1 {
      > .inner-wrap {
        transform: translate(10%, -20%);
        > p {
          margin-top: calc(
            232 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
        }
      }
    }
    .ROWtxt.typesetting-2 {
      > .inner-wrap {
        transform: translate(10%, -4%);
        > p {
          margin-top: calc(
            102 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
        }
      }
    }
    .ROWtxt.typesetting-3 {
      > .inner-wrap {
        transform: translate(0, -9%);
        > p {
          margin-top: calc(
            135 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
        }
      }
    }
    .ROWtxt.typesetting-4 {
      > .inner-wrap {
        transform: translate(10%, -10%);
        > p {
          margin-top: calc(
            200 / v-bind("windowSizeWhenDesignForRef") *
              v-bind("windowSizeInCssForRef")
          );
        }
      }
    }
  }

  .ROW1 {
    .ROWtxt {
      padding-top: 15%;
      padding-right: 40%;
    }
  }
  .ROW2 {
    .ROWtxt {
      padding-right: 24%;
    }
  }
  .ROW3 {
    .ROWtxt {
      padding-right: 30%;
    }
  }
  .ROWW19 {
    .ROWtxt {
      padding-top: 87%;
    }
  }

  // 底部文字提示
  .RWind {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    font-size: 14px;
    color: #b9aa70;
    letter-spacing: 4px;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    font-family: KingHwa_OldSong;
  }
  .RWindShow {
    opacity: 1;
  }

  // 操作提示
  .operation-tip {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    color: #7f9470;
    font-size: 12px;
    letter-spacing: 3px;
    pointer-events: none;
    display: flex;
    align-items: center;
    opacity: 1;
    transition: opacity 1s;

    img {
      width: 30px;
    }
  }

  .operation-tipHide {
    opacity: 0;
  }
  // 返场视频
  .backVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s;
    & > video {
      width: 100%;
    }
  }
  .backVideoShow {
    opacity: 1;
    pointer-events: auto;
  }
  // 返回按钮
  .RWback {
    position: absolute;
    z-index: 22;
    left: 20px;
    bottom: 20px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
  }
}
</style>