画作目录页做了一半

src/views/MoreContent.vue

@@ -3,7 +3,9 @@
     <button @click="isShowPoemList = true">
       诗词
     </button>
-    <button>画作</button>
+    <button @click="isShowPaintingListMenu = true">
+      画作
+    </button>
 
     <Transition name="fade-in-out">
       <PoemList
@@ -11,6 +13,12 @@
         @close="isShowPoemList = false"
       />
     </Transition>
+    <Transition name="fade-in-out">
+      <PaintingListMenu
+        v-if="isShowPaintingListMenu"
+        @close="isShowPaintingListMenu = false"
+      />
+    </Transition>
   </div>
 </template>
 
@@ -19,6 +27,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'
 
 const route = useRoute()
 const router = useRouter()
@@ -27,6 +36,7 @@ const store = useStore()
 const $env = inject('$env')
 
 const isShowPoemList = ref(false)
+const isShowPaintingListMenu = ref(false)
 </script>
 
 <style lang="less" scoped>

src/views/PaintingListMenu.vue

@@ -0,0 +1,157 @@
+<template>
+  <div
+    class="painting-list-menu"
+  >
+    <ul
+      ref="menuEl"
+    >
+      <div
+        v-for="(paintingGroup, ageName) in menuInfo"
+        :key="ageName"
+        class="menu-item"
+      >
+        <div class="cover">
+          <span class="age">{{ ageName }}</span>
+          <span class="age-en">{{ `${ageCnToEn[ageName]} dynasty` }}</span>
+          <span class="author-list">{{ getAuthorList(paintingGroup).join('/') }}</span>
+        </div>
+        <div class="hidden-content">
+          <div
+            v-if="ageName === '宋'"
+            class="special-desc"
+          >
+            <!-- <img class="logo" src="@/assets/images/" alt="" draggable="false"> -->
+            <p>{{ specialDesc }}</p>
+            <button class="see-more" />
+          </div>
+          <div
+            v-for="item in paintingGroup"
+            :key="item['标题']"
+            class="painting-item"
+          >
+            <span class="author">{{ item['作者'] }}</span>
+            <span class="title">{{ item['标题'] }}</span>
+            <span class="type">{{ item['装裱\/材质\/笔类型'] }}</span>
+            <div class="img-wrap">
+              <img
+                class=""
+                :src="`${$env.VUE_APP_DEPLOY_ORIGIN}/configMultiMedia/paintings-thumb/${item['标题']}.jpg`"
+                alt=""
+                draggable="false"
+              >
+            </div>
+            <span class="size">{{ getPaintingSizeString(item['尺寸']) }}</span>
+            <span class="position">{{ item['馆藏'] }}</span>
+          </div>
+        </div>
+      </div>
+    </ul>
+    <BtnBack
+      class="button-back"
+      @click="emit('close')"
+    />
+    <OperationTip
+      class="operation-tip"
+      direction="h"
+      :is-show="isShowOperationTip"
+    />
+  </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 emit = defineEmits(['close'])
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
+const menuEl = ref(null)
+const menuElScrollLeft = ref(0)
+onMounted(() => {
+  menuEl.value.addEventListener('scroll', (e) => {
+    menuElScrollLeft.value = menuEl.value.scrollTop
+  })
+})
+
+/**
+ * 目录
+ */
+const menuInfo = {}
+const temp = configExcel['画作'].map((item) => {
+  return item['朝代']
+})
+const ageList = Array.from(new Set(temp))
+for (const painting of configExcel['画作']) {
+  if (!menuInfo[painting['朝代']]) {
+    menuInfo[painting['朝代']] = []
+  }
+  menuInfo[painting['朝代']].push(painting)
+}
+const ageCnToEn = {
+  '宋': 'Song',
+  '元': 'Yuan',
+  '明': 'Ming',
+  '清': 'Qing',
+}
+function getAuthorList(paintingGroup) {
+  const temp = paintingGroup.map((item) => {
+    return item['作者']
+  })
+  return Array.from(new Set(temp))
+}
+function getPaintingSizeString(raw) {
+  const temp = raw.split('\n')
+  let height = temp[0]
+  let width = temp[1]
+  height = height.substring(1, height.length - 2)
+  width = width.substring(1, width.length - 2)
+  return `${width}\u00D7${height} 厘米`
+}
+const specialDesc = configExcel['其他'][3]['修篁树石图'][1]['作品简介'].split('\n')[0]
+
+function onClickMenuItem(menuItemName) {
+  // const targetIdx = poemList.findIndex((item) => {
+  //   return item['朝代'] === menuItemName
+  // })
+  // swiper.slideTo(targetIdx)
+  // isShowMenu.value = false
+}
+
+const isShowOperationTip = ref(true)
+watch(menuElScrollLeft, (v) => {
+  if (v > 0) {
+    isShowOperationTip.value = false
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+.painting-list-menu{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #99ab8e;
+  >.operation-tip{
+    position: absolute;
+    right: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translateX(-50%);
+    z-index: 10;
+  }
+}
+</style>