NanjingMuseumWuJinZang/src/views/PoemList.vue

<template>
  <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"
      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="emit('close')"
    />
    <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"
            @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 emit = defineEmits(['close'])

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)
watch(currentIdx, (v) => {
  if (isShowOperationTip.value) {
    isShowOperationTip.value = false
  }
})

/**
 * 目录
 */
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{
    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{
    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: rgba(38,55,38,0.6);
    border-radius: 0px 0px 0px 0px;
    backdrop-filter: blur(calc(20 / 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.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>