fix: 绘画列表页展开某个朝代后自动滚动的行为、初始计算可滚动长度；feat：对接绘画详情页

src/views/PaintingList.vue

@@ -38,7 +38,7 @@
           :style="{
             backgroundImage: `url(${ageRenderInfo[ageName].coverBg})`,
           }"
-          @click="onClickAge(ageName)"
+          @click="(e) => onClickAge(ageName, e)"
         >
           <img
             class="age"
@@ -165,12 +165,7 @@
             </div>
             <div
               class="img-wrap"
-              @click="router.push({
-                name: 'PaintingDetailList',
-                query: {
-                  idx: Number(item['序号']) - 1,
-                }
-              })"
+              @click="onClickPainting(item)"
             >
               <img
                 class="thumb"
@@ -259,9 +254,9 @@ const {
   maxTranslateLength: undefined,
   viewportWidth: windowWidth,
 })
-onMounted(() => {
+setTimeout(() => {
   computeMaxTranslateLengthInnerByScrollTarget()
-})
+}, 100)
 watch(translateLength, (v) => {
   menuEl.value.scrollLeft = v
 })
@@ -326,16 +321,17 @@ const unwatch = watch(menuElScrollLeft, (v) => {
   unwatch()
 })
 
-function onClickAge(ageName) {
+function onClickAge(ageName, evt) {
   isShowOperationTip.value = false
   if (expandedAgeNameList.value.has(ageName)) {
     expandedAgeNameList.value.delete(ageName)
   } else {
     expandedAgeNameList.value.add(ageName)
-    // const menuItemEl = document.getElementById(`menu-item-${ageName}`)
-    setTimeout(() => {
-      speedUp(1)
-    }, 520)
+    if (windowWidth.value - evt.pageX <= 158 / windowHeightDesign * windowHeight.value) {
+      setTimeout(() => {
+        speedUp(1)
+      }, 520)
+    }
   }
   setTimeout(() => {
     computeMaxTranslateLengthInnerByScrollTarget()
@@ -344,6 +340,16 @@ function onClickAge(ageName) {
 
 const isShowPaintingStyleDesc = ref(false)
 
+function onClickPainting(item) {
+  console.log('sdfsdfsdf', item)
+  router.push({
+    name: 'PaintingDetail',
+    query: {
+      idx: Number(item['序号']) - 1,
+    }
+  })
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -365,6 +371,7 @@ const isShowPaintingStyleDesc = ref(false)
     height: calc(250 / v-bind('windowHeightDesign') * v-bind('windowHeight') * 1px);
     transform: translate(0, -40%);
     z-index: 1;
+    pointer-events: none;
   }
   >.bg-serial-frames-top{
     position: absolute;
@@ -374,6 +381,7 @@ const isShowPaintingStyleDesc = ref(false)
     transform: translate(10%, -5%);
     transform-origin: top right;
     z-index: 1;
+    pointer-events: none;
   }
   >.bg-serial-frames-bottom{
     position: absolute;
@@ -383,6 +391,7 @@ const isShowPaintingStyleDesc = ref(false)
     transform: translate(0, 10%) scale(1);
     transform-origin: bottom left;
     z-index: 1;
+    pointer-events: none;
   }
   >ul{
     position: absolute;