|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <div class="poem-list">
|
|
|
+ <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"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </SwiperSlide>
|
|
|
+ </Swiper>
|
|
|
+
|
|
|
+ <BtnBack
|
|
|
+ v-show="!isShowMenu"
|
|
|
+ class="button-back"
|
|
|
+ @click="emit('close')"
|
|
|
+ />
|
|
|
+ <OperationTip
|
|
|
+ v-show="!isShowMenu"
|
|
|
+ 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>
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in menuList"
|
|
|
+ :key="index"
|
|
|
+ @click="onClickMenuItem(item)"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </li>
|
|
|
+ </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['诗词']
|
|
|
+
|
|
|
+let swiper = null
|
|
|
+const currentIdx = ref(0)
|
|
|
+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{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #555;
|
|
|
+ ::-webkit-scrollbar { width: 0; height: 0; }
|
|
|
+ >.poem-list{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ >.poem-item{
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.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'));
|
|
|
+ >li{
|
|
|
+ font-family: KingHwa_OldSong, KingHwa_OldSong;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >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>
|
任一存
