PoemList copy.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497
  1. <template>
  2. <div class="poem-list-page">
  3. <!-- 背景序列帧 -->
  4. <Transition name="fade-in-out">
  5. <SerialFrames
  6. v-if="getTypesettingIdx(currentPoem['类型']) === 1"
  7. class="bg-serial-frames-1"
  8. :image-src="require(`@/assets/images/serial-frame-poem-list-1.png`)"
  9. :total-width="13001"
  10. :height="852"
  11. :frame-number="33"
  12. :frame-duration="55"
  13. />
  14. <SerialFrames
  15. v-else-if="getTypesettingIdx(currentPoem['类型']) === 2"
  16. class="bg-serial-frames-2"
  17. :image-src="require(`@/assets/images/serial-frame-poem-list-2.png`)"
  18. :total-width="13001"
  19. :height="852"
  20. :frame-number="33"
  21. :frame-duration="55"
  22. />
  23. <SerialFrames
  24. v-else-if="getTypesettingIdx(currentPoem['类型']) === 3"
  25. class="bg-serial-frames-3"
  26. :image-src="require(`@/assets/images/serial-frame-poem-list-3.png`)"
  27. :total-width="13001"
  28. :height="852"
  29. :frame-number="33"
  30. :frame-duration="55"
  31. />
  32. <SerialFrames
  33. v-else-if="getTypesettingIdx(currentPoem['类型']) === 4"
  34. class="bg-serial-frames-4"
  35. :image-src="require(`@/assets/images/serial-frame-poem-list-1.png`)"
  36. :total-width="13001"
  37. :height="852"
  38. :frame-number="33"
  39. :frame-duration="55"
  40. />
  41. </Transition>
  42. <Transition name="fade-in-out">
  43. <img
  44. v-if="getTypesettingIdx(currentPoem['类型']) === 1"
  45. class="bg"
  46. src="@/assets/images/poem-list-bg-1.jpg"
  47. alt=""
  48. draggable="false"
  49. >
  50. <img
  51. v-else-if="getTypesettingIdx(currentPoem['类型']) === 2"
  52. class="bg"
  53. src="@/assets/images/poem-list-bg-2.jpg"
  54. alt=""
  55. draggable="false"
  56. >
  57. <img
  58. v-else-if="getTypesettingIdx(currentPoem['类型']) === 3"
  59. class="bg"
  60. src="@/assets/images/poem-list-bg-3.jpg"
  61. alt=""
  62. draggable="false"
  63. >
  64. <img
  65. v-else
  66. class="bg"
  67. src="@/assets/images/poem-list-bg-4.jpg"
  68. alt=""
  69. draggable="false"
  70. >
  71. </Transition>
  72. <Swiper
  73. class="poem-list"
  74. :slides-per-view="1"
  75. direction="vertical"
  76. @swiper="onSwiper"
  77. @slideChange="onSlideChange"
  78. >
  79. <SwiperSlide
  80. v-for="(item, index) in poemList"
  81. :key="index"
  82. class="poem-item"
  83. :class="[`typesetting-${getTypesettingIdx(item['类型'])}`]"
  84. >
  85. <div class="inner-wrap">
  86. <div class="title-wrap">
  87. <h1>《{{ item['标题'] }}》</h1>
  88. <div class="sub-title">
  89. <span class="author">{{ item['作者'] }}</span>
  90. <span class="age">{{ item['朝代'] }}</span>
  91. </div>
  92. </div>
  93. <p>{{ item['正文'] }}</p>
  94. </div>
  95. </SwiperSlide>
  96. </Swiper>
  97. <BtnBack
  98. v-show="!isShowMenu"
  99. class="button-back"
  100. @click="router.replace({
  101. name: 'MoreContent',
  102. query: {
  103. anchorIdx: 1,
  104. }
  105. })"
  106. />
  107. <Transition
  108. v-show="isShowOperationTipShadow"
  109. name="fade-out"
  110. >
  111. <div class="operation-tip-shadow" />
  112. </Transition>
  113. <OperationTip
  114. class="operation-tip"
  115. text="下一首"
  116. :is-show="isShowOperationTip"
  117. />
  118. <!-- 选择时间 -->
  119. <button
  120. v-show="!isShowMenu"
  121. class="menu-btn"
  122. @click="isShowMenu = true"
  123. >
  124. <img
  125. class=""
  126. src="@/assets/images/icon_menu.png"
  127. alt=""
  128. draggable="false"
  129. >
  130. </button>
  131. <Transition name="fade-in-out">
  132. <menu v-show="isShowMenu">
  133. <ul>
  134. <button
  135. v-for="(item, index) in menuList"
  136. :key="index"
  137. :class="{
  138. active: item === currentPoem['朝代']
  139. }"
  140. @click="onClickMenuItem(item)"
  141. >
  142. <img
  143. class="bg"
  144. :src="require(`@/assets/images/poem-menu-item-bg${item === currentPoem['朝代'] ? '-active' : ''}.png`)"
  145. alt=""
  146. draggable="false"
  147. :style="{
  148. transform: `rotate(${90 * (index % 5)}deg)`
  149. }"
  150. >
  151. <span>{{ item }}</span>
  152. </button>
  153. </ul>
  154. <button
  155. class="close"
  156. @click="isShowMenu = false"
  157. >
  158. <img
  159. class=""
  160. src="@/assets/images/icon_close.png"
  161. alt=""
  162. draggable="false"
  163. >
  164. </button>
  165. </menu>
  166. </Transition>
  167. </div>
  168. </template>
  169. <script setup>
  170. import { ref, computed, watch, onMounted, inject } from "vue"
  171. import { useRoute, useRouter } from "vue-router"
  172. import { useStore } from "vuex"
  173. import useSizeAdapt from "@/useFunctions/useSizeAdapt"
  174. const route = useRoute()
  175. const router = useRouter()
  176. const store = useStore()
  177. const $env = inject('$env')
  178. const {
  179. windowSizeInCssForRef,
  180. windowSizeWhenDesignForRef,
  181. } = useSizeAdapt()
  182. const poemList = configExcel['诗词']
  183. /**
  184. * 当前古诗
  185. */
  186. const currentIdx = ref(0)
  187. const currentPoem = computed(() => {
  188. return poemList[currentIdx.value]
  189. })
  190. /**
  191. * 排版
  192. */
  193. function getTypesettingIdx(poemType) {
  194. switch (poemType) {
  195. case '七绝':
  196. return 1
  197. case '七律':
  198. return 2
  199. case '五绝':
  200. return 3
  201. case '五律':
  202. return 4
  203. default:
  204. return 2
  205. }
  206. }
  207. /**
  208. * swiper
  209. */
  210. let swiper = null
  211. const onSwiper = (swiperP) => {
  212. swiper = swiperP
  213. }
  214. const onSlideChange = (e) => {
  215. currentIdx.value = e.activeIndex
  216. }
  217. /**
  218. * 操作提示
  219. */
  220. const isShowOperationTip = ref(true)
  221. const unwatch = watch(currentIdx, (v) => {
  222. isShowOperationTip.value = false
  223. isShowOperationTipShadow.value = false
  224. unwatch()
  225. })
  226. const isShowOperationTipShadow = ref(true)
  227. setTimeout(() => {
  228. isShowOperationTipShadow.value = false
  229. }, 2000)
  230. /**
  231. * 目录
  232. */
  233. const isShowMenu = ref(false)
  234. const temp = configExcel['诗词'].map((item) => {
  235. return item['朝代']
  236. })
  237. const menuList = Array.from(new Set(temp))
  238. function onClickMenuItem(menuItemName) {
  239. const targetIdx = poemList.findIndex((item) => {
  240. return item['朝代'] === menuItemName
  241. })
  242. swiper.slideTo(targetIdx)
  243. isShowMenu.value = false
  244. }
  245. </script>
  246. <style lang="less" scoped>
  247. .poem-list-page{
  248. position: absolute;
  249. left: 0;
  250. top: 0;
  251. width: 100%;
  252. height: 100%;
  253. background-color: #dde6db;
  254. ::-webkit-scrollbar { width: 0; height: 0; }
  255. >.bg-serial-frames-1, .bg-serial-frames-4{
  256. position: absolute;
  257. top: 0;
  258. left: 0;
  259. transform: translate(0, 0) scale(0.8);
  260. transform-origin: top left;
  261. z-index: 1;
  262. }
  263. >.bg-serial-frames-2{
  264. position: absolute;
  265. bottom: 0;
  266. right: 0;
  267. transform: translate(0, 0) scale(0.8);
  268. transform-origin: bottom right;
  269. z-index: 1;
  270. }
  271. >.bg-serial-frames-3{
  272. position: absolute;
  273. top: 0;
  274. right: 0;
  275. transform: translate(0, 0) scale(0.8);
  276. transform-origin: top right;
  277. z-index: 1;
  278. }
  279. >.bg{
  280. position: absolute;
  281. left: 0;
  282. top: 0;
  283. width: 100%;
  284. height: 100%;
  285. object-fit: cover;
  286. }
  287. >.poem-list{
  288. position: absolute;
  289. left: 0;
  290. top: 0;
  291. width: 100%;
  292. height: 100%;
  293. overflow: auto;
  294. &::-webkit-scrollbar {
  295. display: none;
  296. }
  297. .poem-item{
  298. display: flex;
  299. justify-content: center;
  300. align-items: center;
  301. width: 100%;
  302. height: 100%;
  303. writing-mode: vertical-rl;
  304. position: relative;
  305. .inner-wrap{
  306. >.title-wrap{
  307. position: relative;
  308. width: fit-content;
  309. height: fit-content;
  310. >h1{
  311. font-family: KingHwa_OldSong;
  312. font-weight: 400;
  313. font-size: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  314. color: #476446;
  315. line-height: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  316. white-space: pre;
  317. letter-spacing: 0.1em;
  318. }
  319. >.sub-title{
  320. position: absolute;
  321. left: 0;
  322. top: 50%;
  323. transform: translate(-140%, -50%);
  324. display: flex;
  325. align-items: center;
  326. >.author{
  327. white-space: pre;
  328. font-family: KaiTi;
  329. font-weight: 400;
  330. font-size: 20px;
  331. color: #476446;
  332. letter-spacing: 0.3em;
  333. margin-inline-end: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  334. }
  335. >.age{
  336. display: inline-block;
  337. width: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  338. height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  339. background-color: #b6a261;
  340. border-radius: 50%;
  341. display: flex;
  342. justify-content: center;
  343. align-items: center;
  344. font-family: KaiTi;
  345. font-weight: 400;
  346. font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  347. color: #FFFFFF;
  348. }
  349. }
  350. }
  351. >p{
  352. margin-right: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  353. font-family: KaiTi;
  354. font-weight: 400;
  355. font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  356. color: #476446;
  357. line-height: 1.8em;
  358. white-space: pre;
  359. letter-spacing: 0.2em;
  360. }
  361. }
  362. }
  363. .poem-item.typesetting-1{
  364. >.inner-wrap{
  365. transform: translate(10%, -20%);
  366. >p{
  367. margin-top: calc(232 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  368. }
  369. }
  370. }
  371. .poem-item.typesetting-2{
  372. >.inner-wrap{
  373. transform: translate(10%, -4%);
  374. >p{
  375. margin-top: calc(102 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  376. }
  377. }
  378. }
  379. .poem-item.typesetting-3{
  380. >.inner-wrap{
  381. transform: translate(0, -9%);
  382. >p{
  383. margin-top: calc(135 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  384. }
  385. }
  386. }
  387. .poem-item.typesetting-4{
  388. >.inner-wrap{
  389. transform: translate(10%, -10%);
  390. >p{
  391. margin-top: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  392. }
  393. }
  394. }
  395. }
  396. >.button-back{
  397. z-index: 10;
  398. }
  399. >.operation-tip-shadow{
  400. position: absolute;
  401. left: 0;
  402. bottom: 0;
  403. width: 100%;
  404. height: 20%;
  405. background: linear-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%);
  406. z-index: 9;
  407. }
  408. >.operation-tip{
  409. position: absolute;
  410. left: 50%;
  411. bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  412. transform: translateX(-50%);
  413. z-index: 10;
  414. }
  415. >.menu-btn{
  416. position: absolute;
  417. right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  418. bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  419. z-index: 10;
  420. width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  421. height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  422. >img{
  423. width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  424. height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  425. }
  426. }
  427. >menu{
  428. position: absolute;
  429. left: 0;
  430. top: 0;
  431. width: 100%;
  432. height: 100%;
  433. background: hsl(96deg 22% 38% / 52%);
  434. border-radius: 0px 0px 0px 0px;
  435. backdrop-filter: blur(calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
  436. z-index: 15;
  437. >ul{
  438. position: absolute;
  439. left: 50%;
  440. top: 50%;
  441. transform: translate(-50%, -50%);
  442. display: flex;
  443. flex-direction: column;
  444. justify-content: center;
  445. align-items: center;
  446. gap: calc(39 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  447. >button{
  448. width: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  449. height: calc(56 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  450. font-family: KingHwa_OldSong;
  451. font-weight: 400;
  452. font-size: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  453. color: #FFFFFF;
  454. position: relative;
  455. >img.bg{
  456. position: absolute;
  457. left: 0;
  458. top: 0;
  459. width: 100%;
  460. height: 100%;
  461. }
  462. }
  463. >button.active{
  464. color: #F4E09D;
  465. }
  466. }
  467. >button.close{
  468. position: absolute;
  469. right: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  470. bottom: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  471. z-index: 10;
  472. width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  473. height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  474. >img{
  475. width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  476. height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  477. }
  478. }
  479. }
  480. }
  481. </style>