改改改

src/components/OperationTip.vue

@@ -1,24 +1,23 @@
 <template>
-  <div
-    v-show="isShow"
-    class="operation-tip"
-    :class="{
-      'animation-show-hide': isShow,
-    }"
-  >
+  <Transition name="fade-out">
     <div
-      v-if="props.text"
-      class="text"
+      v-show="isShow"
+      class="operation-tip"
     >
-      {{ props.text }}
+      <div
+        v-if="props.text"
+        class="text"
+      >
+        {{ props.text }}
+      </div>
+      <img
+        class=""
+        :src="require(`@/assets/images/icon_operation_${props.direction}_${props.color}.png`)"
+        alt=""
+        draggable="false"
+      >
     </div>
-    <img
-      class=""
-      :src="require(`@/assets/images/icon_operation_${props.direction}_${props.color}.png`)"
-      alt=""
-      draggable="false"
-    >
-  </div>
+  </Transition>
 </template>
 
 <script setup>
@@ -58,14 +57,17 @@ const props = defineProps({
 })
 
 const isShow = ref(true)
-let blinkCount = 0
-const intervalId = setInterval(() => {
-  blinkCount++
-  if (blinkCount >= 3 || !props.isShow) {
+const propIsShow = computed(() => {
+  return props.isShow
+})
+watch(propIsShow, (v) => {
+  if (!v) {
     isShow.value = false
-    clearInterval(intervalId)
   }
-}, 1500)
+})
+setTimeout(() => {
+  isShow.value = false
+}, 2000)
 </script>
 
 <style lang="less" scoped>

src/router/index.js

@@ -1,6 +1,8 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import MoreContent from '../views/MoreContent.vue'
+import PoemList from '../views/PoemList.vue'
+import PaintingList from '../views/PaintingList.vue'
 import GameView from '../views/GameView.vue'
 
 // import store from '@/store/index.js'
@@ -21,6 +23,16 @@ const routes = [
     component: MoreContent,
   },
   {
+    path: '/poem-list',
+    name: 'PoemList',
+    component: PoemList,
+  },
+  {
+    path: '/painting-list',
+    name: 'PaintingList',
+    component: PaintingList,
+  },
+  {
     path: '/game',
     name: 'Game',
     component: GameView,

src/views/MoreContent.vue

@@ -1,24 +1,19 @@
 <template>
   <div class="more-content">
-    <button @click="isShowPoemList = true">
+    <button
+      @click="router.push({
+        name: 'PoemList'
+      })"
+    >
       诗词
     </button>
-    <button @click="isShowPaintingListMenu = true">
+    <button
+      @click="router.push({
+        name: 'PaintingList'
+      })"
+    >
       画作
     </button>
-
-    <Transition name="fade-in-out">
-      <PoemList
-        v-if="isShowPoemList"
-        @close="isShowPoemList = false"
-      />
-    </Transition>
-    <Transition name="fade-in-out">
-      <PaintingListMenu
-        v-if="isShowPaintingListMenu"
-        @close="isShowPaintingListMenu = false"
-      />
-    </Transition>
   </div>
 </template>
 
@@ -27,7 +22,7 @@ import { ref, computed, watch, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import PoemList from '@/views/PoemList.vue'
-import PaintingListMenu from '@/views/PaintingListMenu.vue'
+import paintingList from '@/views/PaintingList.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -35,8 +30,6 @@ const store = useStore()
 
 const $env = inject('$env')
 
-const isShowPoemList = ref(false)
-const isShowPaintingListMenu = ref(false)
 </script>
 
 <style lang="less" scoped>

src/views/PaintingListMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="painting-list-menu"
+    class="painting-list"
   >
     <ul
       ref="menuEl"
@@ -102,7 +102,7 @@
     </ul>
     <BtnBack
       class="button-back"
-      @click="emit('close')"
+      @click="router.go(-1)"
     />
     <OperationTip
       class="operation-tip"
@@ -124,8 +124,6 @@ const store = useStore()
 
 const $env = inject('$env')
 
-const emit = defineEmits(['close'])
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -135,7 +133,7 @@ const menuEl = ref(null)
 const menuElScrollLeft = ref(0)
 onMounted(() => {
   menuEl.value.addEventListener('scroll', (e) => {
-    menuElScrollLeft.value = menuEl.value.scrollTop
+    menuElScrollLeft.value = menuEl.value.scrollLeft
   })
 })
 
@@ -207,6 +205,7 @@ function onClickAge(ageName) {
     expandedAgeNameList.value.add(ageName)
   }
 }
+console.log(configExcel['其他'][4])
 const specialDesc = configExcel['其他'][4]['修篁树石图'][1]['作品简介'].split('\n')[0]
 
 const isShowOperationTip = ref(true)
@@ -219,7 +218,7 @@ watch(menuElScrollLeft, (v) => {
 </script>
 
 <style lang="less" scoped>
-.painting-list-menu{
+.painting-list{
   position: absolute;
   left: 0;
   top: 0;

src/views/PoemList.vue

@@ -59,7 +59,7 @@
     <BtnBack
       v-show="!isShowMenu"
       class="button-back"
-      @click="emit('close')"
+      @click="router.go(-1)"
     />
     <OperationTip
       class="operation-tip"
@@ -132,8 +132,6 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
-const emit = defineEmits(['close'])
-
 const poemList = configExcel['诗词']
 
 /**