123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497 |
- <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.replace({
- 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;
- &::-webkit-scrollbar {
- display: none;
- }
- .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;
- 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;
- 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;
- 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;
- 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;
- 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>
|